[React] useState 를 Dictionary 형태로 사용할때

구글링할때 how to update useState dictionary 이런 식으로 해서 나온것

 

함수형 컴포넌트에서 useState hook을 사용할 때, state에 한방에 저장하고싶다면 딕셔너리형태로 잡아주면 된다.

const [state, setState] = React.useState({"A":"", "B":""});

딕셔너리 안의 내용물에 대한 접근은 state.A, stat.B 의 형식으로 하면 된다.

 

그럼 업데이트는?

setState(prev => ({...prev, "A":"a"}));

이렇게 하면 state 안의 A만 업데이트된다. 이 상태에서 console.log(state)를 찍으면 {"A":"a","B":""} 가 나올것이다.

참고로 prev는 그냥 변경되기 전의 state를 말하는거라 다른 단어 써두 됨.

 

만약 로그인이나 회원가입페이지를 만드는 중이고 여러개의 input 에서 하나의 함수로 state에 값을 저장하고싶다면?

 

<input name="A"/>
<input name="B"/>

우선 이렇게 input 태그에 name 이란걸 정해준다.

 

const inputValue = (e) => {
	const { name, value } = e.target;
	setSignupInfo(prevState => ({...prevState, [name]:value}))
}

그리고 위와 같이 함수를 만들어준다. 이때 여기서의 name 과 input 태그 안의 name은 단순한 key 값으로 다른 명칭으로 변경해도 상관없으나 두 명칭은 동일해야한다.

 

e.target 은 해당 함수가 onChange로 실행될 input 태그 하나의 정보들을 말하며 그 안에는 name과 value가 들어가있다.

value는 사용자가 input 박스 안에 적을 내용물을 말하며 실시간으로 업데이트된다.

 

setSignupInfo(prevState => ({...prevState, [name]:value})) 에서  [name]:value 는 const { name, value } = e.target; 에서 나온 name 과 value 로 만들어진 딕셔너리의 새로운 내용물이다.

...prevState 는 위에서 서술한것처럼 변경되기 전의 state값을 말하는데, 해당 state 값에 이미 name과 같은 key 값이 있다면 해당 key와 value를 제거하고 새로운 key와 value를 넣어준다.

 

이제 input에 onChange 만 넣어주면 된다.

<input name="A" onChange={inputValue}/>
<input name="B" onChange={inputValue}/>

이러면 각각의 input의 value가 사용자에 의해 변경되면 state에 지정된 해당 input의 name 과 동일한 명칭의 key에 맞는 value 값만 업데이트된다. 끝.

 

 

참고) 회원가입페이지

import React from "react";

const Signup = () => {

    const [signupInfo, setSignupInfo] = React.useState({"username":"","password":"", "passwordCheck":"","nickname":""});

    const inputValue = (e) => {
        const { name, value } = e.target;
        setSignupInfo(prevState => ({...prevState, [name]:value}))
    }

    const signup = () => {
        console.log(signupInfo);
    }
    return (
        <React.Fragment>
            <h1>회원가입</h1>
            <section>
            <label>
                <h3>닉네임</h3>
                <input name="nickname" onChange={inputValue}/>
                <button>닉네임 중복확인</button>
            </label>
            <label>
                <h3>아이디 이메일형식</h3>
                <input name="username" onChange={inputValue}/>
                <button>이메일 중복확인</button>
            </label>
            <label>
                <h3>비밀번호</h3>
                <input name="password" onChange={inputValue}/>
            </label>
            <label>
                <h3>비밀번호 재확인</h3>
                <input name="passwordCheck" onChange={inputValue}/>
            </label>
            </section>
            <button onClick={signup}>회원가입</button>
        </React.Fragment>
    )
}

export default Signup;

 

회원가입버튼을 클릭하면 콘솔에 지금 상태의 state가 뜬다.