<TIL-25> useState 하나로 state 관리하기

김건우·2020년 11월 12일
0

React Hook: useState

함수형으로 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,
        });
    };
profile
꾸준하게 공부하기

0개의 댓글