5. 커스텀 훅 사용 경험
- 답변)
- 의도 : 커스텀 훅을 사용할 정도로 코드 퀄리티에 관심이 있는지 파악.
- 모범 답안 : 커스텀 훅을 사용한다면 기존의 컴포넌트 내부에 작성된 코드를 커스텀 훅을 만들어 정리하는 것으로 컴포넌트 내부를 좀 더 클린하게 정리할 수 있고, 만들어진 커스텀 훅을 좀 더 보편적으로 개선하여 다른 컴포넌트에서도 재사용할 수 있다. 또한 비즈니스 로직의 분리를 실현하여 의존성을 줄이고 유지 보수성을 높일 수 있는 등 다양한 장점이 있다.
사소한 단점으로는 커스텀 훅의 이름을 잘 지어서 다른 개발자들이 굳이 커스텀 훅의 내부를 들여다 보는 수고를 덜도록 신경써야 하는 것이다. 선언형 코드와 장단점을 공유하는 듯하다.
예를 들면, useLocalStorage 훅을 작성하여 기존에 로컬 스토리지에 저장하고 읽어올 때 반복되는 로직을 통합하여 재사용성을 목적으로 구현할 수 있다. 기존에는 JSON.parse나 JSON.stringify 같은 메서드를 매번 호출해서 읽고, 저장해야 했지만 이 커스텀 훅을 구현함으로써 기존의 useState와 같은 사용감을 만들게 된다.
- 커스텀 훅 useLocalStorage 구현
이 훅은 로컬 스토리지의 데이터를 읽고 저장하는 로직을 재사용 가능하게 만들어줍니다.
코드: useLocalStorage.js
jsx
코드 복사
import { useState, useEffect } from "react";
function useLocalStorage(key, initialValue) {
// state를 초기화하면서 로컬 스토리지 값을 읽어옴
const [storedValue, setStoredValue] = useState(() => {
try {
// 로컬 스토리지에서 값 가져오기
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
} catch (error) {
console.error("로컬 스토리지에서 데이터를 가져오는 중 오류 발생", error);
return initialValue;
}
});
// 로컬 스토리지에 데이터를 저장하는 함수
const setValue = (value) => {
try {
const valueToStore = value instanceof Function ? value(storedValue) : value;
setStoredValue(valueToStore);
window.localStorage.setItem(key, JSON.stringify(valueToStore));
} catch (error) {
console.error("로컬 스토리지에 데이터를 저장하는 중 오류 발생", error);
}
};
return [storedValue, setValue];
}
export default useLocalStorage;
2. useLocalStorage 훅 사용 예시
이제 이 커스텀 훅을 활용해 로컬 스토리지와 상태 관리를 쉽게 할 수 있습니다.
코드: ExampleComponent.js
jsx
코드 복사
import React from "react";
import useLocalStorage from "./useLocalStorage";
function ExampleComponent() {
// useLocalStorage를 사용하여 'name' 키로 데이터를 관리
const [name, setName] = useLocalStorage("name", "Guest");
return (
<div>
<h1>안녕하세요, {name}님!</h1>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="이름을 입력하세요"
/>
</div> );
}
export default ExampleComponent;
3. 코드 설명
useLocalStorage 훅
key와 initialValue를 받아 로컬 스토리지의 값을 읽고 초기화합니다.
값이 변경될 때 로컬 스토리지에 데이터를 저장합니다.
재사용성
다양한 컴포넌트에서 이 훅을 사용하여 로컬 스토리지를 간편하게 다룰 수 있습니다.
사용 편의성
기존 useState와 비슷한 형태로 사용할 수 있어 개발자가 직관적으로 사용 가능합니다.
4. 출력 결과
처음 페이지를 열면 로컬 스토리지에 "Guest"가 저장되고, 입력 필드를 통해 값을 변경하면 로컬 스토리지와 화면이 동시에 업데이트됩니다.
실행 예시
plaintext
코드 복사
안녕하세요, Guest님!
(입력 필드에 'John' 입력)
=> 로컬 스토리지에 'John'이 저장됨
=> 화면에 "안녕하세요, John님!" 표시
5. 장점
반복되는 로직(JSON.parse, JSON.stringify, 에러 처리 등)을 커스텀 훅에 통합해 코드 중복을 줄일 수 있습니다.
컴포넌트의 상태 관리와 로직이 분리되어 컴포넌트 코드가 더 클린해집니다.
유지 보수와 테스트가 용이합니다.
