리액트(ReactJS) 전화번호부 만들기 (1)

해당 게시물은 인프런의 Velopert님의 유료 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻

 

첫 번째, 입력받는 컴포넌트 생성

먼저 만들 컴포넌트는 PhoneForm이다. 해당 컴포넌트에서 사용자의 이름과 전화번호를 입력받는다. 우선, src 디렉토리 내부에 'components'라는 하위 디렉토리를 생성하고 그 안에 PhoneForm.js 파일을 생성한다. 

// src/components/PhoneForm.js

import React, { Component } from 'react';

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

export default PhoneForm;

input 태그의 onChange는 input 태그의 값이 바뀔 때 마다 발생하는 이벤트이다. onChange 이벤트가 발생하면 handleChange 함수가 호출된다. 이때, handleChange 함수의 e.target.value를 통해 이벤트가 발생한 input 태그의 현재 텍스트가 name 속성에 담긴다. 데이터를 등록한 후 name 값을 다시 공백으로 초기화해야 하므로 state의 name을 ' '으로 초기화하고, 그 값을 value에 설정해두었다. 하단에는 name 값이 잘 바뀌고 있는지 확인할 수 있도록 <div> 태그 안에 this.state.name 값을 렌더링 해주었다.

그 결과는 아래 이미지와 같다.

전화번호 입력을 위한 input을 하나 더 추가해보겠다. 이때, 입력받는 태그인 input이 여러 개라면 요청을 어떻게 처리해야할까?

// src/components/PhoneForm.js

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
          placeholder="이름"
          value={this.state.name}
          onChange={this.handleChange}
          name="name"
        />
        <input
          placeholder="전화번호"
          value={this.state.phone}
          onChange={this.handleChange}
          name="phone"
        />
        <div>{this.state.name} {this.state.phone}</div>
      </form>
    );
  }
}

export default PhoneForm;

또 다른 이벤트 핸들러 함수를 생성할 수도 있지만, 더 나은 방법이 있다. 바로 input 태그의 name 속성을 사용하는 것이다. render 함수를 보면 각 input에 name 값을 "name", "phone"으로 구분했다. 이때, name 속성 값은 e.target.name을 통해 조회할 수 있다. 

 

자식 컴포넌트에서 부모 컴포넌트로 정보 전달하기

이제 state에 있는 값들을 부모 컴포넌트인 App.js에게 전달해야한다. 부모 컴포넌트에서 메소드를 만들고 이 메소드를 자식 컴포넌트에게 전달한 다음 자식 컴포넌트 내부에서 호출하는 방식을 사용한다. 필자는 App에서 handleCreate라는 메소드를 생성하고 이를 PhoneForm에게 전달해주겠다. 그리고 PhoneForm 컴포넌트에 버튼을 만들어 submit이 발생하면 props로 받은 함수를 호출해서 부모 컴포넌트인 App.js에서 파라미터로 받은 값을 사용할 수 있도록 할 것이다.

// src/App.js

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

class App extends Component {
  handleCreate = (data) => {
    console.log(data);
  }
  
  render() {
    return (
      <div>
        <PhoneForm
          onCreate={this.handleCreate}
        />
      </div>
    );
  }
}

export default App;

 

그 다음에는 PhoneForm.js에서 버튼과 onSubmit 이벤트를 설정하겠다.

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

class PhoneForm extends Component {
  state = {
    name: '',
    phone: ''
  }
  
  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    })
  }
  
  handleSubmit = (e) => {
    // 페이지 리로딩 방지
    e.preventDefault();
    // 상태값을 onCreate 를 통하여 부모에게 전달
    this.props.onCreate(this.state);
    // 상태 초기화
    this.setState({
      name: '',
      phone: ''
    })
  }
  
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          placeholder="이름"
          value={this.state.name}
          onChange={this.handleChange}
          name="name"
        />
        <input
          placeholder="전화번호"
          value={this.state.phone}
          onChange={this.handleChange}
          name="phone"
        />
        <button type="submit">등록</button>
      </form>
    );
  }
}

export default PhoneForm;

handleSubmit 함수의 e.preventDefault()라는 함수를 호출했다. 이것은 원래 이벤트가 해야하는 작업을 방지시킨다는 의미이다. 원래 form에서 submit이 발생하면 페이지를 재로드 하는데, 그렇게 되면 현재 상태를 잃어버리게되므로 e.preventDefault()를 통해 방지했다. 그 다음에는 props로 받은 onCreate 함수를 호출하고 상태값을 초기화해주었다. render 부분에서는 submit 버튼을 만들고, form 부분에 onSubmit 이벤트를 등록해주었다.

 

 

velopert.com/3634

누구든지 하는 리액트 6편: input 상태 관리하기 | VELOPERT.LOG