React 설치, 빌드, 컨포넌트, state

• npm 이란
  node.js 안의 프로그램을 편리하게 깔수 있게 도와주는 앱 스토어 같은 역할

• node.js 설치
  https://nodejs.org/en/

Node.js

• npm 설치 명령어
  : npm install -g create-react-app
  > npm에게 creat-react-app을 깔아줘
  > -g : 어디서든 사용할수 있게 
• 버전확인
  : create-react-app -v
• react-app  설치 명령어(리액트 샘플 코드 설치)
  : create-react-app . 
  > react-app을 생성하고 . 현재경로에 깔아라
• class(Component)와 function의 비교
  : class App extends Component { render() {} }와  function App() { }와 같은 의미이다.

[class / component]

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

[function]

function App() {
  return (
    <div className="App">
      Hello, React!!
    </div>
  );
}

---

[react build]

빌드 후엔 min파일 형태로 build디렉토리 하위에 생긴다.
명령어 : npm run build

---

[컨포넌트 만들기]

• 우리가 함수를만들때 기본적으로 function을 붙여서 사용하는대 이번에 javascript에서 최신 업데이트된 사항중  class 안에 소속되는 함수는 function을 생략이 가능하다.

• 컨포넌트 안에 들어갈때는 최상의 태그만 써야한다.
   

---

[target 컨포넌트별 속성 다르게 주기]

• js에서는 attr을 react에선 props라고 부름
• 이런 props들을 자신이 임의로 선언할 수 있다
  1) 화면에 표출되는 컨포넌트에는 각 props에 표기될 사항을 적어준다.
  2) 구조를잡고있는 뼈대 컨포넌트에는 {this.props.○○○} 이런식으로 ○○○에 내가 만든 props의 별칭을 넣어준다.
  

class Subject extends Component {
  render(){
    return (
      <header>
          <h1>{this.props.title}</h1>
          {this.props.sub}
          <h1>{this.props.star}</h1>
          {this.props.star}
      </header>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <Subject title="WEB" sub="world wide web!"></Subject>
        <Subject title="React" sub="For UI"></Subject>
        <Subject star="Black pink"></Subject>
        <TOC></TOC>
        <Content></Content>
      </div>
    );
  }
}

---

[Component 파일로 분리하기]

• java로 치면 main()같은 영역에 컨포넌트들을 쭉 나열을 하는것이 아니라 class를 파일단위로 쪼개서 import해서 사용할 수 있다.
• 예시

import React, { Component } from 'react';

class TOC extends Component{
    render(){
      return (
        <nav>
              <ui>
                  <li><a href="1.html">HTML</a></li>
                  <li><a href="2.html">CSS</a></li>
                  <li><a href="3.html">JavaScript</a></li>
              </ui>
          </nav>
      );
    }
  }

export default TOC;

1) component라는 클래스를 사용하고 있는대 그 컨포넌트의 class를 로딩할 수 있게 해주는 역할
    : 리액트를 사용하기위한 기본적인 코드

• import React, { Component } from 'react';

2) 어떤 class의 컨포넌트를 외부에서 사용할 수 있게 할것이냐 라는 의미

• export default TOC;

3) main에 해당하는 부에서는 import 를 해줘야 사용 가능

import TOC from "./components/TOC"

---

[리액트 코드 구조]

: 리액트는 띄어쓰기 들여쓰기등의 규격이 맞지 않으면 prettier라는 애러가 나오게 된다.

: 위와같은 에러가 생기는 경우 plug-in 에서 prettier를 설치 하고 난 후 단축키로 간격을 맞춘다

 

[State 소개]

• 컨포넌트가 있을대 constructor()라는 함수가 있으면 이 함수를 제일 먼저 실행되서 초기화를 담당한다.
• constructor()라는 함수는 render()라는 함수보다 상위에서 실행이 되어진다.