[React] 스터디 1주차

상반기에는 이 강좌로 공부해 보려고 한다. 기초부터 잘 알려주시는 듯.
🔗<코딩앙마 - React js 강좌>

이번 주의 스터디 내용

• 개발환경 세팅
• create-react-app
• 기초 개념

이 강의에서는

• 컴포넌트 작성
• JSX
• create-react-app 을 이용한 앱 개발
• React Hook
  • useState
  • useEffect
• CRUD 구현
  • JSON-server 띄우기
  • REST API
    • POST
    • PUT
    • DELETE

에 대해 배울 수 있다.

create-react-app

cmd를 열어 리액트 프로젝트를 생성해 보자.
npx create-react-app 파일명 명령어를 통해 생성 가능하다.
어쩌구저쩌구 뭐 물어보는데 그냥 Y 누르면 죽죽 잘 설치된다.

이제 해피 코딩 하면 됨. 해피해피해피~

create-react-app 을 통해 생성된 폴더를 열어보면, 위와 같이 정리가 되어있는 모습을 볼 수 있다.

npm start

터미널을 열고 npm start 명령어를 치면 사이트가 열린다.

• 코드를 수정하고 저장하면 사이트에 즉시 반영되는데, 이 역시도 create-react-app이 자동으로 해 주는 기능.

node_modules

• 해당 프로젝트를 실행할 때 사용되는 dependencies 모듈들이 모두 모여있다. (package.json에 들어가서 확인해 볼 수 있다.)
• node_modules 폴더를 지우면 프로젝트를 띄울 수 없다. 하지만 npm install 을 통해 다시 만들 수 있음. package.json만 수정하지 않는다면.
• 크기가 너무 크기 때문에 git에는 올리지 않는다.
• 그래도 package.json을 통해 다른 개발자가 같은 환경 구축 가능함.

JSX

• html처럼 생겼지만 JS를 확장한 문법이다. React에서 UI를 표현하기 위해 사용된다.
  🔗JSX란 - 리액트 공식 문서

컴포넌트

• React로 만들어진 프로젝트는 수많은 컴포넌트들이 퍼즐처럼 짜맞추어져 있다.
• 비슷한 기능과 모양을 한 컴포넌트는 스타일만 수정해서 재사용이 가능하다.
• 유지보수에 뛰어남.
  
  네이버로 예시를 들자면... 이런 느낌.

---

이번 주의 느낀 점

• 앵귤러 할 땐 '뭔말인지모르게떠염' 상태였는데 확실히 객지프 듣고 하니까 그런가 객체 관련 설명이 더 잘 들어오긴 한다... 신기...
• 초반 커리큘럼을 조금 더 빡빡하게 수정해도 될 것 같다.