[ React ] [Chapter 11] 커스텀 Hook 제작

커스텀 Hook

 

리액트가 제공하는 훅을 이용해서 커스텀 훅을 제작할 수 있다.그리고 커스텀 훅을 이용해서 또 다른 커스텀 훅을 제작할 수도 있다.훅을 직접 만들면 쉽게 로직을 재사용할 수 있다.어떠한 언어이든 (특히 java) 코드중복은 죄약이다 라는 말이 있습니다.그러하든 이 재사용성이 큰 장점이 됩니다.리액트 내장 훅 처럼 커스텀 훅도 use로 시작하는게 좋습니다 관리에 유용합니다.전 챕터인 10의 코드를 재사용 할 겁니다.

그 코드에서 필요한 즉 커스텀 할 훅은

const [ member, setMember ] = useState(null);
    useEffect(() => {
        serverApi(memberIdx).then(it => setMember(it));
        return () => {
        console.log('return! ');
        };
    }, [memberIdx]);
    return member;

이겠죠.

그럼 이 훅을 따로 빼겠습니다.

하나의 파일을 만듭니다 예로 useMember.js로 만들겁니다.

function useMember(memberIdx) {
    const [ member, setMember ] = useState(null);
    useEffect(() => {
        serverApi(memberIdx).then(it => setMember(it));
        return () => {
        console.log('return! ');
        };
    }, [memberIdx]);
    return member;
}

이렇게 하나의 파일로 분리를 했는데 오류가 많이 날것입니다. 필요한 부분을 따로 빼봅시다.

import { useState, useEffect } from 'react';

function useMember(memberIdx) {
    const [ member, setMember ] = useState(null);
    useEffect(() => {
        serverApi(memberIdx).then(it => setMember(it));
        return () => {
        console.log('return! ');
        };
    }, [memberIdx]);
    return member;
}

const MEMBER01 = { id : 'test01Id', pwd:'123' };
const MEMBER02 = { id : 'test02Id', pwd:'124' };
function serverApi(memberIdx) {
  return new Promise(res => {
    setTimeout(() => {
      res(memberIdx % 2 ? MEMBER01 : MEMBER02);
    }, 600)
  })
}

export default useMember;

이와 같이 필요한 부분만 따로 빼고 App.js에는 따로 뺀 부분을 삭제 합니다.

import React, { useState, Fragment } from 'react';
import useMember from './useMember';

function App() {
  const [ count, setCount ] = useState(1);
  return (
    <div>
      <MemberComponent memberIdx={count}/>
      <button onClick={() => setCount(count + 1)}>클릭</button>
    </div>
  );
}

function MemberComponent({ memberIdx }) {
  const member = useMember(memberIdx);
  return (
    <div>
      {!member && <p>고객 정보...</p>}
      {member && (
        <Fragment>
          <p>{`id : ${member.id}`}</p>
          <p>{`pwd : ${member.pwd}`}</p>
        </Fragment>
      )}
    </div>
  );
}

export default App;

그러면 useMember()으로 손 쉽게 member 정보를 가져올 수 있습니다.
그러다 보니 굉장히 직관적이고 사용하기 편리하죠 보기도 편리하고 실제로 돌아가는건 비동기 방식이지만
코드상에는 동기 형식으로 보여서 코드 보기가 편리하죠.

저렇게 따로 빼두면 해당 파일로 자기 입맛대로 훅을 커스텀 할 수 있습니다.

기존 내장 훅을 이용해서 새로운 훅을 만들 수 있다는게 큰 장점입니다.

관련 글

저의 글을 읽어 주셔서 감사합니다. 오늘도 즐거운 하루 보내세요.

저의 글이 조금이나마 도움이 되셨다면 로그인이 필요 없는 공감♥ 한번 꾸욱 눌러주세요 하하~