[12월 2주차] 리액트 라이프 사이클과 hooks (feat. 항해99 4주차 리액트 숙련주차)

이번주는 리액트 숙련 주차로 다양한 것들을 배웠다. 리액트의 기본적인 훅인 useEffect와 리덕스, 라우터에 대해 배웠다. 그리고 지난 주에 한 과제를 배운 리덕스와 라우터를 적용해 바꿔보며 응용해보았다. 생각보다 일찍 끝나서 코딩애플 강의도 좀 듣고, 마지막 남은 학기 시험도 보고 왔다.

 

리액트 훅이 나오기 전에는 컴포넌트의 라이프 사이클을 관리하기 위해서 주로 클래스형 컴포넌트를 사용했다고 한다. 물론 state 관리도 가능했기 때문이다. 클래스형 컴포넌트를 다음과 같이 세밀하게 컴포넌트의 생명주기를 일일히 코드로 설정해주는 방식이다.

 

 

라이프 사이클들은 크게 세 가지로 나눌 수 있다.

• 생성될 때 (마운트 될 때 - mount)
  • constructor, render, componentDidMount ..
• 업데이트할 때
  • render, componentDidUpdate ..
• 제거할 때 (마운트 해제 될 때 - unmount)
  • componentWillUnmount

 

리액트 훅이 나온후 리액트 훅과 함께 함수형 컴포넌트를 사용하는 것이 클래스형 컴포넌트보다 편리하고 권장된다. 저번주와 이번주에 배운 훅들을 간단히 정리해본다.

• useState: state를 사용할 수 있게 된다. 관리하고 있는 state가 업데이트 되면 컴포넌트가 rerendering 된다.
• useMemo: useMemo는 메모이즈된 값을 return하는 hook이다. 함수의 연산량이 많을때 이전 결과값을 재사용하는 목적이다.
• useCallback: 함수의 레퍼런스를 제어하여 최적화하는 데 사용된다. 함수가 재생성 되는것을 방지하기 위한 목적이다.

 

리액트 클래스형 vs 함수형 컴포넌트

React.memo, useMemo, useCallback 역할 및 차이점