1. React 프로젝트 만들기

NVM으로 노드 설치하기

• NVM(Node Version Manager)

(1) nvm 설치 확인

nvm --version

(2) nvm으로 노드 설치

nvm install [설치 버전]

• 노드 공식 사이트에서 최신 버전 참고하여 설치

(3) 설치 확인

nvm ls  # 설치한 노드 버전 리스트 확인 명령어
node -v # 노드 버전 확인 명령어

• nvm에서 사용 중인 노드 버전 바꾸기

nvm use [사용할 노드 버전]

NPM으로 yarn 설치하기

• NPM(Node Package Manager)
• 노드를 설치하면 함께 설치되는 패키지

npm install -g yarn

# npm install [옵션] [설치할 패키지 이름]
# -g 옵션은 컴퓨터 전체에서 쓸 수 있게 한다는 뜻

• 버전을 통해 설치 확인하기

yarn -v

yarn으로 CRA 설치하기

• CRA(Create React App)
• 웹사이트를 만들 때 필요한 것을 모두 포함한 패키지

(1) yarn으로 CRA 설치

yarn add global create-react-app

# yarn add [옵션] [설치할 패키지 이름]
# global은 전역에 패키지를 설치하겠다는 뜻

(2) CRA로 리액트 프로젝트 만들기

• 리액트에서는 프로젝트를 앱이라고 지칭
• 프로젝트가 생성되면 기존 폴더 아래에 [프로젝트 이름]의 새 폴더가 생성된다

yarn create react-app [프로젝트 이름]

(3) 리액트 실행하기

cd [프로젝트 폴더명]
yarn start 

# [Ctrl + C]를 눌러 종료

2. JSX 사용하기

(1) JSX 란?

• 리액트에는 딱 하나의 html 파일만 존재한다. (public > index.html)
• HTML을 품은 JS === JSX
• 자바스크립트 안에서 html 태그같은 마크업을 넣어 뷰 작업을 진행한다.

(2) JSX 사용법

• JSX 규칙

1. 태그는 꼭 닫아주기
2. 무조건 1개의 엘리먼트 반환하기
3. JS값을 중괄호를 통해 가져오기
4. class 대신 className 사용하기
5. 인라인으로 style 주기

3. Component 이해하기

(1) Component 란?

• Component는 웹사이트의 조각이고, 이 조각을 모아서 웹사이트에 뿌려준다.
• 리액트를 잘 쓰기 위해서는 웹사이트를 잘 조각낼 줄 알아야 한다.

(2) State와 Props

• 컴포넌트에서는 state와 props로 데이터를 관리한다.

1. State

   • 컴포넌트가 가지고 있는 데이터
   • 생성, 수정이 오직 해당 컴포넌트 내에서만 이루어짐

2. Props

   • 컴포넌트가 부모 컴포넌트로부터 받아온 데이터
   • 직접 데이터를 추가 및 삭제할 수 없음

(3) 함수형 컴포넌트 & 클래스형 컴포넌트

• 컴포넌트는 클래스형과 함수형이 있다.

1. 함수형 컴포넌트

[Sample.js]

import React from 'react';

// () 안에는 부모 컴포넌트에서 받아온 props를 넣어준다.

// 함수형 컴포넌트 방식 1
// function Bucketlist(props){
//     return (
//         <div>버킷 리스트</div>
//     );
// }

// 함수형 컴포넌트 방식 2 (화살표 함수)
const Sample = (props) => {

    return (
        <div>
            샘플 코드
        </div>
    );
}

export default Sample;

[App.js]

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Sample from './Sample';

function App() {

  return (
    <div className="App">
      <h1>샘플 코드입니다.</h1>
      {/* 컴포넌트를 넣어줍니다. */}
      <Sample/>
    </div>
  );
}

export default App;

2. 클래스형 컴포넌트

• 클래스형 컴포넌트에는 state가 존재한다.

[App.js]

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Sample from './Sample';

class App extends React.Component {

  constructor(props){
    super(props);
    // App 컴포넌트의 state를 정의해줍니다.
    this.state = {
      list: ['1', '2', '3'],
    };
  }

  // 랜더 함수 안에 리액트 엘리먼트를 넣어줍니다!
  render() {
      return (
      <div className="App">
        <h1>샘플 코드입니다.</h1>
      {/* 컴포넌트를 넣어줍니다. */}
      <Sample/>
      </div>
    );
  }
}

export default App;

(4) 컴포넌트 전달하기

• App 컴포넌트에서 Sample 컴포넌트로 state를 넘겨줄 때는 this 키워드를 사용한다.

[App.js]

render() {

      return (
      <div className="App">
        <h1>샘플 코드입니다.</h1>
        {/* 컴포넌트를 넣어줍니다. */}
        {/* <컴포넌트 명 [props 명]={넘겨줄 것(리스트, 문자열, 숫자, ...)}/> */}
        <Sample list={this.state.list}/>
      </div>
    );
  }