📌 What You Will Study
리액트 첫 수업을 듣기 전에 해야 할 것들

step0. node, npm 설치

• node가 설치되면 npm도 함께 설치 된다. (npm은 따로 설치할 필요 없다)
• node 설치 후에 터미널에 node -v, npm -v를 입력하면 버전을 확인할 수 있다. 버전 정보가 뜨면 제대로 설치 되었다는 의미.

step 1. 리액트?? 가볍게 훑어보기!

페이스북에서 만든 자바스크립트 UI 라이브러리

Labrary(라이브러리)란?

• 재사용이 필요한 기능으로 반복적인 코드 작성을 없애기 위해 언제든지 필요한 곳에서 호출하여 사용할 수 있도록 Class나 Function으로 만들어진 것

Node(노드)란?

• 원래 자바스크립트는 웹브라우저에서 구동이 된다. 이 자바스크립트를 터미널 환경에서 구동될 수 있도록 하는 것을 노드라고 한다.

NPM (Node Package Manager / 노드 패키지 매니저)이란?

• 자바스크립트 프로그래밍 언어를 위한 패키지 관리자. 자바스크립트 런타임 환경 Node.js의 기본 패키지 관리자이다.

Component(컴포넌트)란?

• 리액트는 컴포넌트로 이루어져있다.컴포넌트는 재사용에 유리하다.
• 사용자가 정의해서 만든 태그를 컴포넌트라고 한다.
• 컴포넌트를 사용하면 가독성을 높일 수 있다.

package.json 파일

• 리액트 어플리케이션의 모든 정보를 가지고 있다.

dependencies - 패키지들을 모아 놓은 것

    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"   

scripts - npm run start 할 때 사용

🔖 control + shift + ~ : vscode에서 터미널 열기 단축키

• noed_modules 파일
  리액트 앱에서 사용하는 패키지 정보를 가지고 있다.
  보통 .gitignore에 표시하고 깃에 깃에 포함 시키지 않음
  다른 사람이 프로젝트를 클론 받았을 때 noed_modules 폴더가 없다. 그렇기 때문에 다운 받은 사람이 package.json에 있는 정보로 직접 다운 받아 install로 다시 설치하고 실행해야 한다.

step 2. react글

1. React 1 - JSX

JSX

const hi = <p>Hi</p>;

• 위 문법은 JSX라고 불리는 JavaScript 확장 버전이다.
• syntax extension for JavaScript라고 합니다. HTML과 비슷하게 생겼고, javascript 파일 내에서 작성할 수 있다.
• JSX는 JavaScript 문법이 아니기 때문에 js 파일 내에 JSX 문법이 있으면 브라우저에서 해석하지 못하고 문법 오류가 난다.

JSX element

• HTML 문법을 JavaScript 코드 내부에 사용하는 것이 JSX이다.
• .js파일 어디에서나 작성할 수 있다. 변수에 저장할 수도 있고, 함수의 인자로 넘길 수도 있다.

JSX attribute

• 태그에 attribute(속성)을 주고 싶을 때는 ""쌍따옴표로 감싸준다. 실제 HTML에서 쓰는 attribute name(속성명)과 다를 수 있다.

• 예를 들어, class를 주고 싶을 때 원래 속성명은 class이지만 JSX에서는 className을 사용한다.

const hi = <input readOnly={true} />;

const myFavorite = {
    food: <li>샐러드</li>,
    animal: <li>dog</li>,
    hobby: <li className="list-item">programming</li>
};

🔖 Self-Closing Tag
JSX에서는 어떤 태그라도 self closing tag가 가능하다.
<input> 처럼 하나의 태그가 요소인 경우에는 <input />와 같이 항상 /로 끝내줘야 한다.
<div />와 <div></div>는 같은 표현

Nested JSX

1. (필수) 소괄호로 감싸기

const good = (
<div>
    <p>hi</p>
</div>
);

중첩된 요소를 만들려면 () 소괄호로 감싸줘야 한다.

2. (필수) 항상 하나의 태그로 시작

const right = (
<div>
    <p>list1</p>
    <p>list2</p>
</div>
);

첫 요소는 무조건 하나의 태그로 감싸져야 한다.

Rendering

