리액트를 다루는 기술 개정판 [Hooks]

8. Hooks

  . useState

    . 가장 기본적인 hook이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다 

 

  . useEffect

    . 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정 

    . componentDidMount와 componentDidUpdate를 합친 형태 

    . 마운트될 때만 실행하고 싶으면 비어 있는 배열 []을  두 번째 파라미터로 넣어준다. 

    . 특정 값이 업데이트될 때만 실행하고 싶으면, 두 번째 파라미터의 배열에 검사하고 싶은 값을 넣어준다.

    . 언마운트되기 전이나 업데이트 직전에 어떠한 작업을 수행하고 싶다면, cleanup 함수를 반환해 주어야 한다.

 

  . useReducer

    . useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해주고 싶을 때 사용하는 Hook입니다.

    . 현재 state 업데이트를 위해 필요한 정보를 담은 action 값을 전달받아 새로운 상태를 반환하는 함수 

    . * 반드시 불변성을 지켜야 한다. 

    . 첫 번째 파라미터에는 리듀서 함수를 넣고, 두 번째 파라미터에는 해당 리듀서의 기본값을 넣어 준다.

    . 가장 큰 장점은 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 빼낼 수 있다는 것이다.

 

  . useMemo

    . 함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다.

    . 렌더링 과정에서 특정 값이 바뀌었을 때만 연산을 실행 

 

  . useCallback

    . useMemo와 상당히 비슷한 함수 (렌더링 성능 최적화 상황에서 사용)

    . 만들어 놨던 함수를 재사용할 수 있음 (재렌더링시 함수를 새로 만들 필요가 없어짐)

    . 첫 번째 파라미터에는 생성하고 싶은 함수를 넣고, 두 번째 파라미터에는 배열을 넣는다. (배열의 값이 바뀌면 함수를 새로 생성)

 

  . useRef

    . 함수형 컴포넌트에서 ref를 쉽게 사용할 수 있도록 해준다.

    . 로컬 변수를 사용할 때도 활용할 수 있다. (로컬 변수: 렌더링과 상관없이 바뀔 수 있는 값)

    . 렌더링과 관련되지 않은 값을 관리할 때만 사용해야 한다.

 

  . 커스텀 Hooks 만들기  

    . 여러 컴포넌트에서 비슷한 기능을 공유할 경우, 이를 자신만의 Hook으로 만들어 재사용할 수 있다.

 

  . 다른 개발자들의 Hooks

    . https://nikgraf.github.io/react-hooks/

    . https://github.com/rehooks/awesome-react-hooks

 

  . 정리 

    . Hooks 패턴을 통해 클래스형 컴포넌트 없이 대부분의 기능을 구현할 수 있다.

    . 리액트 매뉴얼의 권장에 따라 함수형 컴포넌트 + Hooks 조합을 쓰는 것이 바람직하다.