리액트 기초반 1주차 - 3

22.03.31(목)
스파르타코딩클럽 리액트 기초반 - 1주차 과정

◎ React 프로젝트 만들기

• VSCode, NVM 설치 // NVM은 1.1.7 버전
• NVM 설치 확인

nvm --version

• NVM으로 노드 설치 // Node.js의 버전 설치 및 관리 용이

nvm install [설치할 버전]

nvm ls # nvm으로 설치한 노드 버전 리스트 확인 명령어
node -v # 노드 버전 확인 명렁어
nvm use [사용할 노드 버전] // 노드 버전 전환

• yarn(패키치 설치 관리자 중 하나) 설치
  • yarn 사용 이유: npm보다 가벼움.

npm install -g yarn #yarn을 컴퓨터 전체에 설치

yarn add [옵션] [설치할 패키지 이름] # 패키지 설치할 떄 사용

• CRA(create-react-app) 설치 및 실행
  • CRA: 웹사이트를 만들 때 필요한 것을 모두 넣어 만든 패키지

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

• 리액트 앱 실행

cd [프로젝트 이름] # [프로젝트 이름] 폴더로 이동합니다.
yarn start # 서버 실행

◎ JSX

• 리액트에서는 딱 하나의 html 파일만 존재
• 리액트에서는 JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 그린다.
• 예시 (초기화면)

// *react*에서도 다른 패키지를 불러다 쓸 수 있다.
// import [패키지명] from [경로] 이 형식으로 불러온다.
// image, css등 다양한 것이 가능
import React from 'react'; 
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

◎ JSX 기초 사용법

1. 태그는 꼭 닫아주어야 실행 가능하다.

2. return에는 무조건 1개의 앨리먼트를 반환한다.
   2개이면 하나로 묶어야 반환 가능하다.

3. JSX에서 javascript를 가져오려면 중괄호를 사용한다.

<div className="App">
      <p>안녕하세요! 리액트 반입니다 :)</p>
      {/* 삼항 연산자를 사용했어요 */}
      <p>{number > 10 ? number+'은 10보다 크다': number+'은 10보다 작다'}</p>
</div>

4. class 대신 className을 사용
   id는 똑같이 id로 사용함.
5. style 주는 법

function App() {
  const styles = {
    border: '1px solid #eee', 
    padding: '20px',
    display: 'flex', 
    width: '100vw', 
    maxWidth: '400px', 
    margin: '30px auto', 
    flexDirection: 'column'
  };

  return (
    <div className="App">
      <div style={styles}>
        <h1 style={{ color: 'green' }}>안녕하세요!</h1>
        <hr style={{width: '100%'}}/>
        <p style={{ textAlign: 'left' }}>이름을 입력해주세요.</p>
        <input type="text"/>
      </div>
    </div>
  );
}