React Hooks (state, lifecycle)

React v16.8부터 추가된 기능으로 Hooks는 함수형 컴포넌트에서도 state 상태관리가 가능하다.

Counter 컴포넌트 비교

클래스형

// 클래스형 Counter.js
import React, { Component } from 'react'
class Counter extends Component {
  constructor(props) {
    super(props)
    this.state = {
      value: 0
    }
  }
increase = () => {
      this.setState({
          value: this.state.value + 1
      })
  }
decrease = () => {
      this.setState({
          value: this.state.value - 1
      })
  }
render() {
      const {increase, decrease} = this
      const {value} = this.state
return (
          <div>
            <p>값: {value}</p>
            <button onClick={increase}>+1</button>
            <button onClick={decrease}>-1</button>
          </div>
      )
  }
}
export default Counter

함수형

// 함수형 Counter.js
import React, { useState } from 'react'
const Counter = () => {
  const [value, setValue] = useState(0)
  const increase = () => setValue(value + 1)
  const decrease = () => setValue(value - 1)
return (
    <div>
      <p>값: {value}</p>
      <button onClick={increase}>+1</button>
      <button onClick={decrease}>-1</button>
    </div>
  )
}
export default Counter

위와 같이 Hooks의 useState와 [value, …]확산 연산자를 사용하면 훨씬 가독성 있고 의미없이 반복하는 코드 없이 상태관리가 가능한 함수형 컴포넌트를 작성 할 수 있다.

const [value, setValue] = useState(0)

value는 카운터 컴포넌트의 상태값,

setValue는 상태값을 변경하는 함수,

useState() 함수의 파라미터값은 상태값의 기본값이 된다.

UserInfo 컴포넌트 비교

클래스형

// 클래스형 UserInfo.js
import React, { Component } from 'react'
class UserInfo extends Component {
  constructor(props) {
    super(props)
    this.state = {
      name: '',
      email: ''
    }
  }
componentDidMount() {
      this.setState({
        name: 'jack',
        email: 'jack@email.com'
      })
  }
handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    })
  }
render() {
      const {handleChange} = this
      const {name, email} = this.state
return (
          <div>
            <input 
                name="name" 
                value={name} 
                onChange={handleChange} 
                placeholder="Name" />
            <input 
                name="email" 
                value={email} 
                onChange={handleChange} 
                placeholder="Email" />
            <p>Name : {name}</p>
            <p>Email: {email}</p>
          </div>
      )
  }
}
export default UserInfo

함수형

// 함수형 UserInfo.js
import React, { useState, useEffect } from 'react'
const UserInfo = () => {
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')
useEffect(() => {
    setName('jack')
    setEmail('jack@email.com')
  })
const onChangeName = (e) => setName(e.target.value)
const onChangeEmail = (e) => setEmail(e.target.value)
return (
      <div>
        <input
            name="name"
            value={name}
            onChange={onChangeName}
            placeholder="Name" />
        <input
            name="email"
            value={email}
            onChange={onChangeEmail}
            placeholder="Email" />
        <p>Name : {name}</p>
        <p>Email: {email}</p>
      </div>
  )
}
export default UserInfo

useState는 하나의 상태값만 관리 할 수 있다. 하나 이상의 상태값을 관리 하려면 useState를 추가하면 된다.

const [name, setName] = useState('')
const [email, setEmail] = useState('') // 추가

useEffect 함수는 LifeCycle 작업을 수행 할 수 있다.

// Mount, Update
useEffect(() => {
    console.log(name, email);
  })
// Only Mount
useEffect(() => {
    setName('jack')
    setEmail('jack@email.com')
  }, []) // 두번째 파라미터로 빈 배열값
// Only Update
useEffect(() => {
    console.log(name, email);
  }, [name, email]) // 두번째 파라미터로 값추가

// Update, Unmount
useEffect(() => {
    console.log(name, email);
    return () => {
      console.log('done')
    }
  })

우선 Hooks 의 상태관리와 라이프사이클 부분은 보았다. 코드의 가독성과 유지보수 측면에서 컴포넌트의 성격(클래스형, 함수형)을 적절히 선택하여 사용 하면 되겠다.