React로 준비? 좀 하고 개발하기 - 0 : React Lifecycle

React로 준비? 좀 하고 개발하기 - 0

React Lifecycle

일전에 회사에서 React로 일단 머리를 박으면서 개발을 해봤는데 생각보다 고려해야할 부분이 많다고 느꼈습니다.

주로 작업하던 영역이 core단은 vanilla js, view단은 jquery로 작업하다보니 최신? 프레임워크/라이브러리에 익숙해지는데 제법 많은 시간이 걸린것 같습니다.

확실히 js는 라이브러리/프레임워크를 도입했을 때 장점이 많은 것 같지만 제어의 역전에 대해서는 아무래도 조금 거부감이 드는것도 사실입니다. 서론은 여기까지하고, 오늘은 React로 개발을 하면서 먼저 알아두면 좋을 것에 대해 기술해보려 합니다.

LifeCycle

React에서의 lifeCycle은 크게 3개 Mounting / Updating / `Destroying 으로 구분할 수 있습니다. 각각 단계별로 어떤 일이 일어나고 어떤 단계에서 추가/수정을 해야 좋을지에 대해 알아둬야 삽질을 덜 할 것 같아 한번 정리해봤습니다. 먼저 클래스형 컴포넌트에서 사용하는 방식으로 정리 후 해당 lifeCycle hook을 react hooks로 변경한 걸 적었습니다.

Mounting

1. constructor()
   • 흔하게 보는 생성자.
   • 컴포넌트 생성시 호출.
   • this 사용 가능
   • DOM 접근 불가
2. getDerivedStableFromProps(props, state)
   • props에 의존한 state값이 갱신될때 불리는 사이클 hook (원형은 static method))
   • 경험상 실무에선 props에 의존한 state값이 많다(특히 옜날 react style이라면..) 그런 경우 props가 바뀌면 state가 변경되면서 다시 render()가 일어나기때문에 보통 변경된 state값에 대한 처리를 render()쪽이나 componentDidUpdate()에서 처리한다. 다만 위 lifecycle은 props가 변경되었을 때 일부 데이터를 다시 계산/확인 할때 쓸만할 것으로 보인다.
   • this 사용 불가
3. render()
   • return 값의 jsx를 DOM으로 그린다.
4. UPDATE DOM
5. componentDidMount()
   • component가 mount된 이후의 사이클 훅
   • mount는 DOM객체가 생성되고 브라우저에 나타난 것을 의미.
   • DOM접근 가능

---

Updating - props

1. getDerivedStableFromProps() : 위와 동일
2. shouldComponentUpdate() :
   • component의 state/prop 변한 후 render 전 불리는 훅
   • return false일 경우 component의 state/prop은 변해서 render로 왔지만 render를 안시킬 수 있음.
3. render() : 위와 동일
4. getSnapshotBeforeUpdate()
   • render에서 만들어진 결과가 브라우저에 실질적으로 반영되기 직전 단계.
   • 언제쓰려나..?
5. UPDATE DOM
6. componentDidUpdate()
   • component가 update된 이후의 사이클 훅
   • update가 된 DOM에 접근 가능

---

Updating - state

1. shouldComponentUpdate() : 위와 동일
2. render() : 위와 동일
3. getSnapshotBeforeUpdate() : 위와 동일
4. UPDATE DOM
5. componentDidUpdate : 위와 동일

---

Updating - force

1. render() : 위와 동일
2. getSnapshotBeforeUpdate() : 위와 동일
3. UPDATE DOM : 위와 동일
4. componentDidUpdate : 위와 동일

---

destroying

1. componentWillUnMount() : 해당 컴포넌트 마운트 해제 직전

---

정리

아마 예전부터 react를 써오신분들이라면 위의 lifecycle이 익숙하실거라 생각한다. React가 16.8 version 부터 hooks라는 개념을 도입하기 시작했는데.. (내가 공부를 열심히 할 때는.. 없었다 ㅎ) 이 hooks가 생긴뒤로 클래스형 컴포넌트는 거의 자취를 감추게 되었고 함수형 컴포넌트 방식으로 개발이 붐이 된 것 같습니다. react official로도 hooks로 개발하는걸 권장하기도 하고 클래스형보다 메모리를 덜 먹는 장점이 있으니(모든 lifeCycle이 정의되어있을 필요가 없으니) 더 좋은건 확실하다고 생각합니다. 그래도 기본이 중요한만큼, react에서 제공해주는 위 기능이 필요한 상황이 왔을때 hooks로도 적재적소로 구현할 수 있을 것 같아 정리해뒀습니다.

---

react - lifecycle을 hooks로 표현하기

constructor() === constructor()

---

getDerivedStableFromProps(props, state)

// 억지로 만들수야 있겠지만, 이렇게 만드는게 유의미한가 싶음.
// state의 값이 props에 의존해야 한다면, 
// props변경으로 인한 state 변경시에도 다시 rendering되는게 맞음
// props변경으로 인한 state가 미변경시에는 state에 대한 useEffect()콜이 없음
export const TestComponent = ({testProps}) => {
    const [testState, useTestState] = useState(0);

    useEffect(() => {
        // testProps가 testState에 영향을 줬는지 조건 체크
        console.log("componentDidMount");
    }, [testState]);
}

---

render()

// 함수형 컴포넌트의 경우 return 값이 render되는 것이다. 
const TestComponent = () => {
    return (/*요기*/)
}

---

componentDidMount()

useEffect(() => { console.log("componentDidMount"); }, []);

---

shouldComponentUpdate()

// React에서 제공하는 memo 로 컴포넌트를 memoization 시키고
// 렌더링 여부를 두번째 파라미터에서 shouldComponentUpdate()랑 마찬가지로 true/false로 반환한다. 
// true일 경우 no render // false일경우 re render
const TestComponent = React.memo(() => {
    return (/*요기*/)
}, (prev, next) => {
    return true/false;
})

---

getSnapshotBeforeUpdate()

• 이건 여러번 찾아봤는데 없는듯 하다.. // 한번도 써본적이 없는 hook이기도 했다.

---

componentDidUpdate() (조금 더 디테일하게 바뀐다.)

// 두번째 파라미터내 배열에 특정변수를 넣어서 
// 해당 변수(state or prop)가 변경될때마다 호출되게 변경. 
useEffect(() => {
    console.log("componentDidUpdate Specific Something!", something);
}, [something]);

---

componentWillUnMount()

// clean up 함수라고도 함.
useEffect(() => {
    return () => {
        console.log("componentWillUnMount");
    }
}, []);

---

정리

hooks에 대한 정리를 먼저할까 하다가 그래도 lifeCycle 정리할 때 위 내용도 같이 정리해두는게 보기 편할 듯 하여 정리해뒀습니다. hooks에 대한 정리는 다음 포스팅으로.. 해보겠습니다.