Effect
Effect는 렌더링이 끝난 뒤 React 바깥 세계와 동기화할 때 쓰는 단계입니다. 네트워크 구독, 타이머, DOM API, 외부 라이브러리 연결처럼 화면 계산만으로 끝나지 않는 작업을 여기서 다룹니다.
▶아키텍처 다이어그램
🔄 프로세스 다이어그램점선 애니메이션은 데이터 또는 요청의 흐름 방향을 나타냅니다
렌더링 함수 안에서 바로 네트워크 요청을 보내거나 타이머를 만들면, 같은 렌더가 반복될 때 작업이 중복되고 화면 계산도 더 이상 순수하지 않게 됩니다. React는 어떤 UI를 그릴지 계산하는 일과, 외부 세계에 영향을 주는 일을 분리하지 않으면 예측 가능한 동작을 유지하기 어렵습니다.
과거 클래스 컴포넌트에서는 componentDidMount, componentDidUpdate, componentWillUnmount처럼 여러 생명주기 메서드에 관련 로직이 흩어지는 경우가 많았습니다. Hook 시대로 넘어오면서 React는 렌더 이후 동기화라는 공통 목적을 useEffect로 모아, 언제 실행되고 언제 정리되는지 한 흐름으로 생각하게 만들었습니다.
컴포넌트가 커밋되면 React는 Effect를 실행합니다. 이때 Effect는 외부 시스템에 연결하거나 데이터를 가져오고, 필요하면 cleanup 함수를 반환해 다음 실행 전이나 언마운트 시점에 정리합니다. 의존성 배열은 어떤 값이 바뀌었을 때 다시 동기화해야 하는지 설명하는 계약입니다.
Effect와 이벤트 핸들러는 둘 다 코드를 실행하지만, 이벤트 핸들러는 사용자의 직접 행동이 출발점이고 Effect는 렌더 결과를 외부 시스템과 맞추는 후처리입니다. 이벤트 안에서 끝낼 수 있는 일인데 굳이 Effect로 옮기면 흐름이 불필요하게 늦어지고 복잡해질 수 있습니다.
실무에서는 Effect를 남용하지 않는 감각이 중요합니다. 값 계산이나 파생 상태처럼 렌더 안에서 끝낼 수 있는 일은 Effect가 아니라 렌더 단계에서 해결하는 편이 맞습니다. 반대로 WebSocket 연결, 스크롤 위치 동기화, 외부 위젯 초기화처럼 React 바깥 자원과 수명을 같이 관리해야 하는 일은 Effect가 자연스럽습니다.