• 개요

▪︎ React

• 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리
• 라이브러리 : 개발자가 필요할 때 직접 불러서 사용
• 프레임워크 : 미리 정해 놓은 뼈대에 개발자가 맞춰서 작성
• 단방향 데이터 흐름 (Top-Down 구조)

▫︎ Node.JS

• 웹 브라우저 밖에서도 자바스크립트를 실행할 수 있게 해주는 실행환경
  • 원래는 웹 브라우저 안에서만 동작
• npm (Node Package Manager) : 자바스크립트 패키지(라이브러리) 를 공유하고 관리하는 도구

▫︎ CRA

• CRA (Create React App) : 리액트 공식 팀이 만든 리액트 프로젝트 초기 설정 도구
  • 공식 지원 종료 (프레임 워크 사용 권장)
  • npx create-react-app 프로젝트 이름
  • npm run start : 임시 개발 서버로 실행

▫︎ Component

• UI를 독립적이고 재사용 가능한 단위로 분리하여 정의한 블록
• Class Component : 컴포넌트를 class로 생성 (현재는 사용X)
• Functional Component : 컴포넌트를 함수로 생성 (표준적인 컴포넌트 생성 방식)
• 컴포넌트가 복잡해지면 src 폴더 하위에 components 폴더 생성하여 분리해서 사용

▫︎ JSX

• JavaScript 확장 문법
• 항상 return 이후에 HTML 작성