- 강의 정보 : https://nomadcoders.co/react-for-beginners
- 작성한 github pages URL : https://bellship24.github.io/lecture-nomadcoder-reactJS-movie-web
이 강의를 통해 대략적으로 배운 것들
- react를 사용해야 하는 이유 (SPA와 Virtual DOM, 컴포넌트 기반 아키텍처, 다양한 에코시스템)
- JSX가 좋은 이유 (html과 비슷한 문법으로 가독성, 생산성 상승)
- React, ReactDOM 라이브러리
- react에서 이벤트 리스너를 사용하는 방법
- 함수형 컴포넌트
- 데이터가 저장되는 state, set함수, 이벤트리스너
- state의 set함수가 배열에 원소를 추가하는 거라면 ... 활용하기
- set함수 사용시 이전값 잘 활용하여 에러 최소화하기
- react JSX에서 map함수를 사용해 태그를 동적으로 렌더링하기
- 삼항연산자 활용하기
- App.js에 다 떄려 넣지 말고 routes, components 폴더를 생성해 분할정복하기
- 커스텀 컴포넌트의 속성 props와 PropTypes로 prop을 정의하기
- state 변화에 따른 리렌더링을 제어하는 memo(rize) 활용하기
- create-react-app으로 리엑트 앱 만들기, 스크립트 활용하기
- react에서 css 활용하는 방법 (
<component name>.module.css와 컴포넌트의 속성ClassName) - useEffect로 코드 실행 제어하기 (useEffect()의 ReactDependencyList 인자, useEffect()의 cleanup)
- js에서 api 호출을 위해 async await을 쓰며 fetch() 함수와 json() 함수도 활용하기
- route = screen = page
- react-router-dom으로 url path에 대해 라우팅 해주기 (Router, Switch, Route, Link)
- dynamic url은 : 로 정의하고 사용 시에 props와 useParams() 활용하기
- github pages에 publish 하기 위해서 gh-pages 사용하기 (build, predeploy, deploy, github repo)
회고
- 기본적인 프론트엔드 구조를 이해하는데 도움이 된 것 같음. 입문하기 좋은 강의라고 생각함.
- 프론트엔드의 속도와 효율에 대한 react의 기본 작동이나 기본 철학을 알게된 것 같음.
- 앞으로 실제 프론트 페이지를 만들어보고 싶음.
- 특히나 컨테이너로 올려서 백엔드와 연동해볼 계획.