기본 Hook

📌 useState

const [state, setState] = useState(initialState);

상태 유지 값 (state) , state를 갱신하는 함수 (setState)를 반환한다.

최초 렌더링에서 state => initialState

setState는 state를 갱신할 때 사용하며 새로운 state 값을 받아 컴포넌트 리렌더링을 큐에 등록한다.

setState(newState)

함수적 갱신

이전 state를 사용해 새로운 state를 갱신하는 경우 함수를 setState로 전달할 수 있다.

const Counter({initialState}) => {
  const [count,setCount] = useState(initialState);
  const handleIncrease = () => {
    setCount((prevCount) => prevCount + 1)
  }
  //...
}

위의 예를 보면 handleIncrease 함수가 호출되면 setCount가 동작하는데 이전의 count값을 기준으로 +1을 해주는 계산이 필요하기 때문에 이전의 state 값을 사용한다.

setState(prevState => {
  // Object.assign would also work
  return {...prevState, ...updatedValues};
});

이런식으로 객체 상태 업데이트도 가능하나 추천하지는 않는다. useReducer를 이용하자.

지연 초기 state

initialState의 값이 고비용 계산의 결과라면, 초기 렌더링 시에만 실행되는 함수를 만들 수 있다.

const [state, setState] = useState(() => {
  const initialState = someExpensiveComputation(props);
  return initialState;
});

state 갱신의 취소

state를 기존의 값과 동일한 값으로 갱신하는 경우 렌더링 또는 어떤 동작을 종료한다.

📌 useEffect

useEffect(didUpdate);

명령형 또는 어떤 effect를 발생하는 함수를 인자로 받는다.
useEffect를 사용하면 useEffect에 전달된 함수는 화면에 렌더링이 완료된 후에 수행된다.

기본적으로 동작은 모든 렌더링이 완료된 후에 수행되지만, 어떤 값이 변경되었을 때만 실행되게 할 수도 있다.
보통 컴포넌트가 마운트 됐을 때, 언마운트 됐을 때, 그리고 업데이트 될 때 특정 작업을 처리하는 용도로 사용된다.

useEffect를 사용 할 때에는 파라미터에 함수, 그리고 의존값이 들어있는 배열을 넣는다. 여기서 빈 배열을 넣어주면 컴포넌트가 처음 렌더링 될때에만 useEffect에 전달한 함수가 호출된다.

effect 정리(clean-up)

effect는 종종 컴포넌트가 화면에서 제거될 때 정리해야 하는 리소스를 만든다. 이를 위해서 useEffect로 전달된 함수는 clean-up 함수를 반환할 수 있다.

정리 함수는 메모리 누수 방지를 위해 컴포넌트를 제거하기 전에 수행된다. 또한 컴포넌트가 여러 번 렌더링 된다면 다음 effect가 수행되기 전에 이전의 effect가 정리된다.

 useEffect(() => {
    console.log('컴포넌트 마운트');
    return () => {
      console.log('컴포넌트 언마운트');
    };
  }, []);

effect 타이밍

컴포넌트 마운트에 하는 작업들

• props로 받은 값을 컴포넌트의 로컬 상태로 설정
• 외부 API 요청
• setInterval, setTimeout
• 라이브러리 사용

컴포넌트 언마운트에 하는 작업들

• setInterval, setTimeout 제거
• 라이브러리 인스턴스 제거

조건부 effect 발생

effect의 기본 동작은 모든 렌더링을 완료하고 effect를 발생시키는 것이다. 이와 같은 방법으로 만약 의존성 중 하나가 변경된다면 effect는 항상 재생성된다.

따라서 아래의 예제는 deps 배열에 넣어 준 props.source가 변경될 때에만 effect가 재생성된다.

useEffect(
  () => {
    const subscription = props.source.subscribe();
    return () => {
      subscription.unsubscribe();
    };
  },
  [props.source],
);

📌 useContext

const value = useContext(MyContext);

React.createContext에서 반환된 값을 받아 그 context의 현재 값을 반환한다. context의 현재 값은 이 hook을 호출하는 컴포넌트에 가장 가까이에 있는 <MyContext.Provider>의 value prop에 의해서 결정된다.

컴포넌트에서 가장 가까운 <MyContext.Provider>가 갱신되면 이 Hook은 그 MyContext provider에게 전달된 가장 최신의 context value를 사용하여 렌더러를 트리거 합니다. 상위 컴포넌트에서 React.memo 또는 shouldComponentUpdate를 사용하더라도 useContext를 사용하고 있는 컴포넌트 자체에서부터 다시 렌더링됩니다.

useContext로 전달한 인자는 context 객체 그 자체이어야 함을 잊지 마세요.

• 맞는 사용: useContext(MyContext)
• 틀린 사용: useContext(MyContext.Consumer)
• 틀린 사용: useContext(MyContext.Provider)

useContext를 호출한 컴포넌트는 context 값이 변경되면 항상 리렌더링 될 것이다. 따라서 메모이제이션을 통해 최적화할 수 있다.

출처

리액트 공식문서