Hooks API Reference

kdo0129·4일 전
0

React

목록 보기
2/3
post-thumbnail

기본 Hook

📌 useState

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

최초 렌더링에서 state => initialState

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

함수적 갱신

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

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

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

지연 초기 state

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

state 갱신의 취소

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

📌 useEffect

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

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

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

effect 정리(clean-up)

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

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

effect 타이밍

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

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

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

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

조건부 effect 발생

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

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

📌 useContext

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 값이 변경되면 항상 리렌더링 될 것이다. 따라서 메모이제이션을 통해 최적화할 수 있다.

출처

리액트 공식문서

profile
프론트엔드 공부

0개의 댓글