[React] 9 - Hooks

goal

• hook에 대해서 알아보자

HOOK의 효용

• Hook을 사용하면 component로부터 state 관련 로직을 추상화할 수 있다.
• 따라서 컴포넌트 별로 독립적인 테스트와 재사용이 가능하다.
• Hook은 계층 변화 없이 state 관련 로직을 재사용할 수 있도록 도와준다.

State Hook

• 디버깅해보면,
  • props - new entry : ""
  • state - count : 100 👉️ 이렇게 오는 자리에 👉️ hooks - state : 100
    (초기값 100으로 설정) 이런식으로 변화하는 것을 알 수 있다.

• 아래 예시에서는 count라는 변수를 사용해서 새로운 state를 정의했다.

• 배열 안에 [this.state, setState] = useState() 이런 형태로 state와 setState를 표현한다.
  - 위 자바스크립트 문법은 “배열 구조 분해”라고 하고, fruit과 setFruit, 총 2개의 값을 만든다.
  - 즉, useState를 사용하면 fruit이라는 첫 번째 값과 setFruit라는 두 번째 값을 반환한다.
  - 따라서,아래의 코드와 같은 효과를 낼 수 있다.
  - 하지만, [0]이나 [1]로 배열에 접근하는 것은 좋지 않을 수 있다.

  var fruitStateVariable = useState('banana'); // 두 개의 아이템이 있는 쌍을 반환
  var fruit = fruitStateVariable[0]; // 첫 번째 아이템
  var setFruit = fruitStateVariable[1]; // 두 번째 아이템

HOOK 이란 대체 무엇인가?

• useState 자체가 HOOK 이며, HOOK은 특별한 함수이다.
  useState의 특별한 기능은, state를 function component 내부에서 사용할 수 있도록 해준다는 점이다.

HOOK 은 언제 사용할까?

• function component를 사용하는 중간에, state를 추가하고 싶을 때 사용한다. (기존에는 class component로 바꿔야 했음)

state 변수 선언하기

• HOOK 을 호출해서(= useState() ) function component 내부에 state 변수를 선언할 수 있게 한다. (여기서 state는 count라는 변수로 설정함)

• 그리고 이 내부에 추가한 state(=count)는 component가 다시 렌더링 되어도 그대로 유지된다.

• useState는 현재의 state 값(count)과 이 값을 업데이트하는 함수(=setCount)를 동시에 제공한다.
  따라서, useState는 "state 변수 + state 변수를 갱신할 수 있는 함수" 를 반환한다.

• 이 함수(=setCount)는 (주로) 이벤트핸들러 등에서 호출할 수 있다.

• useState는 인자로 state의 초기값을 넘겨준다.
  객체일 필요는 없으며, number type 또는 string type이 올 수 있다.
  ( useState(100) => 여기서는 num type의 100을 초기값으로 설정함)

• const [count, setCount] = useState(100);
  위 코드에서
  state 변수 count를 선언하고 100으로 초기화한다.
  초기값(100)은 "첫번째 렌더링 시"에만 "한번" 사용된다.
  리액트는 해당 변수(count)를 리렌더링할 때 기억하고,
  가장 최근에 갱신된 값을 제공한다.
  count의 값을 갱신하려면, setCount를 호출하면 된다.

• 하나의 component 내부(= StateHook)에서 State HOOK을 여러 개 사용할 수도 있다.
  단, (리액트는) useState 가 사용된 순서대로 실행한다.

state 가져오기

• {this.state.count} 에서 👉️
  {count} 처럼 바로 사용 가능하다.

state 갱신하기

• this를 호출하지 않아도 된다.
  onClick={ () => this.setState({ count:this.state.count+1 }) } 에서 👉️
  onClick={ () => setCount(count+1) } 처럼 사용한다.

class component와의 차이점

• 클래스 컴포넌트의 this.setState와 달리 state를 갱신하는 것은 병합하는 것이 아니라 대체하는 것이다.
  (= 이전 state와 새로운 state를 합치지 않는다)

  
import React, { useState } from 'react';
//! {useState, useEffect} 이렇게 불러온다.

function StateHook() {
  
  // count라는 변수로 새로운 state를 정의한다.
  const [count, setCount] = useState(100);

  //! 배열 안에 [this.state, setState] = useState() 함수  이런 형태로 사용한다.
  console.log(count) // 처음설정한 값 : 100
  console.log(setCount) // 함수
    //   ƒ dispatchAction(fiber, queue, action) {
    //     {
    //       if (typeof arguments[3] === 'function') {
    //         error("State updates from the useState() and useReducer() Hooks don't support the " + 'secon…
    //? 참고로) 렌더링 후 부작용을 실행하려면, useEffect() 를 사용해서 컴포넌트 본문에 선언한다. (?)

  return (
    <div>
      <p>You clicked {count} times</p> 
      <button onClick={() => setCount(count + 1)}> + </button>
      <button onClick={() => setCount(count - 1)}> - </button>
      // 사용자가 버튼을 클릭하면, setConut 함수를 호출하여 state 변수를 갱신한다.
      // React는 새로운 count 변수를 StateHook component에 넘기며 해당 컴포넌트를 리렌더링한다.
    </div>
  );
}

export default StateHook;