[React/개인과제2/TroubleShooting] 메모이제이션, 아무 때나 하면 안 된다!

1. 문제 발생

과제가 얼추 마무리가 됐고, 제출 전에 리팩토링 할만한 게 있을지 찾아볼까?

최적화를 먼저 해보자.

 

보이나요..?

포켓몬을 추가, 삭제하면 나만의 포켓몬에는 포켓몬이 들어왔다 나가니까 당연히 리렌더링이 일어나는 것은 알겠는데,

하단에 있는 포켓몬 리스트 너는 왜....?

---

2. 원인 추론

(정말 허접하지만 이해를 돕기 위해 급하게 그려온..😅)

 

현재 pokemonSlice에서 관리하고 있는 state는 빈배열 하나.

reducer로는 추가, 삭제 기능을 하는 함수 2개.

 

<PokemonList /> 내부에서 pokemonStore의 state를 가져다 쓰는 부분은

추가 버튼 클릭 시 동작하는 handleAddPokemon 함수 내부에서 포켓몬 중복 검사를 할 때뿐.

 

심지어 부모 컴포넌트인 <My PokemonBook />으로 받는 props도 없다.

그런데 왜 PokemonList가 다시 그려질까...

컴포넌트가 작동될 때 어떻게 DOM이 그려지는지 과정을 하나하나 따라가다가 깨달음을 얻었다.

 

pokemonList가 handleAddPokemon 내부에 있고,

handleAddPokemon이 실행된 것이 아니니까 pokemonList랑은 상관이 없을 거라고 생각했는데

문뜩 떠오른 진리, 해당 slice를 구독하고 있는 컴포넌트는 해당 slice의 state가 바뀌면 리렌더링 한다!

그 제일 기본이 되는 사실을 잠시 까먹고 있었다..🫣

 

다시 정리하자면

1. handleAddPokemon() -> dispatch로 targetPokemon 전달
2. reducer 함수에서 targetPokemon을 받아 기존 state에 추가하여 state 값을 업데이트함
3. 새로 업데이트된 state 값이 store에 저장됨
4. store를 구독하고 있던 <Dashboard / >, <PokemonList /> 모두 리렌더링 됨
5. <PokemonList />의 자식 컴포넌트인 <PokemonCard /> 역시 리렌더링 됨

---

3. 해결 과정

<PokemonList />는 pokemonSlice를 구독하고 있기 때문에, 렌더링을 방지하는 것이 어렵다면

<PokemonCard />라도 React.memo로 메모이제이션 하면 되지 않을까? 🤔 -> 여전히 리렌더링 됨.

 

 

<PokemonCard />는 pokemonSlice를 구독하고 있지 않다.

결국 해당 컴포넌트가 리렌더링 된다는 건 부모 컴포넌트로부터 넘겨받은 props가 바뀌었다는 것인데

props로 넘겨 받은 3개 중에 key, data는 <PokemonCard />에 메모이제이션 된 값과 달라지지 않았다면

메모이제이션 된 값을 사용하여 리렌더링이 발생하지 않는다.

하지만 handleAddPokemon은 pokemonSlice의 state가 업데이트 될 때마다 새로운 메모리 주소에 저장이 되어서 

<PokemonCard />는 값이 달라졌다고 인지하게 된다.

 이런 과정 때문에 메모이제이션을 했음에도 불구하고 리렌더링이 발생하는 것이다.

 

그럼 handleAddPokemon 함수 자체를 메모이제이션 하면 되겠다! 😃  -> handleAddPokemon를 useCallback()으로 감싸줌

 

 

이제 <PokemonCard />가 렌더링 되지 않는다!

 

그런데.. 끝날 때까지 끝난 게 아니쥬? ^^

 

 

ESLint 오류 발생 🥶

useCallback의 의존성 배열에는 useCallback로 전달되는 콜백함수에 영향을 미칠 수 있는 값들을 넣어줘야 한다.

 

무슨 말이냐 하면,

사실 위에 첨부한 동영상도 정상적인 동작은 아닌 것이... 

 

렌더링이 다시 되지는 않지만 이미 나의 포켓몬에 추가되어 있는 포켓몬은 추가할 수 없다는 경고 alert가 떠야 하는데

그냥 추가가 되어버린다.

왜냐하면 useCallback의 의존성 배열에 pokemonList(store의 state)가 빠졌기 때문이다.

 

handleAddPokemon 함수가 선언될 당시의 pokemonList 값을 기억하기 때문에

새롭게 바뀐 현재의 값을 가져오지 못하는 것이다.😰

 

그렇다고 useCallback의 의존성 배열에 pokemonList를 넣어주기엔

<PokemonList />의 리렌더링을 일으키는 트리거가 어차피 pokemonList 하나이기 때문에

리렌더링이 발생하면 useCallback은 자연스럽게 다른 메모리 주소에 할당 되어 메모이제이션을 하는 의미가 없어져버린다.

 

<PokeCard /> 역시 전달받는 handleAddPokemon의 값이 (정확히는 할당된 메모리 주소가) 렌더링마다 변하기 때문에,

메모이제이션도 큰 의미가 없다.

 

그래서 최종 결론은!! 현재의 구조에서는 리렌더링이 일어나는 것이 자연스러운 흐름이다. 라고 말할 수 있겠다.

해결방안 이랬는데 해결을 못 함ㅋ..

---

4. 결과

결과는 한 줄로 요약해서 현 상 유 지 !

 

항상 어떻게 하면 좀 더 나은 UX를 제공할까를 고민하면서 코드를 작성하는 습관을 가지려고 노력하고 있다.

이번에도 렌더링을 최소화해서 좀 더 좋은 UX를 구현하자라는 생각으로 시도해 보았는데,

어떤 경우에서는 자연스러운 렌더링을 억지로 막는 것이 꼭 최선의 방법은 아니라는 생각이 들었다.

 

어떻게 보면 TroubleShooting이라기보다는 약간의 삽질(?)이라고 할 수도 있겠지만

이렇게 쭉 과정을 써 내려가며 한 번 더 리렌더링에 대해 정리하고자 글을 써봤다.

 

결론이 현상유지지만 많이 배울 수 있는 시간이었다!