항해99 부트캠프 WIL(4주차) 회고

이번 부트캠프 4주차에서는 React 숙련주차로 강의를 들으면서 Redux와 Firebase에 대한 개념을 배우고 개인과제와 팀과제를 통해서 익숙해지는 시간을 가졌다. 아직 항해를 시작하고 4주차이긴 하지만 늦은 시간까지 매일 남아서 팀원들과 공부를 하고 과제를 하는 것을 통해 팀으로 함께 늦게까지 무언가를 해나가는 생활에는 어느정도 익숙해진 것 같다.    

▶ 배운점

• React LifeCycle 흐름
• Redux 용어/개념 및 활용
• Firebase 개념 및 활용
• CRUD기능 구현

▶ 느낀점

강의를 듣고 React를 활용해 개인과제를 만들어 가면서 FrontEnd 개발자로 한발짝 더 가까워진 느낌이 들었다. 아직 모르는 것 투성이지만 모르는 것을 알게 되고, 블로그와 깃허브에 데이터가 하나씩 하나씩 쌓여가는 것을 보고 왠지모르는 뿌듯함도 느껴진다.  또, 과제를 하고 블로그를 정리해 가면서, 더 보기 편하고 예쁘게 꾸미고 싶은 마음이 있는걸 보면 역시 나에게는 BackEnd보다는 FrontEnd가 적성에 더 잘 맞는다고 생각하여, 주특기로 React를 선택한 것은 잘한 선택이었다고 생각을 했다.

다음주부터는 드디어 React 심화주차가 시작된다. 또 얼마나 더 어려운 과제가 주어질지 걱정이 되지만, 그만큼 완성했을 때 돌아오는 성취감 또한 클 것이라고 생각하기에, 다음주도 열심히 새로운 팀원들과 함께 달려야겠다. 

▶ 추가사항

◎ React Hook

• Hook이란?

React 버전 16.8부터 React 요소로 새로 추가되었다. Hook을 이용하면 기존 class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 기능을 사용할 수 있다. 기존에 state에 라이프 사이클을 다루기위해서 class를 사용해야만 했지만, Hook을 사용해 class없이 함수만으로 state를 처리할 수 있게 되면서 상대적으로 코드가 더 간결해졌다.

• Hook의 장점
  1. 이전에 작성된 class 바탕의 코드를 모두 바꿀 필요가 없기 때문에, 필요에 따라 사용이 가능하다.
  2. 재사용 가능한 로직의 관리가 쉬워 리액트의 내장 Hook과 사람들이 만든 커스텀 Hook을 '레고처럼' 조립하면서 새로운 Hook을 만들 수가 있다.
  3. Hook을 사용하면 같은 로직을 한곳으로 모을 수 있어서 기존의 Class형 컴포넌트보다 가독성이 좋은 편이다.
• Hook의 단점
  1. 아직 class의 모든 라이프 사이클을 대체 가능하지는 않다. 예로 공식 문서를 보면 getSnapshotBeforeUpdate, getDerivedStateFromError ,componentDidCatch 의 경우에는 아직 미지원하는 기능이기 때문에 class의 혼용이 필수적이다.
  2. Hook의 규칙을 따르기 위해서 추가적인 리소스가 들어가고, 이 코드들이 복잡성을 증가시키게 되는 경우가 있다.
  3. class를 사용하는 경우보다 상대적으로 컴포넌트의 *사이드 이펙트가 무엇인지 명확하게 알기 힘든 때가 있다.(*사이드 이펙트란 - 함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위를 말한다.)
  4. 개인적으로는 ESLint 플러그인의 필요성은 알지만, 이때문에 warning 메시지가 자주 나와서 조금 긴장되었다...

◎ 라이프 사이클 [클래스형 VS 함수형]

React 라이프 사이클

항해99 TIL(20일차) 클래스형 컴포넌트 VS 함수형 컴포넌트