useEffect, React-Hooks(2)

useState, useEffect, useReducer

Hook은 함수 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수다.

• useState : state의 상태를 관리하는 Hook
• useEffect : 렌더링 직후 작업 설정하는 Hook
• useReducer : useState처럼 state를 관리, 업데이트 할 수 있는 Hook

 

8-2 useEffect

기본형태 : useEffect( function, deps )

• function : 수행하고자 하는 작업
• deps(의존배열) : 배열 형태이며, 배열 안에는 검사하고자 하는 특정값 or 빈배열이 들어간다

1. 마운트 될 때만 실행하고 싶을 때
= 컴포넌트가 처음 나타날 때만 실행하고 싶을 때
함수의 두 번째 파라미터(deps)로 비어 있는 배열을 넣어주면 된다.

  useEffect(()=>{
    console.log('마운트 될 때만 실행된다')
  },[])

 

2. 배열을 생략한다면 리렌더링 될 때마다 실행된다

  useEffect(()=>{
    console.log('리렌더링 될 때마다실행')
  })

 

3. 특정값이 업데이트 될 때만 실행하고 싶을 때
useEffect의 두 번째 파라미터로 전달되는 배열 안에 검사하고 싶은 값을 넣어주면 된다

  useEffect(()=>{
    console.log('마운트 될 때만 실행된다')
  },[name])

 

4. 뒷정리하기

useEffect는 기본적으로 렌더링 되고 난 직후마다 실행되며,
두 번째 파라미터 배열에 무엇을 넣는지에 따라 실행되는 조건이 달라진다
컴포넌트가 언마운트 되기 전, 업데이트 전 useEffect의 cleanup함수를 반환해 주어야 한다

• 언마운트 될 때 cleanup함수를 실행하고 싶을 때
  : 두 번째 파라미터로 빈 배열을 넣는다
• 특정값이 업데이트 되기 직전에 cleanup함수를 실행하고 싶을 때
  : deps배열 안에 검사하고 싶은 값을 넣는다

  useEffect(()=>{
    console.log('effect')
    return ()=>{
      console.log('cleanup,unmount')
    }
  },[])

 

 

 

더 읽을거리

https://overreacted.io/ko/a-complete-guide-to-useeffect/