15.4.3 useToggle - 맞춤법 검사 완료

15.4.3.1 useToggle Hook이란?

토글이란 두 가지 상태만을 가지고 있어 서로 다른 값으로 전환할 수 있는 기능입니다. 이렇게 두루 사용되는 토글 기능을 일일이 동일한 로직을 반복하여 쓰는 것보다 커스텀 훅으로 만들어 사용한다면 유용하게 재사용할 수 있습니다. useToggle Hook은 체크박스는 물론 다크 모드 전환이나 모달 창 열기 등의 전환이 가능한 작업을 수행하려는 경우에 유용하게 사용할 수 있는 훅 입니다.

토글 로직의 재사용을 위한 useToggle 커스텀 훅은 아래와 같이 구현할 수 있습니다.


import { useState } from "react";

const useToggle = (initialValue = false) => {
  const [value, setValue] = useState(initialValue);

  const toggleValue = () => { setValue(!value) };

  return [value, toggleValue];
};

export default useToggle;

useToggle.js

useToggle 훅을 사용하면 toggle을 관리하는 코드마다 동일한 로직을 반복할 필요 없이 useToggle 훅을 가져와서 재사용할 수 있습니다. useToggle 훅은 매개변수로 true 또는 false인 boolean 값을 전달하여 상태를 반대 값으로 전환 시킵니다. 매개변수로는 초깃값을 받으며, 값이 없을 경우 기본값으로 false가 지정됩니다.

그리고 현재 토글의 상태를 나타내는 state 변수와 토글의 상태를 전환시키는 함수를 설정하여 이를 배열로 반환합니다. 그렇기 때문에 useToggle 훅을 사용하면 토글을 설정하려는 상태 값을 기억하고 이를 전달할 수 있습니다.

15.4.3.2 useToggle 커스텀 훅 적용하기

useToggle 훅을 사용하여 체크박스를 클릭 함에 따라 텍스트가 변경되는 첫 번째 예제와 버튼을 클릭 함에 따라 리스트를 확인하고 숨길 수 있는 두 번째 예제를 통해 useToggle 훅에 대해 알아보겠습니다.

먼저 useToggle 훅을 import 해서 사용할 수 있도록 useToggle.js 파일을 하나 새로 생성합니다.


import { useState } from "react";

const useToggle = (initialValue = false) => {
  const [value, setValue] = useState(initialValue);
}

useToggle.js

useToggle 함수는 boolean 값을 매개변수로 사용하여 초깃값을 전달합니다. 토글의 상태를 알아내는 value라는 state 변수와 이 state 변수를 관리하는 함수 setValue를 배열에 담아 선언해 주었습니다. 그리고 useState Hook의 인자로 초깃값을 전달해 주고, useState를 Import 해줍니다.

이제 토글의 상태를 알아내는 value와 토글의 상태를 전환시키는 함수 setValue를 통해 토글의 상태를 변경할 수 있습니다.


import { useState } from "react";

const useToggle = (initialValue = false) => {
  const [value, setValue] = useState(initialValue);

  const toggleValue = () => { setValue(!value) };

  return [value, toggleValue];
};

useToggle.js

다음으로는 useToggle을 핸들링하는 toggleValue라는 함수를 만들어주겠습니다. toggleValue 함수에는 콜백 함수로 토글의 상태를 전환시키는 함수 setValue 안에 토글의 상태를 알아내는 state 변수 value를 담아 값을 갱신합니다. 이를 통해 toggleValue 함수는 토글의 상태를 반대 값으로 전환시키는 스위치 역할을 하게 됩니다.

그리고 state 변수 value와 toggleValue 함수를 배열에 담아 반환합니다.


import { useState } from "react";

const useToggle = (initialValue = false) => {
  const [value, setValue] = useState(initialValue);

  const toggleValue = () => { setValue(!value) };

  return [value, toggleValue];
};

export default useToggle;

useToggle.js

그리고 마지막으로 useToggle을 export 해주면 App.js 파일에서 useToggle 훅을 사용할 수 있습니다.

useToggle 커스텀 훅을 완성시켰으니 이제 App.js 파일에서 useToggle 훅을 적용해 보겠습니다. 우리는 체크박스를 클릭 함에 따라 텍스트가 변경되는 코드와 버튼을 클릭 함에 따라 리스트를 확인하고 숨길 수 있는 코드를 작성해야 하므로, App 함수 안에 서로 다른 상태 값이 담긴 useToggle 훅을 두 번 사용하겠습니다.


import useToggle from "./useToggle";

function App() {
  const [isChecked, setIsChecked] = useToggle();
  const [isListOpen, setIsListOpen] = useToggle();

return;
}

export default App;

App.js

위와 같이 체크박스에 사용될 isChecked 변수와 리스트를 확인하는 버튼에 사용될 listOpen이라는 state 변수를 각각 선언해 주었습니다. useToggle의 초깃값은 값이 비어있을 경우 false가 기본값으로 지정됩니다.

