Hook

• 최상위(at the top level)에서만 Hook을 호출해야 한다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 안 된다.

import React, { useState } from "react"

function Hooks(props) {
  if (!props.isExist) {
    const [state, setState] = useState(); // Error!
  }

  const [state2, setState2] = useState(); // Error!
}

// react가 여러 훅들을 구분할 수 있는 유일한 정보는 훅이 사용된 순서 뿐이기 때문.

• React 함수 컴포넌트 내에서만 Hook을 호출해야 한다.

Props

• props는 properties(속성), 즉 컴포넌트의 속성값이다.
• props는 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체이다.
• props를 이용해 어떤 자바스크립트 값이든 모두 자식 컴포넌트에 전달할 수 있다. (변수, state 값, event handler 등)

State

• state는 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값이다.
• state는 화면에 보여줄 컴포넌트의 UI 정보(상태)이다.
• state는 컴포넌트 내에서 정의하고 사용하며 얼마든지 데이터가 변경될 수 있다.

function Parent() {
  const [color, setColor] = useState('red');

  return (
    <div>
      <h1>Parent Component</h1>
      <Child titleColor={color} changeColor={() => setColor('blue')} />
    </div>
  );
  
function Child(props) {
  return (
    <div>
      <h1 style={{color : props.titleColor}}>Child Component</h1>
      <button onClick={props.changeColor}>Click</button>
    </div>
  );
}

State 끌어올리기

State 끌어올리기란? 자식 event로 부모 state를 변경하는 것이다.
props의 개념을 이용해 자식에서 일어난 event로 부모의 state 값을 바꿀 수 있다.
자식에게 이벤트 핸들러를 걸고, 이벤트가 발생했을 때 실행할 함수는 부모에서 정의한다. 부모에서 setState가 포함된 함수를 정의하고 자식에게 props로 넘겨준다.

단방향성

React의 특징 중 하나는 단방향성이다. 부모의 state를 자식에게 넘겨줄 수는 있지만, 자식의 state를 부모에게 전달하기는 어렵다.
형제끼리는 직접적으로 데이터를 전달할 수 없다. 따라서 형제를 모두 가지고 있는 부모 컴포넌트에서 state를 관리하고 이를 각각의 형제에게 props로 전달해야 한다.