[React] 리액트 여러 인풋값 한 번에 관리/인풋을 하나의 객체로

리액트 여러 인풋 값 관리

 

여러 인풋값 관리에 대한 해결 방법을 고민하던 중, 찾아서 코드로 정리한다.

 

일반적으로 아래 방법을 사용한다.

<input type="text" name="title" onChange={(e)=>{setTitle(e.target.value)}} value={title}/>

 

 

하지만 이 글에서는 input값들을 하나의 객체 state형태로 관리할 것이다.

 

해결

 

우선 아래와 같이 useState를 생성한다. 각각 name값이 title, content, fileName인 인풋(텍스트 에어리어) 태그에 대해서 적용할 것이다.

 

let [inputs, setInputs] = useState({
        title:'',
        content:'',
        content2:''
    });

 

<input type="text" name="title" onChange={handleChange} value={inputs.title}/>
<textarea name="content" value={inputs.content} onChange={handleChange} />
<input name="content2" value={inputs.content2}  onChange={handleChange}/>

 

useState에 의해 초기 값은 빈 값을 주게 된다. 저기서 핵심은 onChange={handleChange} 부분이다.

function handleChange(evt:any){
        const {value, name} = evt.target;
        console.log(inputs);
        setInputs({
            ...inputs,
            [name]:value
        })
    }

위 함수는 js의 각종 기능을 상당히 사용하고 있다. 우선 …inputs으로 스프레드 연산을 한다. (…)을 사용한 부분이다.

 

스프레드 연산을 하면 각 값을 다시 할당할 수 있게 된다. 즉, 기존 값이 test:’1’, content:’2’라면, setInputs에 들어가는 객체 ({})에 아래와 같이 삽입된다.

{
    text:'1',
    content:'2'
}

다음으로 [name]:value 부분을 봐야한다. 여기서 []는 computed property이다. 컴퓨티드 프로퍼티는 컴파일 시 값이 결정된다. 즉, 키값에 변수를 삽입할 수 있다는 의미이다.

 

const {value, name} = evt.target;

위 부분에서 evt.target에는 이벤트를 일으킨 객체가 들어간다. 그리고 {value, name}은 구조 분해 할당으로 해당 객체 중 키값이 value인 것과 name인 것을 받아온다.

 

즉, name에는 실제 인풋 태그(텍스트 에어리어 태그) name 속성의 값(name=”title”)이 담기게 되고, value에는 실제 입력값이 담기게 된다.

 

즉 아래의 경우

<input type="text" name="title" onChange={handleChange} value={inputs.title}/>

[name] 에는 title이 value에는 이 태그의 실제 값이 담기게 된다는 것이다.

 

이 방법으로 여러 인풋 태그를 쉽게 관리 가능하게 되었다.

 

 

이걸 사용하는 것이다!

function handleChange(evt:any){
        const {value, name} = evt.target;
        console.log(inputs);
        setInputs({
            ...inputs,
            [name]:value
        })
    }