Description

벨로퍼트와 함께하는 모던 리액트 강의 문서의 첫 번째 문서이다. 강의와 함께 제공되는 문서이며 강의는 별도로 수강하지 않고 문서만 읽고 학습했다.

함수형 컴포넌트와 Hooks 위주로 리액트의 기본적인 사용 방법을 배운다.

Review

진행하는 프로젝트에서 함수형 컴포넌트를 사용하기 위해 학습하기 시작했다. 기본적인 것들을 만들기에는 16강까지 학습한 것만으로도 충분했다. 만들면서 전체적인 흐름이나 최적화가 엉망이라고 생각이 들 때쯤 17강부터 나머지를 학습했는데, 내용 자체는 이해하는 데 어려움이 없었지만 그걸 상황에 맞게 적용하는 데는 꽤 고생할 것 같다. 24강부터는 부가적인 내용이라 필요한 것만 선택적으로 적용하면 될 것 같다.

전체적으로 중요한 내용 위주로 확실하고 깔끔하게 다루고 있는 것 같은 점이 가장 좋았다. 대부분 내용을 지금 프로젝트를 만들어가는데 바로 사용해야 해서 더 그렇게 느낀 것 같다. 각 강의의 핵심이 확실하고 그 내용을 예시를 따라서 배워나가기 때문에 기능 자체는 큰 어려움 없이 배울 수 있었던 것 같다. 다만 각 기능을 ‘제대로’ 사용하려면 배운 내용을 기반으로 더 많은 것을 알아봐야 할 것 같다. 댓글에 달린 질의응답과 관련 링크들이 그런 면에서 꽤 도움이 됐다.

개인적으로 강의를 듣지 않으면서 공부했더니 코드의 어떤 부분이 어떻게 변했는지 한눈에 파악하기 힘든 게 조금 아쉬웠다. 댓글을 보면 실습 예제에 조금씩 틀린 부분이 있는 것 같은데 실제로 실습을 진행해보지는 않아서 실제로 문제가 되는 부분이고 수정해야 하는지는 파악하지 못했다.

Progress

  • 기간: 2020.12.30 - 2021.03.29
  1. [X] 2020.12.30 리액트는 어쩌다가 만들어졌을까?
  2. [X] 2020.12.30 작업환경 준비
  3. [X] 2020.12.30 나의 첫번째 리액트 컴포넌트
  4. [X] 2020.12.30 JSX
  5. [X] 2020.12.30 props 를 통해 컴포넌트에게 값 전달하기
  6. [X] 2020.12.30 조건부 렌더링
  7. [X] 2020.12.30 useState 를 통해 컴포넌트에서 바뀌는 값 관리하기
  8. [X] 2020.12.30 input 상태 관리하기
  9. [X] 2020.12.30 여러개의 input 상태 관리하기
  10. [X] 2020.12.30 useRef 로 특정 DOM 선택하기
  11. [X] 2020.12.30 배열 렌더링하기
  12. [X] 2020.12.30 useRef 로 useRef 로 컴포넌트 안의 변수 만들기
  13. [X] 2020.12.30 배열에 항목 추가하기
  14. [X] 2020.12.30 배열에 항목 제거하기
  15. [X] 2020.12.30 배열에 항목 수정하기
  16. [X] 2021.01.01 useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정하기
  17. [X] 2021.01.02 useMemo 를 사용하여 연산한 값 재사용하기
  18. [X] 2021.01.02 useCallback 를 사용하여 함수 재사용하기
  19. [X] 2021.03.03 React.memo 를 사용한 컴포넌트 리렌더링 방지
  20. [X] 2021.03.04 useReducer 를 사용하여 상태 업데이트 로직 분리하기
  21. [X] 2021.03.27 커스텀 Hooks 만들기
  22. [X] 2021.03.28 Context API 를 사용한 전역 값 관리
  23. [X] 2021.03.28 Immer 를 사용한 더 쉬운 불변성 관리
  24. [X] 2021.03.29 클래스형 컴포넌트
  25. [X] 2021.03.29 LifeCycle Method
  26. [X] 2021.03.28 componentDidCatch 로 에러 잡아내기 / Sentry 연동
  27. [X] 2021.03.28 리액트 개발 할 때 사용하면 편리한 도구들 - Prettier, ESLint, Snippet
  28. [X] 2021.03.28 리액트 입문 마무리