[React CS] 디자인 패턴 2 - Custom hooks 패턴

안녕하세요.

디자인 패턴을 알아보는 시간을 가집니다.

 

지난시간에는 Presentation & Container 패턴을 알아가면서 예제로 적용 시켰습니다.

하지만 이 패턴은 1:1 = 로직 : 뷰 적용 방식으로 사용이 되는 형태로 구성 되어져 있으며 1개의 로직에서 여러개의 뷰를 활용하여 사용 하고 싶을 때 대비하여 적용을 시켜보고자 합니다.

 

이 것을 적용 시키는 패턴은 Custom Hooks 패턴이며, Custom Hooks 패턴의 대해서 대해서 알아봅니다.

 

 

먼저 리마인드로,  Presentation & Container 패턴을 적용 전과 적용 후의 대해서 구조를 정리해봅니다.

 

디자인 패턴(Presentation&Container) 적용 전과 후

 

 

 

Presiontation Component - UI 컴포넌트만 구성, Conatiner Component - 로직 부분만 구성

 

 

 

이후, 다음은 Custom Hook 패턴의 구조는 다음과 같습니다.

디자인 패턴 Custom Hooks

 

 

 

Custom Hooks 적용

 

<CustomHookComponent.tsx>

import { useEffect, useState } from 'react'

// 인터페이스 설정 - 이름
type NameInterface = {
  name: string
}

// 인터페이스 설정 - 나이
type AgeInterface = {
  name: string
}

// 인터페이스 설정 - 성별
type SexInterface = {
  name: string
}


// Container 컴포넌트 - 로직 처리
const CustomHookComponent = () => {
  const [name, setName] = useState<NameInterface>();
  const [age, setAge] = useState<AgeInterface>();
  const [sex, setSex] = useState<SexInterface>();

  const onNameChange = (e:any) => {
    const {name, value} = e.currentTarget;
    setName({
      [name] :value
    } as NameInterface)
  }
  
  const onAgeChange = (e:any) => {
    const {name, value} = e.currentTarget
    setAge({
      [name]: value
    } as AgeInterface)
  }

  const onSexChange = (e:any) => {
    const {name, value} = e.currentTarget
    setSex({
      [name]: value
    } as SexInterface)
  }

  // 테스트용
  useEffect(() => {
    console.log(name)
    console.log(age)
  }, [name, age])
  
  useEffect(() => {
    console.log(sex)
  }, [sex])

  return {
    onAgeChange,
    onNameChange,
    onSexChange,
  }
}

export default CustomHookComponent

 

 

 

<View1Component.tsx>

import CustomHookComponent from "./CustomHookComponent";

// View만 처리
const View1Component = () => {
  const {onNameChange, onAgeChange} = CustomHookComponent();

  return (
    <div>
      <form>
        <label>이름</label>
        <input type="text" name="name" onChange={onNameChange}></input>
        <br/>
        <label>나이</label>
        <input type="text" name="age" onChange={onAgeChange}></input>
        <br/>
      </form>
    </div>
  )
}

export default View1Component

 

 

 

<View2Component.tsx>

import CustomHookComponent from "./CustomHookComponent"

// View만 처리
const View2Component = () => {
  const {onSexChange} = CustomHookComponent()

  return (
    <div>
      <form>
        <label>성별</label>
        <input type="text" name="sex" onChange={onSexChange}></input>
        <br/>
      </form>
    </div>
  )
}

export default View2Component

 

 

<App.tsx>

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

 

 

실행 결과

 

 

 

 

 Custom Hooks.으로 디자인 패턴 한 경우

View1에서는 이름, 나이 만 데이터 존재

View2는 성별만 데이터 존재 합니다.