[React] 리엑트 설치하기

 

---

알고있으면 좋은 React Tip✨

---

리엑트(React) 개요 

• 데이터 변경이 잦은 복잡하고, 규모가 큰 라이브러리에 적합하다.
• 사용자와 상호 작용이 가능한 동적 UI 제작 가능하다.
• 전체적인 틀이 아닌 하나의 기능만을 도구처럼 제공하며, 필요한 도구(라이브러리)를 가져와서 사용한다.
• 리엑트는 ui를 만드는 기능만을 제공하기 때문에 라이브러리라고 할 수 있다.

 

리엑트(React) 설치 및 세팅

• 기본적으로 node.js를 설치해야 한다.
• 공식 사이트 : https://nodejs.org/en

 

(1) Create React App 을 이용해서 React 설치

• React 앱을 만들 폴더를 생성한다.
• npx create-react-app ./  또는 npx create-react-app 폴더명
• 이때 폴더명은 대문자 사용 불가하기 때문에 대문자 대신 대시(-) 사용해서 정의해야 한다.

React 설치 방법 예시
1.폴더 생성(example)
2.터미널에서 폴더 생성 후 경로 접속 (cd example)
4.npx create-react-app 231012-init
5.터미널 이동(cd react -> cd 231012-init) 이동
6.npm start

 

(2) Create React App으로 실행된 기본구조

• node_modules  : React에 필요한 모듈들이 npm 명령어로 설치되어 저장된다.
• Package.json : 프로젝트에 설치된 모듈들 버전과 이름들이 작성되어 있다.

 

(3) src/index.js (최초 진입 시 불려지는 파일) 확인해보기

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // React.StrictMode를 제거하고 빈 태그를 사용해도 된다.
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

• root.render(컴포넌트, 위치) : 첫 번째 인자에는 일반적인 HTML의 태그처럼 생긴 Component 들을 ‘root’라는 id를 가진 element에 띄워 달라는 의미이다.
• React.StrictMode : StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구이다.