React 클래스 대 기능 구성 요소, 2부: 상태

상태

이전에는 클래스 구성 요소의 상태 메서드에만 액세스할 수 있었고 이름과 성의 제어된 형식은 다음과 같았습니다.

class OurComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      givenName: '',
      surName: ''
    };
  }

    handleGivenNameChange = event => {
    this.setState({
      givenName: event.target.value
    })
  }

  handleSurNameChange = event => {
    this.setState({
      surName: event.target.value
    })
  }

  handleSubmit = event => {
    //not relevant here, nothing will change in the body of 
    //this function unless you're dealing with a callback  
    //that references state or props
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit(event)}>
        <input type="text"
        onChange={event => this.handleGivenNameChange(event)} 
        value={this.state.givenName} />
        <input type="text"
        onChange={event => this.handleSurNameChange(event)} 
        value={this.state.surName} />
      </form>
    )
  }
}

그러나 이제 후크를 사용하여 상태를 저장하는 기능적 구성 요소를 작성할 수 있습니다. useState를 가져와야 하고 상태를 추적할 하나 이상의 상태 변수와 상태를 업데이트할 함수의 이름을 설정해야 합니다. 이러한 변수는 직접 참조할 수 있으며 함수를 호출하여 새 값을 설정할 수 있습니다.

import React, { useState } from 'react';

function OurComponent(props) {

    const [givenName, setGivenName] = useState('')

    const [surName, setSurName] = useState('')

    const handleGivenNameChange = event => {
      setGivenName(event.target.value)
    }

    const handleSurNameChange = event => {
      setSurName(event.target.value)
    }

    const handleSubmit = event => {
      //not relevant here, nothing will change in the body of 
      //this function unless you're dealing with a callback  
      //that references state or props
    }

    render() {
      return (
        <form onSubmit={event => handleSubmit(event)}>
          <input type="text"
          onChange={event => handleGivenNameChange(event)} 
          value={givenName} />
          <input type="text"
          onChange={event => handleSurNameChange(event)} 
          value={surName} />
        </form>
      )
    }
  }

우리는 줄의 수를 그렇게 많이 줄이지는 않았지만 모든 것을 더 간결하게 만들었습니다. givenName을 참조하는 것이 this.state.givenName을 참조하는 것보다 확실히 더 간결합니다. 사실, 이제 우리의 변수가 더 간결해졌습니다. 여기서 약간의 리팩토링을 수행하면 클래스 구성요소에서 더 길고 읽기 어려운 행을 남길 수 있습니다...

import React, { useState } from 'react';

function OurComponent(props) {

    const [givenName, setGivenName] = useState('')

    const [surName, setSurName] = useState('')

    const handleSubmit = event => {
      //not relevant here, nothing will change in the body of 
      //this function unless you're dealing with a callback  
      //that references state or props
    }

    render() {
      return (
        <form onSubmit={event => handleSubmit(event)}>
          <input type="text"
          onChange={event => setGivenName(event.target.value)} 
          value={givenName} />
          <input type="text"
          onChange={event => setSurName(event.target.value)} 
          value={surName} />
        </form>
      )
    }
  }

잘못된 입력을 방지하거나 복잡한 작업을 수행하도록 제어하는 ​​경우 좋은 리팩터링이 되지 않을 수 있지만 참조 및 상태 변경 방법이 더 짧은 종류의 리팩터링이 열리는 것을 볼 수 있습니다.

다음 주에 useEffect로 돌아와 componentDidMount, componentWillUpdate 등과 같은 클래스 기반 수명 주기 메서드를 대체할 수 있습니다.