Input 상태 관리하기

작업하고 있는 폴더안에서 component폴더를 만들고 PhoneForm.js를 만들어 놓는다.(다른 파일들과 분리시키기 위해서)

컴포넌트를 작성해준다. 그리고 reactjs code snippet을 확장프로그램에서 설치를 해주면 JS에서 rcc라고 입력을 하면 클래스 형태로 만들어진 컴포넌트를 만들어 줄 수 있다. 그리고 rsc라고 입력하면 함수형 컴포넌트를 만들 수가 있다.

// rcc 클래스 컴포넌트
import React, { Component } from 'react';

class dadada extends Component {
    render() {
        return (
            <div>
                
            </div>
        );
    }
}

export default dadada;

임시로 PhoneForm이라고 입력해놓고 app.js애서 import해준다. 직접 import 하기보다는 div사이에 PhoneForm을 입력하면 자동으로 import가 완성된다. 

import React, { Component } from 'react'; 
import PhoneForm from './components/PhoneForm';


class App extends Component {
  render() {
    return (
      <div>
        <PhoneForm />
      </div>
    );
  }
}

export default App;

PhoneForm컴포넌트로 돌아와서 form을 만들어주고 내부에 input을 만들어 준다.

import React, { Component } from 'react';

class dadada extends Component {
    render() {
        return (
            <form>
                <inputn/>
            </form>
        );
    }
}

export default dadada;

input의 상태를 관리하는 방법은 상태 state를 정의해준다. state에 name이라는 값을 넣어주고 input에서 변경 이벤트가 발생될 때 처리할 함수를 만들어준다.

handleChange함수를 만들어 (e)라는 객체를 파라미터로 받아올 것이고 이벤트 객체로써 여기서 어떻게 수정할 건지를 알 수 있다. 밑에서 input이 이벤트 타겟이고 input이 가지고 있는 value값을 setState를 통해서 name값을 설정해 주는 것이다.

import React, { Component } from 'react';

class dadada extends Component {

    state = {
        name: '',
    }

    handleChange = (e) => {
        this.setState({
            name: e.target.value
        });
    }
    render() {
        return (
            <form>
                <inputn/>
            </form>
        );
    }
}

export default dadada;

그리고 input에다가 onChange를 넣어주는데 input에서 값이 변경될 때마다 name값이 바뀐다. 그리고 value값도 설정을 해주면 this.state.name이라고 지어준다.

    render() {
        return (
            <form>
                <input onChange={this.handleChange} value={this.state.name}/>
                {this.state.name}
            </form>
        );
    }
}

 input을 하나 더 추가해주고 placeholder을 추가해주는데 placeholder은 아무것도 입력되지 않았을 때 보여주는 값이다.

현재 이 input같은 값이 state쪽에서 관리가 되지 않는다. 지금까지는 handleChange가 발생했을 때 name값을 수정하도록 했다.

render() {
        return (
            <form>
                <input placeholder="이름" onChange={this.handleChange} value={this.state.name}/>
                <input placeholder="전화번호" />
                {this.state.name}
            </form>
        );
    }

state에 phone이라는 값을 추가해주고 두번째 input값에 this.state.phone을 넣어준다. 여기서 onchange를 설정하는 방법은 일단 여러 input을 관리할려면 name값을 설정해 줘야 한다. 각 input에다가 name값을 넣어준다.

 

그리고 위에서 name값이 들어갔었는데 이것을 [e.target.name]으로 바꿔준다. 그러면 name이라고 있는자리에 state에 name이라는 키워드 대신에 input에 있는 name값이 [e.target.name]에 들어오게 된다. 

 

그래서 input이 변경되면은 name값이 e.target.name으로 들어와서 state에 name이 수정되는 것이고 만약에 phone이 값이 수정되면은 phone쪽에 e.target.name이 들어가져서 수정되는 것이다.

import React, { Component } from 'react';

class PhoneForm extends Component {
    state = {
        name: '',
        phone: '',
    }
    handleChange = (e) => {
        this.setState({
            [e.target.name]: e.target.value
        });
    }
    render() {
        return (
            <form>
                <input
                name="name" 
                placeholder="이름" 
                onChange={this.handleChange} 
                value={this.state.name} 
                />
                <input
                name="phone"
                placeholder="전화번호"
                onChange={this.handleChange} 
                value={this.state.phone}
                />
                <div>
                    {this.state.name} {this.state.phone}
                </div>
            </form>
        );
    }
}

export default PhoneForm;

 지금까지 state를 통해서 input의 값을 변경하는 방법에 대해서 알아보았다. 이제 input값을 App.js에 전달하는 방법에 대해서 알아보자.

 

 

 

<출처 : velopert(김 민준) 누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌>

https://www.inflearn.com/course/react-velopert/dashboard

누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌 - 인프런 | 강의

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer

객체 초기자 - JavaScript | MDN