useConditionalState라는 커스텀 훅 ?
2025. 5. 28. 19:30ㆍJS
const [rowSelection, setRowSelection] = useConditionalState({}, {}, [
offset,
sort,
]);
table에서 해당 row를 선택했을때의 상태관리를 하는 useConditionalState라는 커스텀훅을 사용하였다.
보면 useState와 유사하면서 특정 의존성이 변경될때 조건부로 상태를 업데이트하는 훅이다.
첫번째 인자에는 초기 상태값, 두번째 인자에는 상태 업데이트 조건 함수 혹은 직접 설정할 값을 넣고,
마지막 인자에는 의존성 배열을 넣는다.
쉽게 말하자면 useState 와 useEffect를 합쳐놓은 느낌?
위 코드에서 보면 의존성 배열에 들어있는 offset,sort가 변경될때마다 '{}'로 초기화를 해주고 있는 것이다.
다음 페이지로 넘어갔을때 이전 페이지에서 눌렀던 row가 유지되는게 아니라 초기화가 되어야하기 때문이다!
// 상태와 초기 렌더링 여부
const [state, setState] = React.useState<T>(initialState);
const isFirstRender = React.useRef(true);
const useConditionalState = <T,>(
initialState: T,
updateCondition?: UpdateConditionFn<T> | T,
dependencies?: React.DependencyList
): [T, React.Dispatch<React.SetStateAction<T>>] => { }
두번째 인자인 updateCondition에는 '상태를 한번에 업데이트 하는 함수' 로직을 넣는다.
이때 업데이트 해야할게 값인지 함수인지에 따른 경우를 설정해준다.
const updateStateConditionally = React.useCallback(
(condition: UpdateConditionFn<T> | T) => {
setState((prevState) => {
// 함수인 경우
if (typeof condition === "function") {
const nextState = (condition as UpdateConditionFn<T>)(prevState);
// null이면 업데이트 안함
if (nextState === null) return prevState;
// 값이 변경되어야만 업데이트
return hasChanged(prevState, nextState) ? nextState : prevState;
}
// 값인 경우(직접 설정)
return hasChanged(prevState, condition) ? condition : prevState;
});
},
[hasChanged]
);
마지막 인자인 의존성 배열은 이 값이 바뀔때마다 updateCondtion을 실행하게 된다!
이때 useEffect를 사용하게 되는 것이다.
useEffect(()=>{
if (isFirstRender.current) {
isFirstRender.current = false;
return;
}
if (!updateCondition) return;
updateStateConditionally(updateCondition);
},[])
return [state,setState];
}
이때 초기 렌더링은 스킵한다.
'JS' 카테고리의 다른 글
깊은 복사 ? 얕은 복사? (0) | 2025.05.29 |
---|---|
useTransition (1) | 2025.05.28 |
[JS] 배열 생성하는 방법 (0) | 2025.04.22 |
[react] useWatch vs watch (0) | 2025.03.04 |
[react] "Cannot find module './*.style.scss'" (1) | 2025.01.30 |