1주차 - 첫 React 프로젝트 만들기

React는 Node(런타임) 위에서 동작하는 자바스크립트 라이브러리 입니다!

 

+ NVM이란?

: Node.js의 버전 관리자입니다.

우리 컴퓨터에 node를 설치하는 툴인데 수많은 버전을 마음대로 골라 설치할 수 있게 해주는 멋진 친구입니다.

 

시스템(우리 컴퓨터)에 Node.js를 직접 설치하다보면 다른 버전을 설치하게 되는 경우가 많은데, 여러 버전의 Node.js를 관리하는 건 굉장히 귀찮은 일이죠.

 

nvm을 설치하고 설치한 nvm을 통해 node를 설치하면 나중에 생길 귀찮음을 방지할 수 있습니다!

---

CRA(Create React App)이란?

 

React는 레고 같은 친구입니다. 어린이들이 레고로 성을 만드는 것처럼 우리는 React로 웹사이트를 만들 거예요.

 

마트에서 레고를 보신 분들은 아시겠지만, 레고는 네모 블럭, 긴 블럭, 혹은 귀여운 캐릭터만 따로 구매할 수 있죠? 만들고 싶은 성 모양에 맞춰 누구는 네모 블럭만 잔뜩 살 것이고 누구는 성문과 대포까지 살 겁니다.

 

하나씩 구매하기 번거롭다면요? [해리x터 성만들기]같은 패키지를 사겠죠!

 

React도 마찬가지입니다! 우리가 웹사이트에 만들기 위해 필요한 것들을 하나씩 설치할 수 있습니다. (webpack, babel 같은 녀석들을 배워야 하지만요.)

 

CRA(Create React App)는 웹사이트를 만들 때 필요한 것을 몽땅 때려넣어 만든 패키지입니다.

레고의 해리x터 성만들기 같은 거라고 생각하시면 좋아요.

 

1) React에서는 프로젝트를 앱이라고 불러요.

리액트 프로젝트와 리액트 앱은 같은 말이니, 편하신 쪽으로 말씀하시면 됩니다.

# yarn create react-app [우리의 첫 리액트 프로젝트 이름]
# 우리가 설치한 create-react-app 패키지를 써서 프로젝트를 만들어요.
# 주의! 꼭 sparta_react 폴더 경로에서 입력해주세요!
yarn create react-app week-1

2) 설치가 끝났다면, 아래 명령어를 입력해서 우리의 첫 리액트 앱을 실행시켜봅시다!

cd week-1 # week-1 폴더로 이동합니다.
yarn start

---

JSX(JavaScript XML)

 

1) JSX란?

: React에서 사용되는 문법이다.

: HTML을 품은 JavaScript 문법이다.

 

아래처럼 생겼습니다. (App.js)

// 엇? 파이썬에서 뷰티풀스프를 불러올 때 본 것 같기도 하죠?
// *react*에서도 다른 패키지를 불러다 쓸 수 있습니다!
// import [패키지명] from [경로] 이 형식으로 불러와요.
import React from 'react'; 
// js 파일 뿐 아니라 이미지도 가능가능!
import logo from './logo.svg';
// css? 가능!
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;

 

리액트에서는 딱 하나의 html 파일만 존재합니다.(SPA 형식) (public 폴더 아래에 있는 index.html)

그럼 리액트에서 어떻게 뷰를 그릴까요?

App.js 파일에서 보이듯, JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 그립니다.

 

-> HTML을 품은 JS === JSX

 

아래와 같은 HTML 태그는 .js에 안에서 쓸 수 없습니다.

<div>
	<h1>안녕하세요!</h1> 
	<p>시작이 반이다!</p>
</div>

그래서 나온 게 JSX입니다.

자바스크립트 안에서 html 태그 같은 마크업을 넣어서 뷰(UI) 작업을 편하게 할 수 있습니다.

const start_half = <div>
                    <h1>안녕하세요!</h1>
                    <p>시작이 반이다!</p>
                  </div>;

그럼 JSX에서 쓰는 <div></div>는 DOM 요소인가요?? 정확하게는 React 요소입니다.! 

 

2주차 가상돔을 배울 때 자세히 살펴볼 예정입니다.

 

지금은 리액트 DOM을 구성하는 건 리액트 요소! DOM을 구성하는 건 DOM 요소!라는 것만 알아두면 됩니다.

 

2) JSX 사용법 (규칙)

 

- 태그는 꼭 닫아주기

- 무조건 1개의 element(요소)를 반환하기 -> 형제 태그, sibling 태그가 있으면 안됩니다.

- JSX에서 JavaScript 값을 받아오려면? -> 중괄호{}를 사용합니다. -> 바인딩 해준다.

- class 대신 className -> id는 id로 사용합니다.

- 인라인으로 style 주기

// 중괄호를 두 번 쓰는 이유? 딕셔너리도 자바스크립트니까요!
// 이렇게 쓰거나,
<p style={{color: 'orange', fontSize: '20px'}}>orange</p>

//혹은 스타일 딕셔너리를 변수로 만들고 쓸 수 있어요!
function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

  return (
    <div className="App">
      <p style={styles}>orange</p>
    </div>
  );
}

---

+ 퀴즈1 - 간단한 텍스트 입력 화면 만들기

 

- 회색 박스 안에 타이틀, 선, 일반 텍스트, 인풋 박스가 들어갑니다.

- 위에서 배운대로 App.js 안에서 CSS를 사용하여 만듭니다.

 

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

function App() {

  const divStyle = {
    border : '1px solid gray',
    padding : 50,
    margin : 200
  }

  const pStyle = {
    textAlign : 'left',
  }

  const inputStyle = {
    float : 'left',
    paddingRight : 335
  }

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

export default App;