input 상태관리(feat. useState)

단일 input 상태 관리

    import React, {useState} from 'react';

    export default function InputSample() {
        const [text, setText] = useState("");

        const onChange = (e) => {
            setText(e.target.value);
        }

        const onReset = (e) => {
            setText('')
        }
        return (
            <div>
                {/* value값이 중요한데,
                설정을 해야 초기화를 했을 때 input을 바꿨을 때
                태그 내부의 값이 비워지게 된다 */}
                <input onChange = {onChange}  value={text}/>
                <button onClick={onReset}>초기화</button>
                <div>
                    <b>값 : </b>
                    {text}
                </div>
            </div>
        )
    }

저는 이제야 위에 있는 코드가 어느정도 이해가 되더라구요!
다른 분들은 어떠세요? 이제 위에 코드는 쉽게 느껴지시나요?
그럼 간단히 코드 해석하고 지나 가볼까요!

import React, { useState } from 'react';

특히 이 부분은 너무 많이 봤죠! 다음부터는 이 부분의 설명은
생략 해도 될것 같네요! React 선언과 useState를 사용하겠다라고 선언한 부분이죠!
이 모든 기능은 react에서 재공을 해주기 때문에 from 'react' 가 있어요!
앞으로 같이 진행할 Hooks도 전부 react에 포함되어 있답니다!

    export default function InputSample() {
        const [text, setText] = useState("");

        const onChange = (e) => {
            setText(e.target.value);
        };

        const onReset = (e) => {
            setText('')
        };
        return (
            <div>
                <input onChange = {onChange}  value={text}/>
                <button onClick={onReset}>초기화</button>
                <div>
                    <b>값 : </b>
                    {text}
                </div>
            </div>
        )
    }

지금까지랑 다른 부분이 export default function 컴포넌트로 진행을 하고 있죠!
전에는 export default 컴포넌트명;으로 내보냈었는데요!
그냥 이렇게도 사용할 수 있는 방법이 있다 정도 주의 할 점은 내보낼 컴포넌트에
exprot default를 붙여주셔야 돼요! 아무 상관 없는 부분은 안되겠죠!

inpurt 태그의 상태(값)을 담을 text와 상태(값)을 변경할 setText 함수 선언을 해주었고
text에 들어갈 기본 상태(값)은 "" 공백으로 초기화를 시켜줬죠!

const onChange = (e) => { setText(e.target.value); };

이 부분은 input 안에 있는 값이 변경이 될 때 마다 text의 상태를 바꿔주는 메소드 구요!
e.target.value는 e는 이벤트를 발생시킨 객체의 정보를 담고 있는 이벤트 객체구요!
.target을 붙여주면 이벤트 객체를 발생시킨 DOM객체의 정보를 얻을 수 있습니다!
이 경우에는 input 태그를 갖고 오겠죠!
그 다음에 .value를 해주어 input에 입력된 값을 추출해 올 수 있습니다!
eventListener을 사용을 위해 event 객체는 꼭 알아두는게 좋아요!

const onReset = (e) \> { setText(''); } ;

이 부분은 초기화 버튼을 눌렀을 때 text에 저장된 상태(값)을 초기화시켜주는 작업을 합니다!
이번 코드는 단순하죠! 초기화는 text에 '' 빈 값을 넣어주시면 됩니다!
setText는 함수이기 때문에 setText();라고 사용하고 ()안에 text에 입력될 값을
('hello'); 이렇게 입력해주시면 되구요! 내가 만들 때 생각해둔 타입에 맞춰서 입력!

<input onChange = {onChange}  value={text}/>

input 태그에 onChange라는 eventListener에 이까 만들어둔 onChange를 입력해주세요!
전에도 말씀드렸지만 메소드 명만 입력해주세요! onChange()이렇게 입력하지 말아주세요!
마지막으로 value에는 앞으로 업데이트 될 text 값을 입력해줌으로서
text 값이 입력되었을 때 초기화 되었을 때 바로 바로 확인도 가능하고
text에 값도 제대로 저장할 수 있겠죠!

<button onClick={onReset}>초기화</button>

button 태그에는 버튼을 클릭했을 때 아까 만들어둔 onReset 메소드를 입력해 줍니다!
eventListener은 정해져 있으니 맞는 event를 지정해 주어야 겠죠!

<div>
	<b>값 : </b>
	{text}
</div>

여기서 중요한 부분은 { text } 부분이죠!
입력하고 저장되고 초기화된 text의 값을 바로 바로 출력해주는 부분 입니다!
React의 편함은 내가 새로고침을 하지 않더라도 자동으로 값이 업데이트 된다는 거겠죠!

이렇게 코드 정리를 해보았습니다!
다음에는 여러개의 input 상태 관리를 한 번 보도록 할까요!

여러개의 input 상태 관리