예제 1


function App() {
  const [isChecked, setIsChecked] = useToggle();

return (
<>
	<h3>음료를 주문하시겠어요? 🥤</h3>
  <label for='check'>
    <input
      type='checkbox'
      id='check'
      onChange={setIsChecked}
    />
    {isChecked ? "네" : "아니요"}
  </label>
</>
	);
}

App.js

먼저 사용자에게 정보를 입력받을 수 있도록 input 태그를 작성하고 체크 박스를 생성하기 위해 type 속성을 ‘checkbox’로 지정해 주었습니다. 그리고 체크박스를 클릭 함에 따라 텍스트를 변경시켜주기 위해 onChange 이벤트에 setIsChecked 함수를 추가해 주었고, 체크박스를 클릭할 때마다 state 변수 isChecked의 값이 state 변수 isChecked의 값이 바뀌어 텍스트가 변경될 것입니다.

체크박스를 선택하기 전까지는 위와 같이 “아니요”라는 텍스트가 확인됩니다.

체크박스를 선택하면 위와 같이 “네”라는 텍스트로 변경된 것을 확인할 수 있으며, 체크박스를 클릭할 때마다 텍스트가 반복적으로 변경되는 것을 확인할 수 있습니다. 이렇게 useToggle 훅을 사용하여 체크박스를 클릭 함에 따라 텍스트가 변경되는 첫 번째 예제를 확인해 보았습니다.

이번에는 useToggle 훅을 사용하여 버튼을 클릭 함에 따라 리스트를 확인하고 숨길 수 있는 예제를 확인해 보겠습니다.

예제 2


function App() {
  const [isListOpen, setIsListOpen] = useToggle();

return (
  <div>
    <h3>오늘의 추천 음료를 확인해주세요 🥤</h3>
    <button onClick={setListOpen}>오늘의 추천 음료 확인하기</button>
    {listOpen && (
      <ul>
        <li>달콤한 라이캣프라푸치노</li>
        <li>맛있는 개리쉐이크</li>
        <li>스파클링 웨이드에이드</li>
        <li>상큼한 빙키주스</li>
      </ul>
    )}
  </div>
  );
}

App.js

버튼 태그에 onClick 이벤트를 주어 setListOpen 함수를 추가해 주었습니다. 그리고 중괄호 안에 논리 연산자를 사용하여 state 변수 listOpen과 ul 태그 안에 감싸인 li 태그들을 함께 작성해서 조건부로 렌더링 될 수 있도록 하였습니다. 그러므로 이벤트 핸들러가 포함된 버튼이 클릭될 때마다 토글의 상태가 전환되어 리스트가 보이기도, 숨겨지기도 할 것입니다. 실행 결과를 확인해 보겠습니다.

버튼을 클릭하기 전에는 위와 같이 리스트가 확인되지 않습니다. 그러나 버튼을 클릭하면 아래와 같이 음료 리스트가 보이는 것을 확인할 수 있습니다. 이벤트 핸들러가 포함된 버튼이 클릭될 때마다 반복적으로 토글의 상태가 스위치 역할을 하며 반대 값으로 전환됩니다.

지금까지 useToggle 훅을 사용하여 버튼을 클릭 함에 따라 리스트가 보이고 숨겨지는 두 번째 예제까지 확인해 보았습니다. 이처럼 서로 다른 반대 값으로 전환하는 작업을 수행하려는 경우, useToggle 커스텀 훅을 만들어 재사용 한다면 toggle을 관리하는 코드마다 동일한 로직을 반복할 필요 없이 간단하게 구현할 수 있습니다.

위에서 작성했던 두 예제 코드를 App 함수에 같이 작성해 보면 아래와 같은 실행 화면을 확인할 수 있으며 최종 코드는 하단에서 확인할 수 있습니다.

15.4.3.3 최종 코드


import useToggle from "./useToggle";

function App() {
  const [isChecked, setIsChecked] = useToggle();
  const [isListOpen, setIsListOpen] = useToggle();

return (
<>
	<h3>음료를 주문하시겠어요? 🥤</h3>
  <label for='check'>
    <input
      type='checkbox'
      id='check'
      onChange={setIsChecked}
    />
    {isChecked ? "네" : "아니요"}
  </label>

  <div>
    <h3>오늘의 추천 음료를 확인해주세요 🥤</h3>
    <button onClick={setListOpen}>오늘의 추천 음료 확인하기</button>
    {listOpen && (
      <ul>
				<li>달콤한 라이캣프라푸치노</li>
        <li>맛있는 개리쉐이크</li>
        <li>스파클링 웨이드에이드</li>
        <li>상큼한 빙키주스</li>
      </ul>
    )}
  </div>

</>
  );
}
export default App;

App.js


import { useState } from "react";

const useToggle = (initialValue = false) => {
  const [value, setValue] = useState(initialValue);

  const toggleValue = () => { setValue(!value) };

  return [value, toggleValue];
};

export default useToggle;

useToggle.js