바닐라코딩 5주차 정리

강의

이번주부터 3주간 front-end 주간으로 리액트를 학습하게 됩니다. 

리액트란?

자바스크립트를 통해 UI를 선언적(Declarative) 으로 그려나갈 수 있는 라이브러리입니다.

여기서 선언적으로 UI를 그린다는게 무엇을 의미하는지 한번 생각해보고 가봅시다.

일반적으로 자바스크립트를 통해 UI를 그리려면(조작하려면) 아래와 같은 과정을 거치지 않을까 싶습니다.
1. createElement로 필요한 DOM 엘리먼트 생성하기 
2. 해당 엘리먼트에 addEventListener 붙이기. 
3. 해당 엘리먼트가 들어가야할 위치에 appendChild 등을 통해 DOM 트리에 붙이기.

위와 같이 모든 단계를 일일히 절차적으로 거치는 것을  imperative(절차적/명령형)라고 합니다.

리액트의 경우는 다릅니다. 

UI에 완성되어 그려지길 원하는 마지막 상태를 리액트에게 알려주면 리액트가 알아서 virtualDOM과 실제 DOM 을 비교해서 그려져야하는 상태를 완성 시켜 줍니다(= 실제DOM을 업데이트 한다.).

https://ko.reactjs.org/docs/reconciliation.html

재조정 (Reconciliation) – React

https://dev.to/iamusj/what-is-the-virtual-dom-2e0a

---

과제

이번주의 과제는 github battle 앱을 완성시키는 것이었습니다. 이번과제에서 처음으로 리액트의 테스트코드를 작성해봤는데 처음이라 많이 어려웠습니다. 일단 jest, react-test-library가 무엇인지 이번에 처음 알게 되었고 무엇을 테스트 해야할지도 애매했기 때문입니다. 

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

1. prop네이밍
- prop의 경우 컴포넌트의 재사용성을 보장할 수 있도록 어느정도 general 하게 지어줘야합니다. 너무 구체적일경우 다른곳에서 해당 컴포넌트를 재사용하기 어려워질 수 있습니다. 

2.중요정보는 환경변수를 통해 감출것. 

3. 컴포넌트가 리렌더링마다 실행되는 로직이 있다면 useMemo나 useCallback으로 감쌀것.

---

부족하다고 느낀부분

아직 prop과 state 네이밍에서 고심을 한 흔적이 잘 느껴지지 않는것 같습니다. 
useEffect를 사이드이펙트 처리가 아니라 일반적인 상태 업데이트를 위해 불필요하게 남발한 경우가 보입니다.  -> side이펙트는 UI를 그리는 로직과 관련없는 부수효과를 처리하는 용도이기때문에 일반적인 상태업데이트를 위해서 남발하면 안됩니다. 
Prop types 를 사용해서 prop 의 type을 지정해주도록 합시다.