1. Hook

React 공식 문서에서 Hook을 다음과 같이 정의한다.

Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 "연동(hook into)" 할 수 있게 해주는 함수입니다.

정의에서 알 수 있듯이 class 컴포넌트가 아닌 함수 컴포넌트에서만 동작한다.
Hook(갈고리, 걸다)와 같은 단어 뜻 그대로 컴포넌트 밖의 어떠한 기능, 로직 등을 걸어서 가져오는 역할.
React는 useState와 같은 내장 훅을 몇 가지 제공.

EJ 피셜 : React에서 제공하는 컴포넌트가 사용할 수 있는 내장 메서드 같은 것들이구나...

Hook 사용 규칙

1-1. 최상위 레벨에서만 훅을 호출해야함.

레벨은 블록단위를 뜻하는데 컴포넌트를 정의하는 코드 내에서 제일 바깥 레벨 즉, 구워먹든 삶아먹든 할당하든 최상위 레벨에서만 훅을 호출해야함.

1-2. React 함수 컴포넌트 안에서만 훅을 호출해야함.

2. Props

property(속성)라는 단어 뜻 그대로 컴포넌트의 속성값을 의미함.
부모 컴포넌트로부터 자식 컴포넌트에게 데이터를 전달하기 위해 쓰임.
=== 부모가 자식에게 정해주는 것.
=== 유산같은 거.
=== 유산, 정해주는 거니까 자식 컴포넌트가 변경할 수 없음.
=== 이쁘게 말하자면 props는 읽기 전용.

props는 객체 형식임 ㅇㅇ.
=== 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체.
=== 즉, 부모에서 자식에게 객체 형식으로 데이터를 전달함.
=== 객체 형식이다 보니까 props의 갯수 그리고 데이터 형식에 제한 없음.

React에서 Props는 그 동안 봐온 언어들의 attribute 같은 녀석인데 문법도 attribute랑 비슷.

html에서 태그열고 starting tag에 attribute를 지정해주는 것처럼 react에서는 컴포넌트 열고 바로 props 지정해줌.
html

<img src="@@@" />

react

<Component propsName={propsValue} />

3. state

상태라는 단어 뜻 그대로 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값.
상태는 언제든지 변할 수 있쥐.
useState()라는 훅을 호출해서 이용한다.
useState 훅은

const [state, setState] = useState(initialValue);

와 같이 호출과 동시에 배열구조 분해 할당이라는 녀석을 통해 할당함.

배열구조 분해 할당이라는 녀석은

const arr = [1, 2, 3];

const one = arr[0];
const two = arr[1];
const three = arr[2];

와 같이 길고 지루한 코드를

const arr = [1, 2, 3];
const [one, two, three] = arr;

와 같이 이쁜 코드로 배열을 분해하면서 동시에 할당하는 멋진 녀석.

state랑 props는 React로 UI를 그리기 위한 재료들임.
React는 자동으로 UI를 업데이트(re-render) 해준다는데 이때 컴포넌트 자체를 다시 한번 실행시킴.
언제 업데이트하냐면(=== 언제 re-render 하냐면) 재료들(state, props)가 변화가 생겼을 때 ㅇㅇ.