React useEffect

Hook이란 어떤 것일까?

• 리액트 16.8 버전부터 Hook이 등장하며 상태 관리를 위해 클래스형 컴포넌트를 이용하여 상태 관리를 할 필요성이 없어졌다.
• Hook은 함수형 컴포넌트에서 React state와 life-cycle을 연동할 수 있게 하는 함수이다.
• Hook의 장점은 코드가 간결해져 가독성이 좋고, 클래스형 컴포넌트에서 문제가 되는 HOC헬(추후 조사예정)을 벗어 날 수 있다.
• Hook에는 useState, useEffect 등의 함수가 포함되어 있으며 해당 포스트는 useState에 대해 소개할 것이다.
• class형 컴포넌트와 Hook을 사용한 함수형 컴포넌트에서 각각 상태 관리에 대한 코드 작성을 했을 시 Hook을 사용한 코드가 보다 가독성이 좋음을 확인할 수 있다(출처 : https://studyingych.tistory.com/59).

 

useEffect()란?

• React 컴포넌트가 렌더링 될 때마다 특정 작업(Sied effect)을 실행할 수 있도록 하는 리액트 Hook.
• Side effect는 component가 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과들
• React 컴포넌트는 생명 주기가 있는데 컴포넌트가 실행되거나 업데이트되거나 제거될 때, 특정한 이벤트들이 발생하는 과정이다.
• class 컴포넌트 때는 라이프사이클이 컴포넌트에 중심이 맞춰져 있어서 클래스가 마운트 되려할 때(componentWillMount), 마운트 되고 나서(componentDidMount), 업데이트 되었을 때(componentDidUpdate), 언마운트(componentWillUnmount) 될 때 실행됐다.
• 함수 컴포넌트에서는 특정 데이터에 대해서 라이프사이클이 진행된다. 데이터는 여러 개일 수 있으므로, 클래스 컴포넌트에서는 componentWillMount, componentDidMount, componentDidUpdate, componentWillUnmount를 컴포넌트 당 한 번씩만 사용했다면, useEffect는 데이터의 개수에 따라 여러 번 사용하게 됩니다.

 

 

 

useEffect()의 인자

• 첫 번째 인자 : 함수. 해당 함수 내에서 side effect가 실행된다.

• 해당 함수의 생성 시기는 컴포넌트 생성 후  처음 화면에 렌더링 될 때, 컴포넌트에 새로운 props가 전달되어 렌더링 될 때, 컴포넌트에 state가 바뀌며 렌더링 될 때이다.

• 두 번째 인자 : 종속성 배열

• 해당 배열은 조건을 담고 있으며 boolean형태가 아니라 어떤 값의 목록이 들어간다.
• 해당 값의 변화가 있을 시 useEffect 함수가 실행된다.

 

useEffect()의 실행

• 컴포넌트가 처음 생성되거나, props가 업데이트 되거나, state가 업데이트 될 때 실행

useEffect( () => {
  console.log('컴포넌트가 처음 생성 될 때 실행');
  console.log('props 업데이트 시 실행');
  console.log('state 업데이트 시 실행');
})

• 컴포넌트가 처음 생성될 때만 함수 실행

useEffect( () => {
  console.log('컴포넌트가 처음 생성 될 때 실행');
}, [])

• count가 업데이트 될 때마다 실행

useEffect( () => {
  console.log('count 값 업데이트 될 때마다 실행');
}, [count])

 

 

 

참고 사이트

https://cocoon1787.tistory.com/796

https://www.zerocho.com/category/React/post/579b5ec26958781500ed9955

https://www.zerocho.com/category/React/post/5f9a6ef507be1d0004347305