useEffect Hook

백승용·2021년 4월 8일
0

React

목록 보기
9/14

useEffect Hook

useEffect는 컴포넌트가 마운트 됐을 때(컴포넌트가 처음 렌더됬을 때), 언마운트 됐을 때 (컴포넌트가 사라질 때), 업데이트 됐을 때(특정 props가 바뀔 때) 특정 작업을 처리하는 방법이다.

  • class 생명주기 메서드의 componentDidMount, componentDidUpdate, componentWillUnmount가 합져진 것이다.
  • 두번째 인자가 없을 때는 componentDidMount, componentDidUpdate를 합친 것과 같다
  • componentWillUnmount를 실행해야될 때는 return으로 cleanup 함수를 실행시킨다

두 종류의 side effects

[clean-up을 이용하지 않는 Effects]

  • return 할 필요가 없는 effects
export default function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 브라우저 API를 이용하여 문서 타이틀을 업데이트합니다.
    document.title = `You clicked ${count} times`;
  }); 
  // const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

  • useEffect는 컴포넌트가 렌더링 이후에 어떤 일(effect)을 수행한다
  • 컴포넌트를 렌더링할 때 리액트는 우리가 이용한 effect를 기억하였다가 DOM을 업데이트한 이후에 실행합니다.
  • useEffect를 컴포넌트 안에 넣는 이유는 count state 변수에 접근할 수 있기 때문이다.
  • 위 코드에서 useEffect의 인자값으로 있는 익명함수[() => {document.title = You clicked ${count} times}]를 effect라고 한다.

[clean-up을 이용하는 Effects]

  • 구독이 필요하여 설정 후에 메모리 누수를 막을 수 있는 정리가 필요
  • return이 필요한 경우

deps에 특정 값 넣기

  • useEffect의 두번째 인자에 해당 되며 특정 값을 넣게 된다면, 컴포넌트가 처음 마운트 될 때에도 호출이 되고, 지정한 값이 바뀔 때에도 호출이 된다.
    또한, 언마운트시에도 호출되고, 값이 바뀌기 직전에도 호출된다.

useEffect vs componentDidMount
state와 props를 어떻게 capture하는지가 가장 다른점이다. 비동기 메서드를 사용할 때 확인할 수 있다.

  • 함수형 컴포넌트는 주기적으로 리렌더링된다. dependencies에 []을 추가하면 한번만 렌더된다.
  • 호출되는 시기가 다르다. hooks는 처음 렌더시 state나 props를 capturing한다.

useEffect : useEffect runs after the paint has been committed to the screen as opposed to before. This means you would get a flicker if you needed to read from the DOM, then synchronously set state to make new UI.

참고 사이트1
참고 사이트2

0개의 댓글