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.
