[React] 제어 컴포넌트

Input

예전의 웹페이지는 input의 값을 관리하는것을 이벤트 또는 DOM을 직접 접근하여 관리하였습니다.

input에 값을 입력시 onChange 이벤트가 발생하며 값을 받아 올 수 있습니다.

React

const handlerChange = (e) => {
	const nickname = e.target.value
}

<input type="text" onChange={hadlerChange} />

State

리엑트는 기존의 js와 같이 input의 값을 관리하는게 아닌 state를 통해 값의 변경을 감지하고 관리합니다.

리엑트를 사용하면서 input과 state를 둘다 관리해야하는 번거로움이 생깁니다.

React

const [nickname, setNickname] = useState("");

💡 프로그래밍는 “신뢰 가능한 단일 출처”를 지키도록 하는게 좋습니다.

제어컴포넌트

input에 이벤트를 리엑트가 제어하도록 하는것을 제어 컴포넌트라고 합니다.

input과 리엑트의 state를 둘다 관리하는것이 아닌 리엑트를 통해서만 값을 관리하고 수정하는것을 말합니다.

React

const [nickname, setNickname] = useState("");

const handlerChange = (e) => {
  	// const nickname = e.target.value
    setNickname(e.target.value);
};

const handlerSubmit = (e) => {
    e.preventDefault();
    console.log(nickname);
};

return (
    <form onSubmit={handlerSubmit}>
        <label>닉네임 :</label>
        <input type="text" name="nickname" value={nickname} onChange={handlerChange} />
        <button>제출</button>
    </form>
);

• 기존의 이벤트를 통해 값을 가져오고 값을 변수가아닌 state에 저장합니다.
• input의 값과 state는 신뢰 가능한 단일 출처로 동일해야 하고 리엑트에서 관리해야하기 때문에 state의 값을 value값으로 세팅합니다.
• value 속성값을 이용하여 다양한 form을 조작할 수 있습니다.

다중입력

실제로 form에 input은 하나만 존재하는것이 아닌 5~6개 이상 존재합니다.
그럴 경우 input에 해당하는 각각 state, 함수를 작성해야합니다.

input이 늘어날수록 중복되는 코드와 관리해야하는 state는 늘어납니다.

state가 많으면 많을 수록 개발자가 관리하고 신경써야하는 부분이 많아지기에 state는 되도록 적으면 좋습니다.

각각 State 관리

const [nickname, setNickname] = useState("");
const [password, setPassword] = useState("");

const handlerChange = (e) => {
		if(e.target.name === "nickname") setNickname(e.target.value) return;
    	if(e.target.password === "password") setPassword(e.target.value) return;
};

리엑트의 state는 모든 데이터를 넣을 수 있다고 정의되어 있습니다.
각각의 input state를 Object로 만들어 하나의 state로 관리할 수 있습니다.

Ojbect State

const [formInfo, setForminfo] = useState({
    nickname: "",
    password: "",
});

const handlerChange = (e) => {
    /* 
    const name = e.target.name;
    const info = { ...formInfo };
    info[name] = e.target.value;
    setForminfo(info);
    */

  	// es6 문법
    setForminfo({ ...formInfo, [e.target.name]: e.target.value });
};