React] Hook : useEffect

useEffect

Side-Effect를 처리하기 위한 Hook입니다.

Side-Effect : 함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위로, 렌더링 된 이후 비동기로 처리되어야 하는 부수적인 것들을 지칭

 

uesEffect(() ⇒ { … } ,[deps])

 

• 두 번째 인자인 deps에 state값을 넣고, state값이 변할 때마다 해당 useEffect를 실행.
• 빈 배열로 입력할 경우, 렌더링 후 1번만 실행.
• 종속성 배열을 아예 지정하지 않았을 경우, 리렌더링 될 때마다 실행.

 

useEffect가 실행되는 시점은 렌더링 결과가 DOM에 반영될 때, 컴포넌트가 사라지기 직전 마지막으로 호출됩니다.

2023.06.20 - [Front-End/React] - React 동작 Mount & Rerender

 

(마운트 된 다음 호출되는데, 마운트와 렌더링은 다음 게시글에서 설명)

 

 

---

 

예

 

deps를 빈배열로 넣었을 경우, 이미지와 같이 값이 변하지 않는 것을 확인할 수 있습니다.

의존성 배열에 다른 state를 추가하여 제대로 동작하는지도 테스트해볼 수 있고, 빈배열 또는 인자값 자체를 안 넣었을 때, 리렌더링 될 때마다 useEffect가 동작하는 것도 확인할 수 있습니다.

 

 

---

 

 

주의사항

• useEffect 사용 시, props를 deps에 넣어주고, 부모 컴포넌트에서 state를 변경하게 되면, 리렌더링이 많이 발생하기 때문에 비효율적이므로 주의해야 합니다.

function TodoList({ todos, filter }) {
  const [newTodo, setNewTodo] = useState('');

  // 🔴 Avoid: redundant state and unnecessary Effect
  const [visibleTodos, setVisibleTodos] = useState([]);
  
  useEffect(() => {
    setVisibleTodos(getFilteredTodos(todos, filter));
  }, [todos, filter]);

  // ...
}

 

위와 같이 useEffect에 todos, filter를 넣어주게 되면 부모 컴포넌트가 리렌더링 될 때, props값이 바뀌게 될 것이고,

그러면 자식 컴포넌트인 Todolist는 본인 의지와 상관없이 다시 한번 리렌더링 되고, useEffect가 실행될 것입니다.

추가로 useEffect에서 state가 바뀐것을 인지했기 때문에 자식 컴포넌트는 한번 더 리렌더링 하게 됩니다.

 

그러면 불필요한 리렌더링이 자식컴포넌트에서 많이 발생하게 되기 때문에 아래와 같이 사용하는 게 좋습니다.

function TodoList({ todos, filter }) {
  const [newTodo, setNewTodo] = useState('');
  
  // ✅ This is fine if getFilteredTodos() is not slow.
  const visibleTodos = getFilteredTodos(todos, filter);
  
  // useMemo를 사용하여 최적화 가능
  const visibleTodos = useMemo(() => getFilteredTodos(todos, filter), [todos, filter]);
  // ...
}

 

visibleTodo가 state값에서 지역변수로 바뀌었는데, 어차피 화면이 리렌더링 될 때마다 getFilteredTodos가 실행될 것이고, 제일 최신 데이터로 리턴하게 될 것이다.

리렌더링 될 때마다 실행되는 게 성능상 문제가 될 수 있다면, useMemo를 사용하여 todos나 filter가 변할 때마다 실행하는 것도 좋은 방법입니다.

(useMemo는 다음 게시글에...)

 

• 컴포넌트 내부에 컴포넌트를 만들어서 사용하는 것도 방법입니다.

export default function ProfilePage({ userId }) {
  const [comment, setComment] = useState('');

  // 🔴 Avoid: Resetting state on prop change in an Effect
  useEffect(() => {
    setComment('');
  }, [userId]);
  // ...
}

 

문제점은 위와 비슷하게 userId에 따라 불필요한 리렌더링이 여러 번 발생하게 됩니다.

export default function ProfilePage({ userId }) {
  return (
    <Profile
      userId={userId} 
      key={userId}
    />
  );
}

function Profile({ userId }) {
  // ✅ This and any other state below will reset on key change automatically
  const [comment, setComment] = useState('');
  // ...
}

 

Profile컴포넌트를 내부에 새로 만들어서 comment를 초기화시켜줌으로써, 리렌더링을 막을 수 있습니다.

(userId에 따라 Profile 컴포넌트가 다르기 때문...)

 

 

---

 

 

useEffect는 가장 많이 사용되는 hook 중 하나입니다.
간단하게 생각해서는 useEffect랑 useState만 잘 사용해도, 기본적인 페이지들은 충분히 만들 수 있을 거로 보입니다.