노마드코더 React Hooks - 1

강의를 들으며 만들게 될 Hooks

Hooks	Description
useTitle	리액트 document의 title을 몇 개의 hooks와 함께 바꾸는 것
useInput	input 역할
usePageLeave	유저가 페이지를 벗어나는 시점을 발견하고 함수를 실행시킬 수 있는 훅
useClick	요소를 클릭하는 시점을 감지
useFadeIn	어떤 요소든 애니메이션을 요소 안으로 서서히 사라지게 만들어줌
useFullScreen	요소를 풀스크린으로 만들거나 일반 화면으로 돌아가게 함
useHover	어떤 요소가 hover 될 때를 감지
useNetwork	온라인 또는 오프라인 상태인지 감지
useNotification	notification API를 사용할 때 유저에게 알림을 보내줌
useScroll	스크롤을 사용할 때 감지
useTabs	웹사이트 메뉴 또는 무엇이든 tab을 사용하기 쉽게 만들어주는 것
usePreventLeave	유저가 변경사항이나 무엇이든간에 저장하지 않고 페이지를 벗어나길 원할 때 확인
useConfirm	usePreventLeave 와 비슷하지만 추가 기능이 존재
useAxios	axios 를 위한 wrapper

위 Hooks 들을 만들고 npm package 에 올리는 것까지 배워본다고 한다.

https://youtu.be/yS-BU6eYUDE

옛날 영상이지만 훅의 역사를 알기 위해 가볍게 시청하였다.

class 컴포넌트의 state 사용법과 훅의 사용을 비교함

useState() : 상태 변경 훅

useEffect() : 생명 주기 관련 훅

 

useState 를 활용한 커스텀 훅들

useInput

기본적으로 input 을 업데이트 하는 커스텀 인풋

const name = useInput("Mr.");
// ...

// 일반적인 사용법
<input type="" placeholder='Name' value={name.value}
 onChange={name.onChange} />
 
// 전개연산자로 나타내줄 때
<input type="" placeholder='Name' {...name} />

 

const useInput = (initValue) => {
  const [value, setValue] = useState(initValue);
  const onChange = evt => {
    setValue(evt.target.value);
  }
  return { value, onChange };
}

초기값을 받아주는 매개변수를 적어주고 해당 초기값을 시작으로하는 useState 훅을 사용

그다음 인풋의 onChange 이벤트 핸들러를 받아주는 함수를 받아 해당 value 를 바꿔주게끔 써주면 1가지 함수에 입력에 관련된 기능이 모이므로 깔끔해질 수 있다.

반환값으로 변환값과 onChange 이벤트를 반환 시켜서 사용해주면 됨.

커스텀 훅 만들기 쉽다!

 

useInput 에 검증 기능 추가해주기

const useInput = (initValue, validator) => {
  const [value, setValue] = useState(initValue);
  const onChange = evt => {
    const {
      target : {value}
    } = evt;
    let willUpdate = true;

    if(typeof validator === 'function') {
      willUpdate = validator(value);
    }

    if(willUpdate) 
      setValue(value);
  }
  return { value, onChange };
}

validator 라는 매개변수를 추가하여 해당 매개변수가 function 일때만 유효성 검증이 가능하게 변경했다.

  const maxLen = value => value.length <= 10;
  const name = useInput("Mr.", maxLen);

maxLen 라는 함수는 10글자가 넘어가면 false 를 반환하게 만들었으므로 인풋 필드에 10글자 이상 적지 못하게 된 것임

 

useTabs

const content = [
  {
    tab : 'Sec 1',
    content : 'lorem~~',
  },
  {
    tab : 'Sec 2',
    content : 'lorem~~2222',
  },
  {
    tab : 'Sec 3',
    content : '3333333',
  }
]

이렇게 탭이 존재하는데,

const useTabs = (initTab, allTabs) => {
  const [curTab, setTabs] = useState(initTab);
  if(!allTabs || !Array.isArray(allTabs)) return;

  return {
    curItem : allTabs[curTab],
    changeItem : setTabs,
  }
}

useTabs 의 구조는 초기값과 탭을 배열로 받아준다.

중간에 조건문은 받아준 탭이 배열이 아닌 경우 함수를 그냥 마쳐주는거고,

잘 들어맞는다면 현재 아이템의 정보값을 가지는 curItem 과 탭을 변경시켜주기 위한 changeItem 을 리턴한다.

  const { curItem, changeItem } = useTabs(0, content);

  return (
    <>
      <h1>UseTabs</h1>
      {content.map((el, idx) => 
        <>
          <button onClick={() => changeItem(idx)}>{el.tab}</button>
        </>)}
      <p>{curItem.content}</p>
    </>
  )

탭의 버튼이 눌릴 때마다 changeItem 이 되어야 하니 인덱스 값을 받아서 onClick 이벤트에 넣어주고 

정보를 출력하도록 해준다.