3.6 장

3.6 리액트 내장 훅 살펴보기

 

• 다양한 내장된 훅들을 제공한다.

 

3.6.1 Consumer 컴포넌트 없이 콘텍스트 사용하기 : useContext

 

• ContextAPI에서 Consumer 사용없이 Provider로 부터 전달된 값을 사용할 수 있다.

    <UserContext.Provider value = {user}>
      <ChildComponent />
    </UserContext.Provider>

    function Childcomponent() {
      const user = useContext(UserContext)
    }

• 사용하기 간편한 장점이 있다.

 

3.6.2 렌더링과 무관한 값 저장하기 : useRef

 

• 컴포넌트 내부에서 생성되는 값 중 렌더링과 무관한 현재 쓰지않는 값을 저장한 후 나중에 사용하기 위해 사용한다.
• 이전 상태를 저장했다가 원하는 곳에 사용하는데 사용됨.

 

3.6.3 메모제이션 훅 : useMemo, useCallback

 

• useMemo 와 useCallback은 이전값을 기억해서 성능 최적화를 위해 사용된다.

1. useMemo
   • 메모제이션과 비슷하다(?)
   • 계산량이 많은 함수의 반환값을 재활용하는 용도로 사용된다.
     • 첫 번째 매개변수로 함수를 입력받음
     • 두 번째 매개변수로 의존성 배열받음
   • 의존성 배열에 변경이 없으면 이전 값을 재사용한다.
2. useCallback
   • 리액트의 렌더링 성능을 위해 제공된다.
   • 컴포넌트가 렌더링 될 때마다 새로운 함수를 생성해서 자식 컴포넌트 속성값으로 입력되는 경우가 많이 있다.
   • 이를 막기 위해 함수를 고정시켜주는 역할을 한다. => 함수가 새로 생성되면 불필요한 렌더링이 발생하기 때문에
     • 첫 번째 매개변수로 함수를 입력받음
     • 두 번째 매개변수로 의존성 배열받음
   • 의존성 배열에 변경이 없으면 이전 값을 사용한다.

 

3.6.4 컴포넌트 상태값을 리덕스처럼 관리하기 : useReducer

 

• useReducer 사용하여 컴포넌트 상태값을 리덕스 처럼 관리가 가능하다.
• 리덕스 관련된 개념이 없기때문에 설명을 못하겠다.
• 상위 컴포넌트에서 다수의 상태값을 관리하고 자식 컴포넌트에서 발생한 이벤트로 상위 컴포넌트의 상태값을 변경해야 하는 경우가 많을다.
• 간단하게 제일 상위에서 하위 깊은 곳 까지 값을 전달하는 역할

 

3.6.5 부모 컴포넌트에서 접근 가능한 함수 구현하기 : useImperativeHandle

 

• ref 객체를 통해 클래스형 컴포넌트 자식 컴포넌트 요소들을 호출 가능하다.
• 함수형 컴포넌트에서 변수와 함수를 가져올 수 있게 해준다.

 

3.6.6 기타 리액트 내장 훅 : useLayoutEffect, useDebugValue

 

1. useLayoutEffect
   • useEffect는 렌더링 결과가 돔에 반영된 후 비동기 처리
   • useLayoutEffect는 렌더링 결과가 반영된 직후 호출 => 동기 처리
2. useDebugValue
   • 개발 편의를 위해 제공되고 커스텀 훅의 내부 상태를 관찰할 때 사용.