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#

https://velog.io/@rachel490/sdf-qd9oatqs

https://til.b41.kr/posts/TIL-react-setState-type-220715/