React - 프로젝트 시작하기 (터미널명령어) & 컴포넌트 생성 및 작성

 

터미널 명령어

 

1. yarn으로 react-app 생성하기

프로젝트 폴더를 만들고자 하는 위치로 디렉토리를 설정하고 아래 명령어를 입력한다.

>> yarn create react-app 프로젝트폴더명

 

2. 폴더를 통째로 복사하기

templete 폴더를 habit-tracker 로 복사한다.

>> cp -R templete habit-tracker

 

2. 코드 열기 (편집기로)

코드를 열기를 원하는 프로젝트 폴더로 디렉토리를 설정하고 아래 명령어를 입력한다.

>> code .

 

---

 

리액트 기본 폴더 구조

public 폴더 : 정적인 파일, static한 것들

src 폴더 : 동적 파일 (자바스크립트 코드), dynamic한 것들

 

* 웹팩에서는 빌드할때마다 자바스크립트의 유니크한 고유의 버전이 할당 된다.

그래서 사용자가 이미 우리의 웹어플리케이션을 다운로드 받았다면,

자바스크립트가 변경되지 않았다면 예전에 했었던 그 고유한 번호가 할당이 되기 때문에 

그런 아이들은 캐쉬가 되어 있어서 새로 다운로드를 받지 않아도 된다.

 

 

 

---

 

.jsx 확장자

기본 자바스크립트 로직을 가진 파일과 구분하기 위해 리액트 컴포넌트에는 .jsx 확장자를 사용한다.

자바스크립트 로직을 가진 파일은 .js 확장자를 사용한다.

 

 

 

---

 

index.js

아래와 같은 코드를 가진 index.js는 엄밀히 따지면 컴포넌트가 아니라 자바스크립트이다.

단순히 연결해주는 역할만 한다.

 

바벨을 이용해 컴포넌트를 순수 자바스크립트로 변환해주고  

react-dom 이라는 라이브러리가 html과 연결해주는 역할을 한다.

사용자에게 궁극적으로 배포되어지는 것은 index.html인데,

react-dom이라는 클래스에 있는 렌더함수를 이용해서 index.html에 있는 id가 root인 태그안에 App이라는 컴포넌트를 연결한다.

컴포넌트를 연결해 주는 것이 리액트돔!!

 

 

//index.js 코드

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './app';

 

ReactDOM.render(

<React.StrictMode>   // 생략가능

<App />

</React.StrictMode>,

document.getElementById('root')

);

 

 

---

 

컴포넌트 생성하기

scr 폴더 아래 하위폴더 components 를 생성하고 그 안에 컴포넌트 파일들을 생성한다. (.jsx)

VScode에서 Reactjs code snippets 익스텐션을 설치한 후, 

클래스 컴포넌트의 경우 rcc 를 쓰고 탭을 누르면 기본적인 컴포넌트 골격이 작성됨.

함수 컴포넌트는 rsi

 

 

 

yarn으로 fontawesome 프리버전 다운로드

터미널 명령어

>> yarn add @fortawesome/fontawesome-free

index.js에 아래 코드 추가

>> import '@fortawesome/fontawesome-free/js/all.js';

 

 

 

주의할 점

1. 클래스 컴포넌트 작성 시, 클래스 이름은 대문자로 시작하고, 파일명은 소문자로 시작한다.

예)

//habitAddForm.jsx

class HabitAddForm extends Component {

....

}

export default HabitAddForm;