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

패스트캠퍼스 프론트엔드 인강 19일차 리액트에서 input상태를 어떻게 관리하는지 input이 하나일때와 여러개일때를 알아보았다.

 

기본셋팅

App.js

import React from 'react';
import './App.css';
import InputSample from './inputSample';

function App() {
  return (
    <InputSample/>
  );
}

export default App;

inputSample.js

import React from 'react'

export default function InputSample(){
        return(
            <div>
                <input/>
                    <button>초기화</button>
                <div>
                    <b>값</b>
                    어쩌고저쩌고
                </div>
            </div>
        );
}

랜더링을 하면 결과값

input상태를 관리하는방법

input안에 값을 넣으면 어쩌고저쩌고라는 말이 값에 따라 업데이트가되고

초기화버튼을 누르면 초기화되게 해보자.

 

onChange라는 함수를 작성해보자

이벤트객체에 안에있는 e.target이라는 값은 현재 input태그 이벤트가발생한 돔에대한 정보를 가지고있다.

e.target.value로 변경하면 input태그에 입력한 값이 console창에 출력된다.(현 돔이가지고있는 값이 출력된다)

 

이제 어제배운 setState를 추가해보자

import React, {useState} from 'react'

export default function InputSample(){
        const [text, setText] = useState('');
        const onChange = (e) => {
            setText(e.target.value)
        }
        return(
            <div>
                <input onChange={onChange} value={text}/>
                    <button>초기화</button>
                <div>
                    <b>값</b>
                    어쩌고저쩌고
                </div>
            </div>
        );
}

input태그에 value값을 추가해줘야  초기화를 시켜줄수있다.

onReset이라는 초기화함수를 만들어 onClick이벤트도 생성하면 초기화도 잘 작동된다.

import React, {useState} from 'react'

export default function InputSample(){
        const [text, setText] = useState('');
        const onChange = (e) => {
            setText(e.target.value)
        }
        const onReset = () => {
            setText('')
        }
        return(
            <div>
                <input onChange={onChange} value={text}/>
                <button onClick={onReset}>초기화</button>
                <div>
                    <b>값</b>
                    {text}
                </div>
            </div>
        );
}

input태그가 여러개일때 관리하는방법

리액트에서 객체를 업데이트할때는 꼭 이렇게한다.

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

...을통해 기존코드를 가져오고 [key값]을 통해 []안에 name혹은 nickname등이 바뀔수있다.

import React, {useState} from 'react'

export default function MultipleInput(){
        const [inputs, setInputs] = useState({
            name:'',
            nickname:'',
        });
        const {name, nickname} = inputs;
        const onChange = (e) => {
            const {name, value} = e.target;

            const nextInputs = {
                ...inputs,
                [name]: value,
            };
            setInputs(nextInputs);
        }
        const onReset = () => {
            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>
        );
}

https://bit.ly/31Cf1hp

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