# react 설치
npx create-react-app ./

아래와 같은 오류가 발생

# 경고문에서 나온 npm 버전 업데이트 명령 사용
npm install -g [email protected]

• 그 후 맨 처음 react 설치 명령을 실행하여 주니 아래와 같은 파일들이 생성

<aside> 💡 아래의 파일 경로중 src라는 곳에 JS파일과 CSS를 넣으면 됨

이외의 폴더에 넣는 것은 웹팩에 의해서 처리되지 않음

</aside>

• 아래와 같은 파일 구조들을 형성
• 이름이 수정되면 안되는 파일들 존재

src

Package.json 파일

index.html

<aside> ✅ SPA (Single Page Application)

• 현재 App.js 파일의 소스 코드를 변경하면 변경한 부분이 화면에 적용

• public/index.html : HTML Templete 파일, div element의 id root로 설정해 놓음

• index.html : <div id = “root”> →

  index.js : const root = ReactDOM.createRoot(document.getElementById(’root’))

  

  index.js 에 html에서 생성한 root 정보를 전달해줌

• 최근에는 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현

  • SPA ↔ MPA(Multi Page Application) html을 2개 이상 만들어 정적으로 페이지를 만드는 방법

• SPA 화면 변경

  • 페이지 전환(브라우징 방법)
    • HTML 5의 History API를 이용해서 현재 페이지 내에서 화면 이동이 일어난 것처럼 작동하게 해줌

  

<aside> ✅ History API

• 자바 스크립트 영역에서 History API를 이용해서 현재 페이지 내에서 화면 이동이 일어난 것처럼 작동
• METHOD

</aside>

</aside>

<aside> ✅ JSX

• 자바 스크립트의 확장 문법, react에서는 JSX를 이용해서 화면에서 보이는 UI가 보이는 모습을 나타내줌

• JSX를 이용하면 UI를 나타낼 때 자바스크립트와 HTML 구조를 같이 사용할 수 있기 때문에 기본 UI에 데이터가 변하는 것들이나 이벤트들이 처리되는 부분을 더욱 쉽게 구현 가능

• 바벨이 자동적으로 변환해줌으로 인해 아래의 방식을 직접 해줄 필요가 없다.

  • createElement를 사용할 필요 없음

• JSX를 사용하면서 지켜야 할 문법

  • 컴포넌트에 여러 엘리먼트 요소가 있다면 반드시 부모 요소 하나로 감싸줘야 함

  

• JSX없이 react에서 원래 화면을 그리는 방식

  • React.createElement API를 사용해서 엘리먼트를 생성한 후 이 엘리먼트를 In-Memory에 저장, 그리고 ReactDOM.render 함수를 사용해서 실제 웹 브라우저에 그려주는 방식을 사용하였다.

  

</aside>

<aside> ✅ component 생성

• src 폴더에 자바 스크립트 파일 생성

  • (컴포넌트명).js

• component를 다른 파일에서도 사용 가능 하게 할 수 있음

  • expert class (클래스명)
  • expert class board extends Component {} </aside>

• 다른 소스 파일 import 시키기