useEffect를 사용해 마운트/ 언마운트/ 업데이트 시 할 작업 설정하기

useEffect를 사용해 마운트/ 언마운트/ 업데이트 시 할 작업 설정하기

useEffect라는 Hook을 사용해 컴포넌트가 마운트 됐을 때(처음 나타났을 때), 언마운트 됐을 때(사라질 때), 그리고 업데이트 될 때(특정 props 가 바뀔 때) 특정 작업을 처리하는 방법에 대해 알아보려 한다. 

마운트 / 언마운트

우선. 마운트 / 언마운트 관리를 하려 한다. 

UserList.js

function User({ user, onRemove, onToggle }) {
  useEffect(() => {
    console.log('컴포넌트가 화면에 나타남');
    return () => {
      console.log('컴포넌트가 화면에서 사라짐');
    };
  }, []);

 

이렇게 해주면 콘솔에서 삭제나 등록을 했을 때 

컴포넌트가 화면에서 나타남의 문구 or 컴포넌트가 화면에서 사라짐의 문구를 볼 수 있다. 

 

deps 에 특정 값 넣기

useEffect(() => {
  // effect 실행 코드
}, [deps]);

 

 

deps에 특정 값을 넣으면 컴포넌트가 처음 마운트 될 때에도 호출이 되고, 지정한 값이 바뀔 때에도 호출이 된다. 

그리고 deps안에 특정 값이 있다면 언마운트시에도 호출이 되고. 값이 바뀌기 직전에도 호출이 된다. 

(new !!!) UserList.js

function User({ user, onRemove, onToggle }) {
  useEffect(() => {
    console.log('user 값이 설정됨');
    console.log(user);
    return () => {
      console.log('user 가 바뀌기 전..');
      console.log(user);
    };
  }, [user]);

 

 

 

useEffect 안에서 사용하는 상태나, props가 있다면 useEffect의 deps에 넣어주어야 한다.

그렇게 하는게 규칙이라고 한다. 

 

만약 deps에 넣지 않게 된다면 useEffect에 등록한 함수가 실행 될 때 최신. props 상태를 가르키지 않게 된다. 

 

deps 파라미터를 생략하기

deps 파라미터를 생략한다면, 컴포넌트가 리렌더링 될 때마다 호출이 된다.

function User({ user, onRemove, onToggle }) {
  useEffect(() => {
    console.log(user);
  });

 

참고로 리액트 컴포넌트는 기본적으로 부모 컴포넌트가 리렌더링되면 자식 컴포넌트 또한 리렌더링이 된다. 

 

 

deps 파라미터의 역할 정리

 

useEffect는 기본적으로 컴포넌트가 처음 렌더링된 이후, 그리고 지정된 의존성 배열에 있는 값이 바뀔 때마다 실행된다.

 

• 빈 배열 [ ]: useEffect가 컴포넌트가 처음 마운트될 때만 한 번 실행된다. 이후 해당 컴포넌트가 리렌더링되더라도 다시 실행되지 않는다. 
• 배열에 특정 상태나 props를 포함한 경우: 배열에 포함된 상태나 props가 변경될 때마다 useEffect가 실행된다. 예를 들어 [props.someValue]라면 someValue가 변경될 때마다 useEffect가 실행됩니다.
• deps를 생략한 경우: 의존성 배열을 아예 생략하면 ,이 경우 useEffect는 컴포넌트가 리렌더링될 때마다 무조건 실행된다.