2022.2.1st WIL

React의 LifeCycle

LifeCycle이란 React에서 컴포넌트가 생성되고 수정되고 사라지는 여정을 말한다.

React document에서의 LifeCycle 설명 https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

Class형 component의 함수인 componentDidMount 는 생성되고 난 후에 실행하는 함수이고,

componentDidUpdate는 변경한 후,

componentWillUnmount는 제거하기 바로 전에 실행되는 함수이다.

이러한 함수들을 LifeCycle API라고 하며 우리는 이걸 이용해 컴포넌트의 특정 상황에 맞게 행동을 지정해 줄 수 있다.

Class형 VS Function형 Componenet, 그리고 React Hook

과거엔 Class형 component에서 사용하는 Lifecycle API를 위시한 여러 기능들을 Function형 component에서 사용 할 수 없었지만, Function형에서 사용하는 method의 모음인 React Hook이라는 개념이 등장함으로써 해당 기능들을 구현 가능해졌다.

LifeCycle API와 대응되는 React Hook의 예시

동시에 Function형은 Class형 보다 선언하기 편하고(Class형에서 매번 작성해야했던 constructor funtion, this 키워드의 부재), 메모리 자원의 소모가 적기 때문에 Function형을 사용해 Component를 만들것을 React에서 권장하고 있다.

내가 사용해본 React Hook의 목록 :

• useState ⇒ Class형의 state가 하는 역할에 대응된다.
• useRef ⇒ React element를 선택할 때 사용한다. DOM element를 선택하는 것과 유사하다.
• useEffect ⇒ Class형의 Lifecycle function들이 하는 역할에 대응된다.
• useNavigate ⇒ React Router Dom package가 가지고 있는 Hook. URL을 변경시켜주는 함수를 생성한다. Class형에선 쓸 수 없다..
• useParams ⇒ React Router Dom package가 가지고 있는 Hook. URL parameter 값을 가져온다. Class형에선 쓸 수 없다..
• useDispatch ⇒ React Reducer pakage가 가지고 있는 Hook. Redux의 Action creator function을 reducer로 날리는 함수를 생성한다. Class형에선 쓸 수 없다..
• useSelector ⇒ React Reducer pakage가 가지고 있는 Hook. Redux store의 state를 가져온다. Class형에선 쓸 수 없다..