더북(TheBook)

10.3.1 텍스트 입력 관련 상태 관리

 

우선 TodoInput 컴포넌트가 사용할 input 상태부터 관리합시다. App.js 파일의 stateinput 값을 정의하고, 이 input의 변경 이벤트를 처리할 handleChange 메서드를 만들고, 이것들을 TodoInput 컴포넌트의 props로 전달하세요.

src/components/App.js

import React, { Component } from ‘react’;
import PageTemplate from ‘./PageTemplate’;
import TodoInput from ‘./TodoInput’;
import TodoList from ‘./TodoList’;
 
class App extends Component {
  state = {
    input: ‘’ // input 
  }
 
  handleChange = (e) => {
    const { value } = e.target;
    this.setState({
      input: value
    });
  }
 
  render() {
    const { input } = this.state;
    const { 
      handleChange
    } = this;
 
    return (
      <PageTemplate>
        <TodoInput onChange={handleChange} value={input}/>
        <TodoList/>
      </PageTemplate>
    );
  }
}
 
export default App;

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.