React 시작

리액트를 왜 쓰는가?

1. Shotgun Surgery : 중복 코드 작성 => 재사용을 위해 컴포넌트화 방식(Component 기반의 UI 라이브러리)
2. JQuery는 명령형 프로그래밍, React는 선언형
3. Virtual DOM: 실제가 아니기 때문에 렌더링이 되지 않는다.

React App

Webpack: 다수의 자바스크립트 파일을 하나로 합쳐주는 모듈 번들 라이브러리
Babel: JSX 등의 쉽고 직관적인 JS 문법을 사용할 수 있도록 한다.

=> CRA를 사용하자(Bolier Plate)

State

React 함수의 기본.
사람으로 비교하면 보통이고, 허기지고, 배가 부른 상태, 이렇게 계속 상태가 변화한다.

useState를 써보자

import React, {useState} from "react";

const Counter = () => {
  const [counter, setCount] = useState(0);
}

const increaseCount = () => {
  setCount(count+1);
};

const decreaseCount = () => {
  setCount(count-1);
}

return (
  <div> 
    <h2> {count} </h2>
      <button onClick={increaseCount}> + </button>
      <button onClick={decreaseCount}> - </button>
  </div>
 );
}

export default Counter

상태를 변화해주는 곳은 사실 아무 값이나 상관없지만,
이전 버전에서 set 명령어를 통해 바꾸어 주었으므로 관행적으로 쓴다.

다음에는, 리액트를 더 잘 쓰기 위해서, JavaScript에서 까다로운 부분을 정리하자.