[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 18회차 미션

input 상태 관리

src > InputTest.js 생성

/* InputTest.js */
import React from 'react';

function InputTest(){
    return(
        <div>
            <input />
            <button>초기화</button>
            <div>
                <span>값 : </span>
                <b>Lorem ipsum</b>
            </div>
        </div>
    );
}

export default InputTest;

onChange 함수를 생성

/* InputTest.js */
const onChange = (e) => {
  console.log(e.target);
}
.
.
.

파라미터 e는 수정이벤트가 발생했을 때 그 수정이벤트에 대한 내용이 담긴다.
이 파라미터 e로 받아온 event객체 내부의 properties중 하나인 target은 event가 전달한 객체에 대한 참조를 의미한다.

실제로 렌더링 된 페이지의 input Box에 어떤 값을 입력하게되면 console에서 input에서 이벤트가 발생했음을 보여준다.

/* InputTest.js */
import React,{useState} from 'react';

function InputTest(){
    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>
                <span>값 : </span>
                <b>{text}</b>
            </div>
        </div>
    );
}

export default InputTest;

이제 console.log가 아닌 input element의 값을 {text}로 나타내주기 위해
useState Hook사용해서

const [text,setText] = useState('');

기본값은 빈 문자열로 주고

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

onChange, onReset 함수를 선언해준다.
이 때

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

에서 value={text}를 추가해주지 않으면 reset버튼 클릭시 input의 value값이 초기화 되지않음.

여러개의 input 상태 관리하기

기존에 작업하던 inputTest.js의 파일을

import React,{useState} from 'react';

function InputTest(){


    const onChange = (e) => {

    }

    const onReset = (e) =>{

    }
    return(
        <div>
            <input/>
            <button onClick={onReset}>초기화</button>
            <div>
                <span>값 : </span>
            </div>
        </div>
    );
}

export default InputTest;

위의 코드와같이 지워준다.

이어서 input에 placeholder라는 속성을 설정해준다

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

input이 여러개일 때 usestate를 여러개 사용하거나 onChange를 여러개 만들 수 도있지만. 이 방법이 가장 좋은 방법은 아니다.
더 좋은 방법은 input에 name이라는 값을 설정하고 이벤트 발생시 이 값을 참조하는것 이다.

usetstate에서는 기존에 문자열 값을 관리를 했지만 이제 여러개의 문자열을 가지고있는 객체의 상태로 관리를해줘야한다.

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

나중에 name값과 nickname값을 쉽게 사용할 수 있도록
비구조할당을 사용해 추출한다.

const {name, nickname} = inputs;

이제 return에있는 input태그에 name값을 설정해 주고 onChange까지 설정해준다.

<input name="name" placeholder="이름 onChange={onChange}"/>
<input name="nickname" placeholder="닉네임" onChange={onChange}/>

이벤트가 발생 했을때 기존에는 e.target.value 값을 조회했었다.

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

로 설정하고 어떻게 나타나는지 확인.
input을 수정하면 값이 변경됨을 이벤트객체가 알려준다.

console.log를 지워주고
onChagne에서 name,value를 미리 추출해준다. 사용의 편의를위해
리액트에서 객체를 업데이트 하기위해서는 기존의 객체를 복사해줘야한다.

const onChange = (e) => {
    const { name , value } = e.target;//onChagne에서 name,value를 추출
    setInputs({
        ...inputs,
        [name]: value,
    });
}

setInputs에서
...inputs 는 spread 문법으로 inputs의 값들이 그대로 복사되어 오게된다.

const nextInputs={
    ..inputs
}
nextInputs[name] = value;

를 선언해 줘도되는데 굳이 다른 라인에서 작업하지않고.

const nextInputs={
    ..inputs,
    [name] : value,
}

로 쓰면되는데, 그냥 name:value로 사용하면 name문자열 자체가 들어가게되지만 [name] 으로 사용하면 실제 name값이 가리키는것에 따라 다른 키값으로 변경되게된다.

이걸 그냥 합쳐서

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

setInputs에 객체를 넣어준다.

e.target에서 name,value로 추출하고
[name] 값은 nickname이 될 수도 있고 name이 될 수 도있다.

onReset에서는

setInputs({
    name:'',
    nickname:'',
});

로 name, nickname을 비워준다.

이제 추출된 내용들을 태그에 사용해주면된다.

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

우리가 객체 상태를 업데이트 할 때는 기존 상태를 복사하여 특정 값을 덮어 씌우고 그걸 새로운 상태로 설정을 해준다.
이러한 것을 불변성을 지킨다고한다.
불변성을 지켜줘야만 리액트 컴포넌트에서 상태가 업데이트 되었음을 감지할 수 있고 이에따라 필요한 렌더링이 발생하게 된다.

즉 객체 상태를 업데이트할 때는
spread 문법으로 한 번 객체를 복사해주고 상태를 덮어씌워서 상태를 업데이트 해줘야한다!

 

해당 내용은 아래 링크에서 수강할 수 있다.

프론트엔드 개발 올인원 패키지 with React Online. 👉https://bit.ly/2ETLEzm

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스