[React] 프로젝트 맛보기 - Hello World!

개발 환경

MacbookAir M1

• VSCode
• node js
• yarn (package Manager)

---

프로젝트 생성 

- 프로젝트 이름 : react-study

yarn create react-app react-study

React 프로젝트 생성 중 VSCode terminal

 

- 생성되는 폴더 소개

1.  node_modules:  모듈들을 저장하는 폴더
2.  public: 정적 파일들이 담겨있음 ex) index.html
3.  src: react의 큰 흐름인 index.js, App.js 등의 파일이 존재

App.js 에서 html로 react component를 생성 → 생성한 component를 index.js 에서 불러옴 →  index.html의 document.getElementById("root") 로 접근하여 코드를 넣는 것

• index.js : 만들어진 컴포넌트를 껍데기(index.html)에 넣는 역할
• App.js : 컴포넌트를 하나로 만듦

 

프로젝트 실행

- 생성된 프로젝트 폴더로 이동 후, 프로젝트 실행

cd react-study
yarn start

yarn start 후 브라우저에서 실행되는 화면

 

HelloWorld 출력

1) Hello.jsx  생성

src > New File > Hello.jsx

 

- Hello.jsx

import React from "react"; //React 컴포넌트라서

/* Hello라는 함수형 컴포넌트 생성 */
function Hello(){
    return <div> Hello World!</div>
}
export default Hello;

 

2) App.js  수정

- App.js

import Hello from "./Hello"

function App() {
  return <Hello />;
}

export default App;

 

실행 결과 (Hello World! 출력)

 

+) React 개발에 필요한 extension

1. react developer tools (chrome extension) : 렌더링이 언제, 어떻게 되었는지 확인 가능
2. prettier (vscode extension) : 코드 정리
3. Reactjs code snippets (vscode extension) : 컴포넌트 만드는 툴 명령어로 제공
4. Auto Import - ES6, TS, JSX, TSX (vscode extension) : import 자동으로 해줌