[누구든지 하는 리액트] 6. 인풋 상태 관리

Input 상태 관리하기

Reactjs code snippets

VSCode의 확장 프로그램인 "Reactjs code snippets"를 설치한다.
js파일에서 rcc라고 입력하면 class형태로 만들어진 컴포넌트를 한 번에 생성할 수 있다.
rsc라고 입력하면 함수형 컴포넌트를 한 번에 생성해준다.

state를 통해서 <input />의 값을 변경하는 방법을 알아보자.

import React, { Component } from 'react';

class PhoneForm extends Component {
   // <input />의 상태를 어떻게 관리하는지 알아보자.
   // 1. 우선 state를 만들어서 name이라는 값을 넣어서 상태를 정의해준다.
    state = {
        name: '',
        phone: '',
    }
    // 2. input에서 변경 이벤트가 발생할 때 처리할 함수를 만들어 준다.
    handleChange = (e) => { // e를 파라미터로 받아온다. 이것은 이벤트 객체이기 때문에 앞으로 어떻게 수정할 것인지를 알 수가 있다.
        this.setState({
            // name: e.target.value // 앞으로 name값이 어떻게 바뀔 것인지가 e.target.value에 들어있는 것이다.  // e.target는 <input />이다.
            [e.target.name]: e.target.value // name키워드 대신 <input />의 name값이 [e.target.name]으로 들어가지게 되는 것이다. (input태그가 여러개이기 때문에 이렇게 작성한 것.)
        })
    }
    render() {
        return (
            // <input />태그이기 때문에 value값을 설정해줘야한다. 그리고 값이 변화할 경우 발생할 이벤트를 onChange로 연결시켜줬다.
            // input이 여러개일 경우 관리하기 위해서 <input />태그에 name값을 설정해줘야 한다.
            <form> 
                <input 
                    name="name"
                    placeholder="이름" 
                    onChange={this.handleChange} 
                    value={this.state.name} 
                /> 
                <input 
                    name="phone"
                    placeholder="전화번호" 
                    onChange={this.handleChange}
                    value={this.state.phone} 
                />

                {/* input태그에 입력한 내용을 화면에 바로 찍어서 확인해보자. */}
                <div>
                    {this.state.name}  {this.state.phone}
                </div>
            </form> 
        );
    }
}

export default PhoneForm;

📂 [React] - [누구든지 하는 리액트] - [실습] - [contact-app] - [src] - [components] - [PhoneForm.js]

다음 강의에서는 <input />값을 App.js에 전달해주는 방법에 대해 알아보자.