[react]Effect Hooks (공식문서 참조)

Kyungoh Kang·2021년 1월 3일
0

wecode15

목록 보기
20/20

Effect Hooks

  1. 함수형 컴포넌트에서 여러가지 side effects 들을 수행하기 위해 effect hook을 사용한다.

    • side effects= 함수의 로컬 상태를 함수 외부에서 변경하는 기능
    • sdie effect의 대표적인 예시로 비동기 처리가 있는데 예를 들어 서버에서 데이터를 받아올 때 컴포넌트의 라이프 사이클 중에 데이터를 받아온다면 서버와 통신하는 시간 등으로 인해 화면이 멈추거나 끊기는 증상이 나타날 수 있다. 이것을 방지하기 위해 컴포넌트 라이프사이클과 관련이 없는 외부에서 비동기로 데이터를 받아와 컴포넌트의 상태를 업데이트시켜 주기 위해 side effect가 필요하다.
  2. effect hook은 함수의 라이프 사이클에는 관여하지 않지만 위치는 함수 내부에 위치한다. 내부에 위치함으로서 state변수에 접근할 수 있게된다.

  3. class형 컴포넌트에서 componentDidMount, componentDidUpdate, componentWillUnmount가 하나로 합쳐진 걸로 생각해도 무방하다.

0개의 댓글