React는 선언적인 형태로 View 설계가 가능하다 한다. 이 '선언적'은 명령형 같이 '이렇게 해라, 저렇게 해라' 라는 자세한 과정이 없고, '이렇게 할 것이다' 라고 무엇을 할 것인지에 대해 정의하는 것을 뜻한다.

{}, ()를 유의하자. Node.js 때도 그렇듯이 React도 배운걸 자꾸 햇갈려하고 까먹을 때가 많아진다.

Lifecycle 이 도표를 반드시 이해하자. 도표에서 볼 수 있지만 render에서 setState()를 쓰면 재귀한다.

setState 잘 이해 하도록 하자. state를 변경하려면 setState()를 이용한다.

Props & State

크게 구분이 되는 것은 Props는 외부에서 전달받은 값이고 state는 내부에서 변화하는 값이다.

props는 순수 함수에 의거, 값이 변하면 안된다.

Function Component & Class Component

// 함수로 컴포넌트를 정의하는 방법

function hi(props) {
  return <h1>Hi! {props.name}</h1>;
}

// 클래스로 컴포넌트를 정의하는 방법

class hi extends React.Component {
  render() {
    return <h1>Hi! {props.name}</h1>;
  }
}

여러 정보를 나열하려면 map을 써야한다. 다른 건 못 쓰나? 한 번 시도해봐야겠다.

버튼 태그에 이벤트 추가 방법

1. Class constructor에서 이벤트를 추가한다.
2. <button onClick={this.handle.bind(this)}> 와 같이 직접적?으로 추가하기
3. <button onClick = {()=> this.handle()}>