바닐라코딩 6주차 정리

강의

이번주의 강의 내용은 주로 리액트의 useCallback, useMemo와 같이 성능 최적화에 관련된 부분이었습니다. 

useCallback
리액트에서 함수형 컴포넌트는 리렌더링이 일어 날때 마다 재실행 됩니다.
함수가 재실행 되면 해당 함수내에서 선언된 함수는 다시 선언되고, "함수 === 참조형" 이므로 만약 하위 컴포넌트에 해당 함수를 prop으로 넘겨주거나 할 경우 해당 하위컴포넌트는 새로운 prop이 들어온것으로 판단해 불필요한 리렌더링이 발생할 수 있습니다. 

이럴 경우 useCallback으로 해당 함수를 감싸주고 디펜던시 리스트를 설정해주면 함수를 무조건 적으로 재생성 하지 않기 때문에 효율적으로 리렌더링을 관리 할 수 있습니다.  

https://reactjs.org/docs/hooks-reference.html#usecallback

Hooks API Reference – React

useMemo
비싼 연산이 필요한 작업의 경우 useMemo를 통해서 디펜던시 리스트가 바뀔때만 재연산을 하게 해주는 것이 좋습니다. 

https://reactjs.org/docs/hooks-reference.html#usememo

Hooks API Reference – React

---

과제

이번주의 과제는 youtube viewer를 완성시키는 것이었습니다. 

완성시킨 유튜브 뷰어!

과제를 진행하면서 새롭게 배운점은 아래와 같습니다. 

1. Styled component 를 사용해도 className은 적절하게 사용하는 것이 좋다. 

코드리뷰어 분께서는 Styled component를 사용할경우 className은 사용할 필요가 없다는 의견이 있었는데 오히려 켄님 께서는 무조건 적으로 클레스네임을 사용하지 않는 것은 반대하셨습니다. 오히려 클래스네임을 사용해도 글로벌 충돌을 피해주니 더 좋은점이 아닌가 라고 말씀해주셨습니다. 

2. Testing library의 경우 Dev dependency로 빼주는 것이 좋다. 

3. Styled component를 통해 글로벌 css style설정이 가능합니다. 

4. prop types 는 구체적으로 제한 시킬 수 있을 경우 그렇게 하는 것이 더 좋습니다. 

---

부족하다고 느낀부분

- 테스트 코드작성이 아직 시간이 많이 걸리고 미숙합니다. 다음주 과제에서도 테스트 코드를 작성해서 더 익숙해지도록 해봅시다. 
- 이번과제에서 에러핸들링을 제대로 처리하지 못했습니다. 사용자 경험의 향상을 위해서라면 에러핸들링은 필수적으로 보완해야합니다.