true/false toggle 메뉴 구현시 useReducer로 구현하기

기존 코드

// 컴포넌트
const [isEndDateOpen, setIsEndDateOpen] = useState<boolean>(false);

<div onClick={() => setIsEndDateOpen(!isEndDateOpen)}>
    + 종료 날짜 및 시간
</div>

<div onClick={() => setIsEndDateOpen(!isEndDateOpen)}>
    - 종료 날짜 및 시간
</div>

 

useReducer로 개선하기

// 컴포넌트

const [isEndDateOpen, setIsEndDateOpen] = useReducer(state => {
    return !state;
}, false);

<div onClick={setIsEndDateOpen}>+ 종료 날짜 및 시간</div>

<div onClick={setIsEndDateOpen}>- 종료 날짜 및 시간</div>

 

개선 후 장점

• 코드가 간결 해진다.
• useState를 사용해서 true/false 토글시에 useCallback으로 감싸주어야 하거나 해야될 때 가 있는데 useReducer를 이용하면 해결된다.

 

Reference

https://www.youtube.com/shorts/XBNOEHA4Kvg