Side Effect | Notion

Side Effect(부수 효과)

함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위를 뜻한다. 예를 들어 함수에서 전역 변수의 값을 변경하거나 혹은 함수 외부에 존재하는 버튼의 텍스트를 변경하거나, 파일을 쓰거나, 쿠키 저장, 네트워크를 통해 데이터를 송신하는 것 등이 있다.
Side Effect는 프로그램을 읽기 어렵게 하고, 실행 상태를 예측하기 어렵게 하며, 개발 비용을 증가시킨다.
Side Effect가 줄어들면 함수의 반환값이 항상 일관되고 예측할 수 있어 프로그램이 쉽고 단순하며 유지보수 하기 쉬워진다.

React에서 Side Effect 처리

function UserProfile({ name }) {
  const message = `${name}님 환영합니다!`;

  // Bad!
  document.title = `${name}의 개인정보`;
  return <div>{message}</div>;
}

function UserProfile({ name }) {
  const message = `${name}님 환영합니다!`;

  //Side-Effect 코드를 UseEffect로 분리
  useEffect(() => {
    document.title = `${name}의 개인정보`; 
  }, [name]);
  return <div>{message}</div>;
}

React에서는 이러한 Side Effect를 useEffect를 통해 분리할 수 있도록 지원한다. name이 바뀔 때만 document.title이 실행된다.
해당 컴포넌트의 렌더링과 관련 없는 로직들을 useEffect에 넣어 처리한다.
useEffect는 우리가 외부 세계와 상호 작용하면서 해당 컴포넌트의 렌더링이나 성능에는 영향을 미치지 않도록 만들어주는 도구이다.

React에서 Side Effect 종류

Synchronized effects
- React와 외부 시스템을 동기화시키기 위해 사용
- ex) 컴포넌트가 마운트될 때 이벤트 리스너를 subscribe하고, 언마운트될 때 unsubscribe해주는 식
- useEffect를 이 용도만으로 사용해야한다(?)
action effects
- 한 번 fire 시키고 잊어버리는 단발성 동작들
- 이러한 action effects는 이벤트 핸들러에서 처리해주는 것이 좋다(onClick, onSubmit 등)

참고자료