함수형으로 react를 개발할 때, state 값을 관리하기 위해 사용하는 hook 이다.
개발을 계속해서 하다 보면, 규모가 커지게 되고 여러개의 state 값을 관리하게 된다.
이럴 때 공통적인 특징이 있는 state값이거나, 같은 타입을 가지는 state 값이면 효율적으로 하나의 setState로 state값을 관리할 수 있다.
먼저 여러개의 useState로 표현하게 되면 아래와 같다.
const [storeName, setStoreName] = useState<string>(""); const [userName, setUserName] = useState<string>(""); const [phoneNumber, setPhoneNumber] = useState<string>(""); const [address, setAddress] = useState<string>(""); const [email, setEmail] = useState<string>("");
현재 state값은 user의 정보에 대한 공통점과 다 같은 타입을 가지는 것을 알 수 있다. 이럴 때 하나의 setState로 상태를 관리해주면 효율적일 것이다.
아래와 같이, 객체로 useState를 활용해 주면, 쉽게 표현하고 사용할 수 있다.
const [inputs, setInputs] = useState({ storeName: "", userName: "", phoneNumber: "", address: "", email: "", });
하나의 setState로 다른 상태를 관리 할 수 있고, state 값들의 이름을 하나하나 고민하면 지어줄 필요가 없어진다.
state 값을 사용하거나, setState 를 하고 싶을 때 더 직관적이고 빠르게 상태를 불러오려면, 여기서 구조 분해 할당을 해주면 된다.
- 구조 분해 할당을 해서 더 짧게 state값을 불러올 수 있다.
const [inputs, setInputs] = useState({ storeName: "", userName: "", phoneNumber: "", address: "", email: "", }); const {storeName, userName, phoneNumber, address, email} = inputs
이제는 setState를 하나의 함수에서 관리 할 수 있도록 해보자.
- 어떤 input창에 작성되는 text를 state에 저장한다고 가정하고, 함수를 만들어 보았다.
const [inputs, setInputs] = useState({ storeName: "", userName: "", phoneNumber: "", address: "", email: "", }); const {storeName, userName, phoneNumber, address, email} = inputs const writeInfo = (e: any) => { const { value, name } = e.target; setInputs({ ...inputs, [name]: value, }); };