React | React 사용하기

1.  리액트 사용할 환경 만들기

pwd
npx create-react-app 파일이름

 

아래처럼 나오면 성공적으로 설치!

 

 

 

npx 를 활용하면 내 PC에 create-react-app 을 다운받지 않고 바로 실행이 가능하게 한다.

create-react-app은 CRA라고도 한다.

 

📌CRA가 필요한 이유?

CRA는 리엑트를 이용해 웹 어플리케이션을 개발하기 위해 필요한 도구들을 모은 툴체인이다.

리액트는 UI를 구축하기 위한 자바스크립트 라이브러리이기 때문에 UI 외 많은 기능들을 위해 다른 패키지들이 필요한데,

필요한 패키지를 다운받고 호환성을 맞추고 환경 설정이 번거롭기 때문에

필요한 도구들을 미리 조합해서 설정한 툴체인을 이용해 프로그래밍 환경을 구축할 수 있다.

 

 

 

 

 

2.  실행되는지 확인하기

ls
//새로운 폴더가 생성된 걸 볼 수 있음

cd 폴더이름
//폴더로 이동하기

npm start

 

아래에 보이는 화면은 정상적을 작동하고 있는거다.

 

 

 

 

 

3.  VS Code 에서 폴더를 열어보기

폴더를 열어보면 

크게 node_modules/ public / src 폴더가 있다.

src 폴더 안에 App.js 가 위의 이미지처럼 리엑트 로고가 돌아가고 있게 하는 파일이다.

App.js 파일처럼 사용하려면 src 폴더 안에 javascript 파일을 만들어주면 된다.

 

 

 

 

 

4.  react-router-dom 설치

리액트는 라이브러리이기 때문에 라우팅 라이브러리를 따로 설치해야 한다.

CRA를 통해서 만든 웹 애플리케이션은 SPA(Single Page Application)로 html 파일이 하나만 존재하기 때문에

하나의 Html에서 경로를 따라 다른 UI를 보여주는 라우팅 기능이 필요하다.

npm install react-router-dom

 

위와 같은 명령어를 설치하면 package.json 파일에 들어가서

"react-router-dom": "^6.9.0",

 

있는지 확인해준다.

npm(node package manager)은 자바스크립트 파일 묶음으로

업데이트하고 삭제할 수 있게 관리를 할 수 있는 엡스토어와 같은 거다.

node_modules에 npm으로 설치한 패키지들이 저장이 된다.

 

 

 

 

 

5.  Router.js 파일 만들어 경로 설정

 

src 폴더 안에 Router.js 파일을 만든다.

 

Router.js 에 들어가 아래와 같이 import 해준다 .

1.리엑트

2.라우팅을 구현하기 위한 BrowserRouter, Routes, Route 

3.화면에 보여줄 페이지 JavaScript 파일

 

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import MyComponent from './해당컴포넌트파일경로'

 

Router이름의 컴포넌트를 만들어 Route 에 path(경로)를 설정하고 element(어떤 컴포넌트 보여줄지) 설정한다.

path에서 / 만 쓰면 default 값으로 지정된다.

그 다음 라우터를 export 해준다.

 

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import 컴포넌트js파일이름 from './컴포넌트js파일경로'

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/컴포넌트경로이름" element={<컴포넌트js파일이름 />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

 

 

 

 

 

6. index.js 렌더링 설정하기

Router 파일을 import 하고 root.render() 로 Router컴포넌트로 렌더링되게 수정한다.

 

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Router />);

 

 

 

 

 

7. 내가 원하는 컴포넌트파일 만들어 보기

src 폴더 안에 파일이름.js 만든 다음 

함수 컴포넌트를 넣고 렌더링을 걸어주면 브라우저 화면이 바뀌지 않는다. 

*여기서 파일이름.js 으로 했지만 함수이름과 같은 이름으로 컴포넌트명을 지어준다.

 

function MyComponent () {
  return 리턴값;
}

 

index.js파일 안에서 파일이름.js를 index.html 에 연결해주지 않았기 때문이다.

파일이름.js 를 먼저 index.js 파일에서 가져다 쓸 수 있도록 먼저 export 해줘야 한다.

아래처럼 하단에 코드를 입력하면  index.js 에서 import 해서 사용할 준비가 된 거다.

 

function MyComponent () {
  return 리턴값;
}

export default MyComponent;

 

index.js 파일로 이동하여 파일이름.js 를 import 한다.

여기서 .js 확장자를 붙이지 않아도 식별이 가능하다.

 

import MyComponent from “./파일이름”;