[WIL] Life cycle, Hooks

Life cycle (생명주기)

리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리이다. 그러다보니 각각의 컴포넌트에는 라이프사이클 즉, 컴포넌트의 수명 주기가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이난다.

 

클래스형

• Mounting : 컴포넌트의 인스턴스 생성, DOM 상에 삽입될 때에 순서대로 호출
  
  • Constructor : 리액트 컴포넌트의 생성자는 컴포넌트가 마운트 되기전에 호출된다.
  • getDerivedStateFromProps: 최초 마운트 시와 갱신 시 모두에게 메서드를 호출하기 직전에 호출됩니다. 
  • render : 클래스 컴포넌트에서 반드시 구현되야할 유일한 메서드, 호출되면 props,state 값을 활용하여 null을 반환
• Updating : 컴포넌트가 re-rendering 될 때, 순서대로 호출 하는 메서드
  • shouldComponentupdate : 컴포넌트가 update되는 성능을 최적하 시키고 싶을때 사용 부모,자식 컴포넌트 다 render 실행
  • getSnapshotBeforeUpdate : 렌더링 결과가 실제 DOM에 반영되기 전에 호출, 다음순서 메서드인 DidUpdate는 컴포넌트가 업데이트된 후에 호출
  • componentDidUpdate : 업데이트가 일어난 직후에 호출, 최초 렌더링에는 호출되지 않는다.
• Unmounting : 컴포넌트가 DOM 상에서 제거될 때에 호출되는 메서드
  • componentWillUnmount : 마운트가 헤제되어 제거되기 직전에 호출, 이 메서드는 다시 렌덩이링 되지 않는다

함수형

• useEffect : componentDidMount, componentDidUpdate 수행 
  • 컴포넌트 안에 state, props에 접근이 가능하고, 기본적으로 첫번째 렌더링과 이후 모든 업데이트에서 수행된다 또한, 두번째 인자로 조건을 걸고 첫 번째 렌더링이나 특정 조건을 만족할 때 수행하도록 설정 가능
• cleanup : 모든 effect는 정리를 위한 함수를 반환할 수 있다. 즉 추가 제거가 하나의 effect를 구성하는 것 
• 성능 최적화 : 모든 렌더링 이후 성능 저하를 발생시키는 경우가 존재한다. 이때 effect를 건더 뛰도록 할 수 있다. 두 번째 인수를 배열로 넘기면 된다.

 

리액트 훅(hooks)

1. useState : 컴포넌트의 상태를 관리 할 수있다
2. useEffect : 렌더링 이후에 실행할 코드를 만들수 있다.
3. useContext : 부모 컴포넌트와 자식 컴포넌트 간의 변수와 함수를 전역적으로 정의 할 수있다. 
4. useReducer : state 업데이트 로직을 reducer 함수에 따로 분리 할 수 있다.
5. useRef : 컴포넌트나 html 요소를 래퍼런스(ref)로 관리할 수 있다. 
   • urrent 속성을 가지고 있는 객체를 반환하는데, 이 속성은 다시 랜더링이 되지 않는다. 
   • 사용해야 할 때 : 애니메이션을 직접적으로 실행시킬때, 포커스, 텍스트 선택영역, 미디어 재생을 관리 할 때
6. forwardRef : useRef로 만든 래퍼런스를 상위 컴포넌트로 전달할 수 있다. 
7. useImperativeHandle : useRef로 만든 래퍼런스의 상태에 따라, 실행할 함수를 정의 할 수 있다.
8. useMemo, useCallback : 의존성 배열에 적힌 값이 변할 때만 값, 함수를 다시 정의할 수 있다. 
9. useLayoutEffect : 모든 DOM 변경 후, 브라우저가 랜더하기 전에 실행 되는 기능을 정할 수 있다.
10. useDebugValue : 사용자 정의 Hook의 디버깅을 도와준다. *디버깅 : 코드에서 버그 제거