[React] - CRA(Create React App) 생성 방법

CRA?

한 줄의 명령어 입력으로 React 프로젝트 개발에 필요한 필수요소를 자동으로 구성하는 방법

• WebPack, bable, eslin 등을 자동으로 설치
• 이렇게 알아서 설치해주는것을 보일러플레이트 라고 칭함

1. CRA로 프로젝트 생성 방법

맥북 ➜ 터미널 ➜ 명령어 입력

ls #현재 내가 위치하고 있는 곳이 어디인지 확인해보세요. 

cd 폴더이름 #리액트 프로젝트를 생성하고 싶은 폴더로 들어갑니다. 

yarn create react-app ./ #프로젝트 생성!


react 파일이 성공적으로 설치되었다면 아래 명령어를 입력해 web 페이지를 띄워준다.

cd 프로젝트명 # 프로젝트명 폴더로 이동
yarn start # 프로젝트 시작

폴더명 변경 방법

1. 폴더명을 변경 한다.
2. package.json파일에 들어가서 "name"을 변경한 폴더명과 일치시켜준다.

node_modules 재설치

npm i

2. 기본 세팅

App.js

import "App.css";

function App() {
    return (
        <div>
            <h1>ReactJS 시작</h1>
        </div>
    );
}

export default App;

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>
    <App />
  </React.StrictMode>
);

• export default안에 함수를 넣어 컴포넌트를 생성하고 싶다면 rfc
• 컴포넌트를 function을 사용하여 생성하고싶다면 rfce

#컴포넌트생성 #코드스니펫

// rfce 코드스니펫을 이용하면 자동으로 컴포넌트 템플릿이 생성 된다.
import React from 'react'

function Child() {
  return (
    <div>Child</div>
  )
}

export default Child

화살표 함수로 컴포넌트를 생성하고 싶다면 rafce

import React from 'react'

const Child = () => {
  return (
    <div>Child</div>
  )
}

export default Child

3. 프로젝트 구조

👉 public > index.html
→ src > index.js
→ src > App.js

결국, 중요한 것은 우리의 플레이그라운드는 App.js

4. 상대경로 import ➜ 절대경로 변경

상대경로를 절대경로로 바꿔주는 방법이다.

상대경로는 './App.js' 처럼 보이는것이 상대경로인데, 'App.js' 만 넣어줘도 작동될 수 있게 절대경로로 세팅을 해줄 수 있다.

1. 루트경로에 새로운 파일을 만들고 jsconfig.json 을 생성한다.
2. jsconfig.json에 아래 코드를 입력하고 저장한다.

{ 
    "compilerOptions": { 
        "baseUrl": "src" 
    }, 
        "include": ["src"] 
}

위 코드는 상대경로 Import ➜ 절대경로로 지정 해주는데, './App.css' 같은 상대경로를 'App.css'로 넣어줘도 작동한다.

 

즉, src 폴더 아래있는 파일을 모두 절대경로로 바꿔준다는 의미이다.

 

리액트 절대경로를 사용하는 자세한 방법은 이곳 에서 할 수 있다.