상태관리 (state) 코드 ++

 

# setState에서 조건부로 키값 추가하기

setState(prevState => ({
  ...prevState,
  ...(조건 ? { key2: "추가할 값" } : {}) // 조건 만족 시 key2 추가
}));

setState(prevState => ({
  ...prevState,
  ...(조건 && { key2: "추가할 값" }) // 조건 만족 시 key2 추가
}));

 

# setstate에  이전 state를 담을 때  차이점

1. setSearchInput({...searchInput, [name]: value})

• 동기적 방식: 현재 상태를 사용하여 새로운 상태 객체를 만들고 바로 업데이트합니다.
• 문제점: searchInput이 최신 상태가 아닐 수 있습니다. 상태가 비동기적으로 업데이트되기 때문에, 다른 컴포넌트나 이벤트에서 상태가 바뀐 후의 최신 상태를 반영하지 못할 수 있습니다.

2. setSearchInput(prev => ({ ...prev, [name]: value }))

• 비동기적 방식 (안전한 업데이트): prev를 사용하여 이전 상태를 바탕으로 업데이트하므로, 최신 상태를 반영합니다.
• 권장되는 방식: 여러 상태 업데이트가 일어날 때 안전하게 처리할 수 있습니다. React에서는 상태 업데이트가 비동기적으로 처리되기 때문에 prev 방식을 사용하는 것이 좋습니다.

 

 # useState를 훅처럼 사용하기

const useStateHandler = ()=> {
   const [state, setState] = useState<T>(initialState);
   const setStateHandler = (data: Partial<Record<keyof T, T[keyof T]>>) => {
    setState((prev) => ({ ...prev, ...data }));
  };
  return { state, setState, setStateHandler };
};

 

// 사용
const { state: projectInfo, setStateHandler: projectInfoHandler } = useStateHandler({
  name: '',
  description: '',
});

 

or

 

import { useState } from "react";

function useInput(initialValue) {
  const [value, setValue] = useState(initialValue);
  const onChange = (e) => setValue(e.target.value);
  
  return { value, onChange };
}

// 사용 예시
function Form() {
  const name = useInput(""); 
  const email = useInput(""); 

  return (
    <div>
      <input type="text" {...name} placeholder="이름" />
      <input type="email" {...email} placeholder="이메일" />
    </div>
  );
}