🔵React.js

- 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리

• 페이스북 직원이 만들었음
  • 사용자에게 보여지는 화면을 어떻게 효율적으로 개발을 할지 고민하다가 개발
  • html을 좀더 효율적으로 다루기 위한 것 / 세분화

* 컴포넌트 (사용자 정의 태그)

• 그때그때 필요할 때 갖다 쓰자

• 리액트는 사용자 정의태그(컴포넌트)를 만들기 위한 자바스크립트 라이브러리 이다.

• 사용자 정의 태그 규칙 => 사용자 정의 태그의 이름은 시작이 항상 영어 대문자여야 함

• 함수형 컴포넌트 / 클래스형 컴포넌트
  → 만드는 형식차이지 보여주는건 똑같음
  → 우리는 함수형 컴포넌트를 쓰는데 이 방식이 인터넷에 예시가 많다

* 설치

• npx create-react-app "폴더명"
  → 현재 경로에 react 프로젝트를 깔겠다 / .으로 하면 최종경로에 깔겠다.

• npm start
  → react 실행시키는 명령어

• react는 소문자로만 제목을 해야함

* 구성

• public안에 html
  → react안에 있는 유일한 html
  → index.html 하나로만 함
  ※ 싱글 페이지 어플리케이션 : html 하나로 컴포넌트를 교체하며 화면을 구성하는 방법
  → 좋은 이유 : html 갯수가 줄어들어 사용자가 편하다고 느낌(html이 전환될 때 화면이 깜빡거려 눈이 불편하다고 느낄 수 있다.)

• 보여지는 화면 구성 순서
  app.js -> index.js -> index.html 순

  • index.html에서 index.js를 가지고 오는게 아닌가?
    → index.js에서 index.html을 가지고온다고 생각하면 된다.
    → ReactDOM.createRoot

• 똑같은 js이기 때문에 app2를 app.js에 불러와서 써도 됨
  → 다른 태그를 가지고와서 화면을 구성할 수도 있어서 분할해서 할 수 있음

• compo라고 src 폴더 안에 별도 폴더를 만들어 컴포넌트 관리함

• app.js 파일 return 안에 자연스럽게 html 문법을 쓰고 있음
  => JSX 문법 → js와 html을 확장시킨 문법

* JSX 문법

• js랑 html이랑 한 번에 사용할 수 있도록 만들어짐
  → 분리감이 없어 가독성이 높고 작성하기 쉽다
  → 하지만, 중간 중간 규칙이 있어 헷갈릴 수 있음
  → 그래서 화면을 바꾸려면 app.js의 return문 안의 내용을 바꿔야함
  → 규칙 : 꼭 한 가지 태그로만 묶여있어야함 (빈 태그 가능)

---

⌨️ 2022.10.17. 임승환 선생님 강의