필터링·정렬·표시 문자열은 props와 state로 계산한다. 별도 state와 Effect가 필요 없다.
코드의 원인을 찾으면 Effect의 자리가 보인다
Effect는 생명 주기 콜백의 대체품이 아니라, 렌더 결과를 React 바깥의 시스템과 동기화하는 탈출구다.
구매 요청·폼 제출처럼 “버튼을 눌렀기 때문”인 작업은 그 이벤트에서 실행한다.
구독·타이머·브라우저 API·네트워크 연결처럼 렌더 뒤 동기화가 필요할 때 사용한다.
현재 props와 state로 외부 연결을 시작한다.
Effect가 읽는 반응형 값이 바뀌면 다시 동기화한다.
다음 setup 전과 unmount 때 이전 연결을 정확히 되돌린다.
대칭성 검사 개발 모드의 추가 setup → cleanup → setup에도 사용자에게 보이는 결과가 같다면 정리 계약이 잘 맞은 것이다.