Hook

내 할일 잘 하기·2023년 3월 4일

React

목록 보기

8/9

공식문서 링크 : https://ko.reactjs.org/docs/hooks-overview.html\

Hook 이전에는?

Hook은 16.8버전부터 생겼다. 그래서 이전에 제작된 프로젝트의 경우는 Class component를 사용한 경우가 있다.
현재는 재사용성에 있어 장점이 있기 때문에 대부분 Funtional component와 Hook을 사용한다.

Hook은 왜 생겼는가?

기존 Class Component 의 단점을 보완하면서 Life Cycle 등과 관련된 함수를 재사용 가능토록 하는것이 주 목적
컴포넌트간 상태 로직을 재사용하기에 어려웠다. → 계층의 변화 없이 상태 관련 로직을 재사용 할 수 있도록 도와줍니다.
복잡한 컴포넌트를 이해하기 어려웠다. → 기존 Class component 내에서의 생명주기와 그 내에서의 작업들로 인해 버그가 쉽게 발생하고 무결성을 쉽게 해치는 상황이었다.
현재의 Hook은 구독 설정 및 데이터를 불러오는 것과 같은 로직으로 Hook을 통해 비슷한 함수의 묶음으로 컴포넌트를 나누는 방법을 사용할 수 있다.
Class는 사람과 기계를 혼동시키기 쉬웠다. → React 내에서 Class를 사용하려면 JS 내에서 this 바인딩에 대해 명확히 알아야만 했으며 이는 충분히 어려웠다고 할 수 있다.
더 자세한 내용은 공식문서를 참조.

Hook의 개요

기존엔 state를 사용하려면 꼭 Class component를 사용했어야 했다.
⇒ 하지만 Hook은 class 없이 state와 다른 react의 기능들을 사용할 수 있게 한다.
Hook이란 ?
⇒ Funtional component에서 React state와 생명주기 기능을 연동(hook into)할 수 있게 해주는 함수.
Hook은 Class 내에서는 동작하지 않는 대신, Class 없이 React를 사용할 수 있게 하는 것.
React 내에서 useState와 같은 기본 내장 Hook을 몇 가지 제공한다.
Hook은 기존 state를 버리고 대체, Class Component의 this.setState는 기존 state에 병합.
배열 구조 분해 문법에 대해서는 나중에 생각해 보세요.
custom Hook은 여러가지 Hook을 모아둔 것.
아래는 버튼을 클릭하면 값이 증가하는 카운터입니다.


import React, { useState } from 'react';

function Example() {
// "count"라는 새 상태 변수를 선언
// Hook을 호출해 funtional Component 내에 state를 추가하였음.
// 이 state는 컴포넌트가 다시 render 되어도 그대로 유지될 것임.
// useState는 현재의 state 값, 이 값을 업데이트하는 함수(= setCount)를 쌍으로 제공
// 위의 함수(setCount)는 이벤트 핸들러 및 다른 곳에서 호출하여 사용 가능.
// 위의 기능이 바로 Class component 내에서의 this.setState와 거의 유사하지만
// 기존 state와 새로운 state를 합치지 않는다는 점이 있음.
// useState는 인자로 초기 state 값을 받으며('0') 이 초기값은 첫 render에서 딱 한번 사용.
// this.state는 객체여야만 하지만 useState Hook의 state는 객체가 아니어도 됨.
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}