범부 개발자 아등바등 살아남기

 custom hook은 특정 상태 관리를 재사용하기 위해 사용자 임의로 만드는 hook입니다. 동일한 상태 관리 로직을 여러 컴포넌트에서 사용해야 할 때 유용합니다.

• 상태 관리, 변경 로직을 재사용하기 위한 사용자 정의 hook
• 여러 컴포넌트에서 동일한 상태 관리 로직을 사용할 때 유용

• "use"접두사 사용
  • 작성한 custom hook은 "use" 접두사를 붙여 custom hook이라는 것을 명시

• 기존 react hook 결합 가능
  • useState, useEffect 등 기존 hook과 결합하여 상태 관리 가능

• 재사용 용이
  • 여러 컴포넌트에서 동일한 상태 관리 로직이 필요할 때 재사용 용이
  • 전역 상태 관리와는 달리 여러 컴포넌트에서 동일한 상태를 유지할 필요가 없을 때 사용
  • 전역 상태와 동일한 상태 관리 로직을 구분하여 생각할 것

• 유지 보수성 향상
  • 하나의 상태에 대한 코드들을 모두 custom hook에서 관리하므로 문제 발생시 살펴봐야할 부분을 한정시킬 수 있음

• "use" 접두사를 붙여 custom hook 파일 생성
  • useState로 관리하고자 하는 상태 생성
  • 상태 관리 함수 생성
  • 외부에서 사용하고 하는 변수 반환

//useCounter.jsx

import React, { useState } from "react";

const useCounter = () => {

// 관리하고자 하는 상태 생성
  const [count, setCount] = useState(0);

// 상태 관리 함수 생성
  const handlePlus = () => {
    setCount((prev) => prev + 1);
  };

  const handleMinus = () => {
    setCount((prev) => prev - 1);
  };

// 외부에서 사용하고자 하는 변수 반환
  return { count, handlePlus, handleMinus };
};

export default useCounter;

• 해당 상태를 사용하고자 하는 컴포넌트에서 반환 값 할당 받아서 사용

import "./App.css";
import useCounter from "./customHooks/useCounter";

function App() {

// 반환 값 할당받기
  const { count, handlePlus, handleMinus } = useCounter();

  return (
    <div className="App" style={{ display: "flex" }}>
      <button onClick={handleMinus}>-</button>
      {count}
      <button onClick={handlePlus}>+</button>
    </div>
  );
}

export default App;

 container presenter는 react에서 쓰이는 디자인 패턴입니다. container는 상태, 데이터 관련 로직을, presenter는 UI 구성을 담당합니다.

• 하나의 컴포넌트를 container, presenter로 나눠서 작성
• container는 상태 혹은 데이터 로직을 관리하는 역할
• presenter는 화면의 레이아웃, 스타일을 담당. container로부터 넘겨 받은 데이터를 렌더링
• 따라서 container가 presenter를 감싸는 구조

• 유지보수성
  • UI 담당하는 코드와 데이터 로직 코드가 분리되어, 하나의 파일에 담겨있는 코드가 줄어들어 코드를 이해하기 쉬워짐

• 테스트 용이
  • 데이터 로직 테스트와 UI 테스트를 분리해서 진행 가능

• 작은 규모의 프로젝트일 경우 오히려 복잡해 질 수 있음

• hooks의 등장으로 상태, 생명 주기 관리가 간편해져 도입 의도 퇴색
  • 과거 클래스형 컴포넌트에서는 상태, 생명 주기 관리를 위한 코드가 너무 길었음
  • 그러나 hook, 함수형 컴포넌트의 등장으로 코드가 많이 간결해짐
  • hook을 사용하면 container와 presenter로 나누는 것보다 간결하게 표현할 수도 있으므로 무조건적인 사용은 지양해야함
  • 즉, 상황에 맞춰 사용할 것

• 만들고자 하는 컴포넌트 폴더를 생성

• container 컴포넌트 생성
  • 상태, 상태관리 함수 생성 후 presenter 컴포넌트로 내려 줌

/components/counter/CounterContainer.jsx

import React, { useState } from "react";
import CounterPresenter from "./CounterPresenter";

const CounterContainer = () => {
  const [count, setCount] = useState(0);

  const handlePlus = () => {
    setCount((prev) => prev + 1);
  };

  const handleMinus = () => {
    setCount((prev) => prev - 1);
  };

  return (
    <CounterPresenter
      count={count}
      handlePlus={handlePlus}
      handleMinus={handleMinus}
    ></CounterPresenter>
  );
};

export default CounterContainer;

• presenter 컴포넌트 생성
  • container에서 받은 상태, 상태관리 함수 적용
  • UI 작성

import React from "react";

const CounterPresenter = ({ count, handlePlus, handleMinus }) => {
  return (
    <div style={{ display: "flex" }}>
      <button onClick={handleMinus}>-</button>
      {count}
      <button onClick={handlePlus}>+</button>
    </div>
  );
};

export default CounterPresenter;

• 사용하고자 하는 곳에서 container 불러오기

import "./App.css";
import CounterContainer from "./components/counter/CounterContainer";

function App() {
  return (
    <div className="App">
      <CounterContainer></CounterContainer>
    </div>
  );
}

export default App;