지금까지 useState에 문자열(String)과 숫자(number)을 사용했는데요!
이번에는 객체를 초기화하여 객체로서 상태 관리를 해보도록 하겠습니다!
주의! 객체 상태를 업데이트 할 때는 꼭 기존의 상태를 복사하고 나서 덮어 씌워 줘야 됩니다!
그래야 새로운 상태를 설정 해주었을 때 불변성을 유지하며 상태가 업데이트 되었음을 감지하고
필요한 렌더링이 발생합니다!

import React, {useState} from 'react';

export default function InputSample() {
	const [inputs, setInputs] = useState({
						name : '',
                				nickname : '',
					});

	const {name,nickname} = inputs;
            
	const onChange = (e) => {
					const { name, value } = e.target;

                			setInputs({
                    					...inputs,
                    					[name] : value,
                				});
            			};

	const onReset = (e) => {
                		setInputs({
                    				name : '',
                    				nickname : '',
                			});
            			};
                        
	return (
		<div>
			<input
                		name="name"
                            	placeholder="이름"
                                onChange={onChange}
                                value={name}
                    	/>
                    	<input
                    		name="nickname"
                    		placeholder="닉네임"
                    		onChange={onChange}
                    		value={nickname}
                    	/>
                    	<button onClick={onReset}>초기화</button>
                    	<div>
	                        <b>값 : </b>
	                        {name} ({nickname})
                        </div>
                </div>
            )
        };

const [inputs, setInpusts ] = useState({
	name : '',
    	nicname : '',
});

상태를 객체로 관리할 때 다른 점은 초기화 부분입니다!
지금까지 초기화 할 때 내가 원하는 타입을 입력해주었듯이 객체를 입력해주시면 되구요!
객체를 입력할 때는 {} 중괄호를 사용해주시면 되구요!
객체 안에 property : value을 지정해주시면 되겠죠!
이번에는 input에서 이름과 닉네임을 받아 올거기 때문에
객체에도 name과 ninckname을 만들어주고 '' 공백으로 초기화해줄 겁니다!

const {name,nickname} = inputs;

객체 비구조화 할당을 해줄거에요!
매번 inputs.name, inputs.nickname 이렇게 입력하는건 비효율 적이기 때문이죠!
객체이기 때문에 {} 중괄호 안에 inputs 안에 있는 property를 갖고 나옵니다!
동일하게 해주셔야 되는거 아시죠!

const onChange = (e) => {
			const { name, value } = e.target;

                	setInputs({
                    			...inputs,
                    			[name] : value,
                		});
            		};

위에 단일에서 했던것과 같이 input 태그 내의 value 값이 변경 될 때
inputs 안에 있는 name, nickname 값을 변경해줄 거에요!
이번에는 e.target에서 갖고 오는 값이 value 뿐만이 아니라 name도 추가되었죠!
name이 하는 역할은 name 값을 업데이트 할 것인지 nickname 값을 업데이트 할것인지
구분을하기 위해서 태그의 name 값을 갖고 올 예정입니다!
그리고 setInput({})에서 ...inputs가 보이시죠!
...은 스프레드 연산자라고 하여 inputs가 갖고 있는 기존 값을 펼쳐줍니다!
그러고 나서 태그에서 갖고온 name : value 값으로 업데이트를 해주는데요!
이렇게 전에 있던 inputs 값을 갖고 옴으로서 내용이 수정이 되었다라는 점을
알려주어 렌더링이 진행 할 수 있도록 하겠죠!
그리고 [name]으로 입력을 하면 name의 값이 name 또는 nickname을 구별 할 수 있게 해줍니다!

const onReset = (e) => {
                	setInputs({
                    			name : '',
                    			nickname : '',
                		});
            		};

reset은 처음에 inputs 값을 초기화했을 때랑 갖죠!
안에 값을 비어주는 역할을 해주기 때문에 그냥 빈값으로 입력해주시면 됩니다!
위에 초기화랑 동일하다라고 생각하시면 되겠죠!

<div>
		<input
                	name="name"
                        placeholder="이름"
                        onChange={onChange}
                        value={name}
                />
               	<input
                    	name="nickname"
                    	placeholder="닉네임"
                    	onChange={onChange}
                    	value={nickname}
                />
               <button onClick={onReset}>초기화</button>
               <div>
	       		<b>값 : </b>
	                {name} ({nickname})
               </div>
</div>

이번에는 input에 많은 값을 입력해주었는데요!
name은 name 또는 nickname으로 각 각 구분을 해줄거구요!
placeholder은 미리보기 같은 기능으로 흔히 input에 입력할 값을 사전 통보 해줄 수 있습니다!
onChange는 동일한 메소드를 입력해 줄거구요!
value는 각 각 name, nickname을 입력해주면 input 선언 끝!
주의 해야 할 점은 name부분 입니다! name의 값으로 객체에 입력을 해줄거기 깨문에 주의!

input 태그 말고는 동일하다고 보시면 됩니다!

여기까지 input 태그의 상태 관리에 대해서 간단하게 알아 보았습니다!
앞으로 배워야 할것은 산더미! 그러니 앞에 배운 내용을 잘 복습 해야겠죠!
그러기 위해서 저도 이렇게 작성하고 있는 거구요!
여러분 모두 파이팅!