React | React Hooks란 ?

React Hooks란 ?

ReactConf에서 2018년 발표된, class 없이 state를 사용할 수 있는 새로운 기능

 

React Hooks가 필요한 이유 ?

항상 기술은 그 전의 불편함이나 문제점을 해결하기 위해서 더욱 발전함

react hooks도 주로 class component로 사용되어온 react에서 느껴왔던 불편함이나 문제점을 해결하기 위해 개발됨

--> 원래 리액트는 주로 class component를 사용하고, react hooks는 functional component를 사용함

React Component
Class Component	Functional Component
더 많은 기능 제공 더 많은 코드 양 더 복잡한 코드 더딘 성능	더 적은 기능 제공 짧은 코드 양 더 심플한 코드 더 빠른 성능

 

함수형 컴포넌트에서 어떤 기능을 비교적 적게 제공한다는 것일까 ?

 

리액트의 생명주기를 함수형 컴포넌트에서는 사용하지 못해서

함수형 컴포넌트가 더 간결하고 빠르더라도 클래스형 컴포넌트를 써왔음

↓

React Hooks 업데이트

↓

함수형 컴포넌트에서도 생명주기를 사용할 수 있게 됨

 

Hooks로 인한 다른 이점 ?

- 코드가 간결해짐

- HOC 컴포넌트를 Custom React Hooks로 대체해서 너무나 많은 Wrapper 컴포넌트를 줄일 수 있음

cf. HOC(Higher Order Component) 란 ?

화면에서 재사용 가능한 로직만을 분리해서 component로 만들고,

재사용 불가능한 UI와 같은 다른 부분들은 parameter로 받아서 처리하는 방법

 

Q. 리액트를 처음 배우는 사람에게 HOC 컴포넌트 설명해줘

A. HOC(Higher-Order Component)란?
HOC는 리액트에서 컴포넌트를 재사용하고 확장하기 위한 고급 기법이에요. 한마디로, 다른 컴포넌트를 감싸서 새로운 기능을 추가해주는 “특별한” 컴포넌트라고 생각하면 돼요.

비유로 설명하기
마치 특별한 모자를 생각해보자. 이 모자는 아무나 쓸 수 있고, 이 모자를 쓰면 더 멋있어져요. 이 모자를 HOC라고 생각해보세요. 토끼와 곰돌이가 모자를 쓰면, 토끼는 여전히 토끼지만 더 멋있어지고, 곰돌이도 여전히 곰돌이지만 더 멋있어져요.

 

코드 예시로 이해하기
먼저 기본 컴포넌트들을 만들어볼게요

function Rabbit() {
  return <div>나는 토끼야!</div>;
}

function Bear() {
  return <div>나는 곰돌이야!</div>;
}

 

이제 HOC를 만들어서, 이 컴포넌트들을 감싸볼게요:

function withHat(Component) {
  return function EnhancedComponent(props) {
    return (
      <div>
        <Component {...props} />
        <div>🎩 멋진 모자</div>
      </div>
    );
  };
}

withHat이라는 HOC는 어떤 컴포넌트든 받아서, 그 컴포넌트 위에 멋진 모자를 추가해주는 역할을 해요.

 

이제 HOC를 사용해볼까요?

const RabbitWithHat = withHat(Rabbit);
const BearWithHat = withHat(Bear);

이제 RabbitWithHat과 BearWithHat는 각각 모자를 쓴 토끼와 곰돌이가 되었어요.

 

 최종코드

import React from 'react';

// 기본 컴포넌트들
function Rabbit() {
  return <div>나는 토끼야!</div>;
}

function Bear() {
  return <div>나는 곰돌이야!</div>;
}

// HOC 함수
function withHat(Component) {
  return function EnhancedComponent(props) {
    return (
      <div>
        <Component {...props} />
        <div>🎩 멋진 모자</div>
      </div>
    );
  };
}

// HOC를 사용해 컴포넌트를 감싸기
const RabbitWithHat = withHat(Rabbit);
const BearWithHat = withHat(Bear);

// 최종 앱
function App() {
  return (
    <div>
      <RabbitWithHat />
      <BearWithHat />
    </div>
  );
}

export default App;

 

HOOKS가 너무 많아진다면 ?

--> 너무 많은 Wrapper 컴포넌트가 생겨 데이터 흐름을 파악하기 어려워짐

--> Custom React Hooks 사용

 

Q. Custom React Hooks 쉽게 설명해줘

A.Custom Hooks란?
리액트에서 **Hooks(훅)**는 우리가 컴포넌트에서 상태를 관리하거나 특별한 작업을 할 수 있게 해주는 도구예요. Custom Hooks는 이런 훅들을 우리가 필요로 하는 기능으로 새롭게 만드는 거예요. 쉽게 말해서, 여러 번 사용할 수 있는 **“특별한 도구”**를 만드는 거예요.

비유로 설명하기
레시피를 생각해보자. 요리를 할 때 레시피가 있으면, 그 레시피를 따라해서 여러 번 같은 요리를 만들 수 있죠. Custom Hooks도 비슷해요. 한 번 만들어 두면 여러 컴포넌트에서 같은 방법으로 사용할 수 있는 도구예요.

예제
예를 들어, 햄버거를 만드는 레시피를 만들어 보자.

1. 햄버거 레시피 만들기:
• 빵을 준비해.
• 고기를 구워.
• 야채와 소스를 준비해.
• 빵 위에 고기, 야채, 소스를 올려.

 

이제 이 레시피를 Custom Hook으로 만들어 볼게요:

// useHamburger라는 햄버거 만드는 레시피
function useHamburger() {
  const ingredients = ["빵", "고기", "야채", "소스"];
  
  function makeHamburger() {
    return `맛있는 햄버거: ${ingredients.join(", ")}`;
  }
  
  return makeHamburger;
}

 

2. 이제 이 레시피를 사용해서 햄버거를 만들어 보자:

// App 컴포넌트에서 햄버거 레시피를 사용해요
function App() {
  const makeHamburger = useHamburger();
  
  return (
    <div>
      <h1>{makeHamburger()}</h1>
    </div>
  );
}

이제 App 컴포넌트는 useHamburger 레시피를 사용해서 맛있는 햄버거를 만들 수 있어요.

 

정리

 

• Custom Hooks는 리액트에서 우리가 여러 번 사용할 수 있는 **“특별한 도구”**예요.

• 예를 들어, 햄버거 레시피를 만들어 두면, 언제든지 그 레시피를 따라 햄버거를 만들 수 있어요.

• Custom Hooks도 마찬가지로, 한 번 만들어 두면 여러 컴포넌트에서 쉽게 사용할 수 있어요.

 

이제 좀 더 쉽게 이해할 수 있겠죠? 😊 Custom Hooks는 우리가 여러 컴포넌트에서 공통으로 사용하는 기능을 쉽게 만들고 재사용할 수 있도록 도와주는 도구예요.

 

state를 useState Hook을 이용해서 표현하기

 

value = 변수이름 (getter)

setValue = state를 정하는 함수 (setter)

useState = value, setValue를 리턴하고 초기 state값을 정하는 Hook

 

- 기존 클래스형 컴포넌트

 

- 함수형 컴포넌트로 변경