[React] state 변경 공통화 하기

리액트를 사용하면서 state가 여러개 일 때 각각 해줬었는데, 왜 공통화할 생각을 한번도 안했는지 반성했다.

 

내가 평소 사용하던 코드

const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");

return (
    <>
    	<input 
            name="name"
            value={name}
            onChange={(e) => {
            	setName(e.target.value);
            }}
        />
        ...
    </>
)

 

이렇게 해왔는데, 이러한 코드를 공통화 하면,

 

// const [name, setName] = useState("");
// const [email, setEmail] = useState("");
// const [password, setPassword] = useState("");
const [state, setState] = useState({
    name: "",
    email: "",
    password: "",
});

return (
    <>
    	<input 
            name="name"
            value={name}
            onChange={(e) => {
                setState({
                    ...state,
                    name: e.target.value,
                    email: state.email,
                    password: state.password,
                });
            	// setName(e.target.value);
            }}
        />
        ...
    </>
)

 

이렇게 하면 변수를 state하나로 관리가 되니 좀 더 깔끔하다.

하지만 이것도 변수가 10개 라면 지저분해진다.

 

한 번 더 공통화를 진행하면

 

// const [name, setName] = useState("");
// const [email, setEmail] = useState("");
// const [password, setPassword] = useState("");
const [state, setState] = useState({
    name: "",
    email: "",
    password: "",
});

const allChangeState = (e) => {
    setState({
        ...state,
        [e.target.name]: e.target.value,
    });
};

return (
    <>
    	<input 
            name="name"
            value={name}
            /* onChange={(e) => {
                setState({
                    ...state,
                    name: e.target.value,
                    email: state.email,
                    password: state.password,
                });
            	// setName(e.target.value);
            }} */
            onChange={allChangeState}
        />
        ...
    </>
)

 

이렇게 onChange가 한줄로 끝난다.

주석을 다 지우고 나면,

 

const [state, setState] = useState({
    name: "",
    email: "",
    password: "",
});

const allChangeState = (e) => {
    setState({
        ...state,
        [e.target.name]: e.target.value,
    });
};

return (
    <>
    	<input 
            name="name"
            value={state.name}
            onChange={allChangeState}
        />
        ...
    </>
)

 

훨씬 깔끔하다.

리액트 네이티브에서도 코드를 수정해야겠다.