npm run start

function 과 class 의 차이

class

import React,{Component} from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    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;

funcation

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;

Build

npm run build
npm install -g serve
npx serve -s build

개발자가 개발할 때는 앱이 무거워도 상관없지만 사용자에게 이 상태로 앱을 제공할 수는 없다.
공백 혹은 불필요한 정보는 삭제한다.
(1.8MB) -> (148kB)

Props vs State

props : 사용자가 컴포넌트를 사용하는 입장에서 중요한 것 (사용자에게 중요한 정보)
state : props의 값에 따라 내부 구현에 필요한 데이터 (사용자가 알아서는 안되는 정보)

state : 외부에서 알 필요가 없는 정보를 철저하게 은닉하는 것, 철저하게 숨기는 것이 좋은 사용성을 만드는 것이 핵심

Event

• 이벤트는 state, props, event 라는 3자가 서로 상호작용하면서 애플리케이션의 역동성을 만든다.
• 이벤트 함수가 호출될 때 첫 번째 매개변수의 값으로 event라는 객체를 주입해 주기로 약속되어있다.
  
  

state 값을 올바르게 변경하기 위한 두가지 조건

1. 함수 뒤에 .bind(this) 추가하기
2. this.setState 함수를 호출해서 state 값 변경하기

만약 이 Subject라는 컴포넌트를 사용할 때 사용자가 Subject 컴포넌트 내의 A 태그를 클릭했을 때 어떤 일이 일어나게 하고 싶다면, 다시 말해 이벤트를 설치하고 싶다면 다음과 같이 onChangePage라는 이벤트를 사용해야한다. 그 이벤트에 함수를 설치해 놓으면, A 태그가 클릭됬을 때 설치한 함수를 실행한다.

props : 상위 컴포넌트가 하위 컴포넌트에게 데이터를 전달할 때 사용
state : 하위 컴포넌트가 상위 컴포넌트로 데이터를 전달할 때 props의 값을 변경할 수 없기 때문에 이벤트 발생

Push vs Concat

push : 원본 데이터 변경
concat : 원본 데이터 불변 (새로운 데이터 생성 = 복제 + 추가)

push를 사용하는 구현방식은 리액트 앱의 성능을 개선할 때 굉장히 까다로운 반면,
concat을 사용하는 방식은 앱의 성능을 개선하기가 굉장히 쉬어지기 때문에 권장한다.

참조) immutable.js / ex) 비교