React

React Hooks

React Hooks

React Hooks란?

React Hooks는 클래스 컴포넌트 없이도 상태(state)와 다양한 React의 기능을 사용할 수 있게 해주는 기능이다. ReactConf 2018에서 처음 발표되었고, React 16.8 버전에서 Hooks가 도입되었다. Hooks의 등장 이전에는 주로 클래스 컴포넌트가 사용되었지만, Hooks의 도입으로 함수형 컴포넌트의 사용이 더욱 일반화되었다.
Class Components
Functional Components
많은 기능
더 적은 기능
긴 코드 양
짧은 코드
복잡한 코드
심플한 코드
더딘 성능
빠른 성능

React Hooks의 주요 장점

  • 함수형 컴포넌트에서 생명주기 활용 가능: useState, useEffect와 같은 Hooks를 사용하여 함수형 컴포넌트에서도 생명주기를 관리할 수 있다.
  • API 호출 및 상태 관리 용이: Hooks를 통해 API 호출과 상태 관리가 더욱 간편해졌다.
  • HOC 및 Wrapper 컴포넌트 감소: Custom React Hooks를 사용하여 HOC(Higher-Order Components)의 복잡성을 줄이고, 불필요한 Wrapper 컴포넌트의 사용을 최소화할 수 있다.
  • 코드 간결화 및 성능 최적화: Babel을 통한 ES5 변환 시에도 함수형 컴포넌트의 코드가 훨씬 짧고, 실행 성능이 우수하다.
  • 리액트 생명주기 ←→
      • Mounting
      Updating
      Unmounting
      constructor
      ㅤ
      ㅤ
      render
      render
      ㅤ
      react update DOM
      react update DOM
      ㅤ
      componentDidMount
      componentsDidUpdate
      componentsWillunmount
  • Class Components extends, render() 필요
      • import React from 'react'

export default class Hello extends Component {
  render() {
    return (
      <div>Hello World!</div>
    )
  }
}
  • Functional Components
      • import React from 'react'

export default function Hello(){
  return (
    <div>Hello World!</div>
  )
}
  • Class Components API 호출, setState()
      • import React, { Component } from 'react'
import Axious from 'axious'

export default class Hello extends Component {

  constructor(props){
    super(props);
    this.state = { name:"" };
  }

  componentDidMount() {
    Axious.get('/api/user/name')
      .then(response => {
        this.setState({ name: response.data.name })
      })
  }

  render() {
    return (
      <div>My name is {this.state.name}</div>
    )
  }
}
  • Functional Components API 호출, useState()
      • import React, { useEffect, useState } from 'react'
import Axious from 'axious'

export default function Hello() {

  const [name, setName] = useState("")

  //[getter, setter]

  useEffect(() => {
    Axious.get('/api/user/name')
      .then(response => {
        setName(response.data.name)
      }), []

  return (
    <div>My name is {name}</div>
  )
}
  • Class Components 생명주기 사용: 3개 함수 사용
      • componentDidMount() {
  this.updateList(this.props.id)
}

componentDidUpdate(preProps) {
  if (prevProps.id !== this.props.id) {
    this.updateLists(this.props.id)
  }
}

updateList = (id) => {
  fetchlist(id)
    .then((lists) => this.setState({ list }))
}
  • Functional Components 생명주기 사용: useEffect() 내에서 모두 처리 가능
      • useEffect(() => {
  fetchLists(id)
    .then((repos) => {
      setRepos(repo)
    })
}, [id])

Hooks Quiz

1. HOC란 무엇인가?

Higher Order Component의 약자로 컴포넌트를 인자로 받아서 새로운 리액트 컴포넌트를 리턴하는 함수다.

2. 너무나 많은 HOC를 사용하게 되면 Wrapper가 너무 많아지게 된다. 그걸 Hooks에서는 어떻게 처리하나?

React Hooks에서는 HOC대신에 따로 Custom Hook을 이용해서 컴포넌트를 만들어서 처리를 해준다. 그로 인해 Wrapper가 많아지는 일을 방지할 수 있다.

3. 생명주기를 위해서 Hooks에서는 어떠한 API를 사용하나?

componentDidMount, componentDidUpdate, componentWillUnmount 모두를 Hooks에서는 useEffect를 이용해서 처리해준다.

4. Hooks에서 state를 업데이트하려면 어떻게 해야 하나?

state 정의
→ const[ name, setName ] = useState("");
state 업데이트
→ setName()

5. Class 컴포넌트와 비교했을 때 함수형 컴포넌트의 장점은?

1. 더 짧고 간결한 코드
2. 더 빠른 성능
3. 더 나은 가독성