DEV
[React] setState 잘 사용하기 (TypeScript 예제)
음대생개발자
2024. 1. 29. 15:28
const [ state, setState ] = useState(false);
// 이전 상태 사용 : 함수형으로 전달
setState(prev => !prev)
// 객체로 사용시
const [ state, setState ] = useState({
a: '',
b: 0
})
// 객체에서 한가지 키의 값만 바꾸고 싶다면
setState({…state, a: 'value'})
// 또는 key와 value를 변수로 지정하여 동적으로 바꾸면서 사용할 때
setState({…state, [key] : value})
setState(prev => {
return {
...prev,
[key] : value
}
}
// 배열로 이전 값 사용하기
const [ state, setState ] = useState([
1, 2
])
setState(prev => [...prev, newValue])
프로젝트에서 사용한 state 예제들
// TypeScript에서 props로 setState 함수 넘길 때 타입 지정
interface Props{
setState: React.Dispatch<React.SetStateAction<string>>;
}
// 예제 onChange 이벤트 : 여러 input 한번에 관리 가능
const inputValueHandler = (e: ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setInputValue((prevInputValue) => ({
...prevInputValue,
[name]: value,
}));
}
// 특정 id를 가진 댓글만 더보기 메뉴 뜰 수 있게 상태 관리
const [modify, setModify] = useState<{ [key: number]: boolean }>({});
...
<span // 더보기 아이콘
onClick={() => { setCommentMore((prev) => ({
[comment.commentsId]: !prev[comment.commentsId],
}));
}}>
...
{commentMore[comment.commentsId] && (
<CommentMoreUl>
<li onClick={() => { commentModifyHandler(comment.commentsId); }}>
수정
</li>
<li onClick={() => { deleteCommentHandler(comment.commentsId); }}>
삭제
</li>
</CommentMoreUl>
)}
*참고 사이트
https://react.dev/reference/react/useState#