✔️1. Hook

🍔1-1. Hooks?

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

▪️ Hook은 class 안에서는 동작하지 않는다.
▪️ 대신 class 없이도 React를 사용할 수 있게 해주는 것이다.(하지만 이미 짜놓은 컴포넌트를 재작성 하는것은 권장하지 않음. 대신 새로 시작하는 컴포넌트부터는 Hook을 이용하면 됨)
▪️ React는 useState 같은 내장 Hook을 몇 가지 제공한다.
▪️ 컴포넌트 간에 상태 관련 로직을 재사용하기 위해 Hook을 직접 만드는 것(custom hook)도 가능하다.
▪️ Hook은 state를 위해서 존재한다. 필요에 의해서 사용함
▪️ Hook은 함수의 모음집이다.

🍔1-2. 왜 사용하는걸까?

::공식 문서

🔸컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어렵다(HOC,render props)
🔸복잡한 컴포넌트들은 이해가 어렵다.(관심사의 분리, Lifecycle API)
🔸Class는 사람과 기계를 혼동시킨다.

🍔1-3. Class형 컴포넌트 vs Function 컴포넌트

::클래스형 컴포넌트란?

(1) state, 라이프 사이클 때문에 사용
(2) 마치 생명체처럼 클래스로부터 한번 인스턴스가 생성이 되고 나면 독립적으로 움직일 수 있다
(3) 반면 함수는 한번 호출되고 메모리 상에서 사라짐 => state, 라이프 사이클 불가능
⚠️ 클래스 사용해보니 해결하기 힘든 여러가지 문제 존재

:: 클로저(Closure), 함수 컴포넌트에 날개를 달아주다

(1) 2018년, React v16.8 Hooks 첫 배포
(2) 함수는 상태를 저장하지 않는다는데, 어떻게 state,라이프사이클을 구현했나?
(3) 클로저! (함수 안의 함수!)

🍔1-4. Hook 사용 규칙

✏️규칙 1: 최상위(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가 여러 훅들을 구분할 수 있는 유일한 정보는 훅이 사용된 순서뿐이기 때문.

✏️규칙 2: React 함수 컴포넌트 내에서만 Hook을 호출해야한다. 일반 JavaScript 함수에서는 Hook을 호출해서는 안된다.(custom Hook 내>>> Hook을 호출할 수 있는 추가적인 곳.딱 한군데)

---

✔️2. State & Event

🍳1. State

▪️ state: 상태
▪️ 단어 뜻 그대로 컴포넌트 내부에서 가지고 있는 컴포넌트 상태값이다.
▪️ state는 화면에 보여줄 컴포넌트의 UI 정보(상태)이다.
▪️ state는 컴포넌트 내에서 정의하고 사용하며 얼마던지 데이터가 변경될 수 있다.

🍳2. State 정의

▪️ 위에서 state는 >>> 화면에 보여줄 컴포넌트의 정보
▪️ 함수 컴포넌트에서 state, 즉 해당 컴포넌트의 상태를 어떻게 정의하는지 알아보자

✍️Function component | state

import React, { useState } from 'react';

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

 return (
  <div>
   <h1>Function Component | State</h1>
  </div>
  );
 }

 export default State;

▪️ 함수 컴포넌트에서 화면에 나타내고 싶은 JSX 요소가 return문 안에 있다
▪️ state를 설정할 때는 화면에 보이듯이 useState함수를 import 한 후 사용해야 한다.
▪️ useState함수는 컴포넌트 선언문(function State())과 return문 사이에 작성한다.
▪️ 배열의 첫 번째 요소는 상태값이 저장되는 변수이고, 두 번째 요소는 상태값을 갱신하는 함수이다.
▪️ 즉, 위 예제에서는 state를 담는 변수를 color로, color의 값을 갱신하는 함수를 setColor로 그리고 color의 초기값을 red로 정의했다.

🍳3. State 사용 예시

state에서 상태값을 설정하는 이유는 결국 컴포넌트 안의 요소에서 그 상태값을 반영해서 데이터가 바뀔 때마다 효율적으로 화면(UI)에 나타내기 위함이다.
▪️ return문 안에 <hi>타이틀 요소가 있다.
▪️ 해당 요소의 글자 색을 컴포넌트에서 설정한 state 값으로 하고 싶은 경우,
▪️ 다음의 순서대로 state 값을 특정 요소에서 반영할 수 있다.
▪️ 우선 JSX 요소에 인라인 스타일을 적용하기 위해, 그 중에서도 글자색을 설정해주기 위해 다음과 같이 작성한다.

<h1 style={{ color: }}>Function Component | State</h1>

▪️ useState 함수를 사용하여 지정한 state를 담는 변수, color라는 변수를 color속성의 value로 지정해주었다.

<h1 style={{ color: color }}>Function Component | State</h1>

//key값 color는 색상을 부여하기 위한 속성
//value값 color는 useState 함수를 통해 초기값인 'red'를 담고 있는 변수

🍳4. Event & state 변경

import React, { useState } from 'react';

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

 return (
  <div>
   <h1 style={{ color: color }}>Function Component | State</h1>
   <button onClick={() => setColor('blue')}>Click</button>
  </div>
 );
}

export default State;

▪️ <h1>태그 아래에 <button>요소를 추가해주었다.
▪️ color라는 상태값을 갱신하는 함수, setColor함수 실행
▪️ setColor 함수를 실행시키면서 인자로 넘겨준 값 'blue'에 의헤 color의 값이 'red'에서 'blue'로 변경
▪️ 상태값이 바뀌게 되면서 함수 컴포넌트가 다시 render 되고 바뀐 state 값을 반영하여 <h1> 태그 글자 색상 변경