발단: state와 연결된 const의 정의

버튼을 통해 토글을 하면 남학생과 여학생의 리스트를 각각 보여주는 React Component를 만들기 위해서 아래와 같이 state와 const를 활용했다.

const [isMale, setIsMale] = useState(true);
const currentStudents = students[isMale ? "male" : "female"];

아래 코드 처럼 SwiftUI에서도 자주 사용하던 패턴이기 때문에 큰 문제가 없을 것이라고 생각했다.

@Published var isMale: Bool = true
var currentStudents: [Student] {
	students[isMale ? "male" : "female"]
}

문제: useEffect의 무한 실행

그리고 그 component의 기능 개발을 한참 하던 중에 currentStudent이 변경되었을 때 필요한 동작을 useEffect로 정의했다.

useEffect(() => {
  console.log("뭔가 무거운 동작 😱")
}, [currentStudents]);

그런데 콘솔을 살펴보니 useEffect가 component가 리랜더될 때마다 실행되고 있었다. (심지어 단순한 스크롤 동작에도!)

원인: const는 리랜더될 때마다 새롭게 할당된다.

const로 변수를 정의하면 react component가 리랜더링될 때마다 다시 할당된다. 따라서 useEffect 입장에서는 dependency에 정의된 값이 계속 변한다고 인식하는 것이다. 따라서 단순한 리랜더에도 useEffect에 정의된 코드가 실행되는 것이다.

해결: state만 dependency에 사용한다

state 값의 경우 리랜더링이 된다고 하더라도 값을 기억하고 동일한 값이면 리랜더를 유발하지 않는다. 따라서 useEffect에는 state를 사용하도록 하자!

useEffect(() => {
  console.log("뭔가 무거운 동작 😱")
}, [isMale]);