개인 프로젝트 회고 (6일차)

<회고록>

오늘은 Todo-List를 만들면서 겪었던 트러블 슈팅에 대해서 정리하려고 한다. 트러블 슈팅은 신입 개발자로써 성장할 수 있는 아주 좋은 양분이다. 즉 신입 개발자에게 트러블 슈팅이란 우리가 일상적으로 먹는 밥 같은 존재다. 맨날 마주치면서 우리를 성장시켜주는 촉진재인 셈이다. 그래서 오늘은 겪어던 트러블 슈팅들에 대해서 적어볼려고 한다.

 

<트러블 슈팅>

 

1. 문제 상황

 

• 작성 페이지에서 제목과 관련된 인풋 박스를 수정했는데 결과적으로는 모든 InputBox와 Select박스들이 바뀌는 현상을 목격할 수 있었음
• 원인을 분석해보니 props로 넘기는 함수에서 문제가 발생함 함수의 경우 참조 타입으로 안에 내용이 갔다고 해도 메모리에 똑같은 함수가 올라갔을 경우, 이는 shallow equerl 테스트에서 다른 부분으로 판단함

2. 해결 방법

 

• 위 상황으로 봤을 대 함수가 케싱되지 않고 매번 새로 만들어지기에 props로는 매번 새로운 값이 들어가게 됨. 따라서 함수를 캐싱해야 한다는 판단을 내림
• 함수를 캐싱하는 방법으로는 useCallback이라는 훅을 사용함. 이때 처음 화면에 렌더링 되었을 때 함수를 캐싱하고 다음 부터는 캐싱된 함수를 계속 써야 하기에 의존성 배열은 빈 배열로 만듦

3. 결과

 

1. 해결 전

 

2. 해결 후