• html요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링(rendering) 이라고 텍스트한다.
• React 요소가 DOM node에 추가되어 화면에 렌더되려면 ReactDOM.render 함수를 사용한다.
  첫 번째 인자에는 JSX요소를 인자로 넘기고, 두 번째 인자는 해당 요소를 렌더하고 싶은 container(부모요소)를 전달한다.

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

2. React 2 - Component

Component

• component(컴포넌트)란 재사용 가능한 UI 단위
• 컴포넌트는 독립적으로, 재사용 가능한 코드로 관리할 수 있다.
• 컴포넌트는 함수랑 비슷하다. 컴포넌트도 input을 받아서 return 할 수 있다.
• React 컴포넌트에서는 input을 props라고 하고 return은 화면에 보여져야할 React요소가 return 된다.

Component 만들기

• React는 Componenet를 만들고 관리하기 좋은 라이브러리이다.
• React에서는 컴포넌트를 class나 함수로 만들 수 있다. 어떤 때에는 함수로 만들면 좋고, 어떤 때에는 class로 만들어야 한다.

함수로 Welcome 컴포넌트 구현하기

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

class로 Welcome 컴포넌트 구현하기

• class로 컴포넌트를 만드려면 React.Component를 extend 해서 생성한다.
• 컴포넌트를 생성할 때 render() 메서드는 무조건 정의해야 하고, return도 해줘야 한다.
  원래 component를 만들 때 필요한 메서드가 더 있지만 render()만 필수

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Component 사용

• 위처럼 정의한 컴포넌트는 함수/class 이름으로 사용할 수 있다. 태그처럼 <Welcome />으로 작성한다.
• 정의한 컴포넌트를 사용할 때, 원하는 attribute를 추가할 수 있다. 그러면 Welcome 컴포넌트(함수)에서 parameter로 해당 attribute를 받아서 사용할 수 있다. 이것을 props라고 한다.
  props는 property의 줄임말이다. .(dot)으로 속성명에 접근가능, props.속성 값을 가져올 수 있다.

// 1. Welcome 컴포넌트 정의
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 2. App 컴포넌트 정의
function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

// 3. 화면에 React 요소 그려주기
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

1. Welcom 컴포넌트: Welcome 컴포넌트를 사용한 측(부모)에서 name이라는 attribute를 부여. props.name의 값을 사용.
2. App 컴포넌트가 div로 감싸져있고, <Welcome /> 컴포넌트를 세번 사용. name이라는 attribute를 부여.
3. ReactDOM.render 함수로 React 요소를 그려준다. root라는 id를 찾아 <App /> 컴포넌트를 그려준다.

리액트 시작하기

1. 터미널에서 원하는 위치로 이동한다.
2. npx create-react-app 폴더명을 입력한다.
   Happy hackin!이 뜨면 완료된 것
3. cd 만든 폴더명으로 이동
   code . 을 입력 하면 vscode에서 그 폴더를 바로 열어 준다.

react-app 만들고 난 후

• cra(create-react-app)로 만들고 난 후에 3개의 파일 지운다
  src 파일에 있는 App.test.js / serviceWorker.js / setupTests.js

• index.js 리액트에서 가장 최상위 js 파일(기준이 되는 파일)
  ReactDOM.render(, document.getElementById('root'));

• 컴포넌트 시작할 때 맨 위에 항상
  import React from 'react';를 해줘야 한다 무조건!

• 함수형 컴포넌트를 클래스형 컴포넌트로 바꿔준다.

//App.js
import React, { Component } from 'react';
import Box from "./Box";
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        Hello
        <Box />
      </div>
    );
  }
  
}

export default App;

• render() 메소드
  컴포넌트는 JSX를 return 한다. JSX는 html도 javascript도 아니다 기능은 html 기능을 한다.
• 컴포넌트 마다 css 파일을 만들어준다.

• App.js 부모 컴포넌트 모든 컴포넌트 보여 주려면 부모 컴포넌트에 있어야한다.
  리턴문 안에는 하나의 div만 있어야 된다. 그 div 안에서는 여러개의 div가 가능하다.

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';


ReactDOM.render(<App />, document.getElementById('root'));

• 불필요한 부분들 지워주고 위 처럼 만들어 준다.

• npm run start
  만든 react app을 실행 해준다.