React Hooks & Context

참고 https://slides.com/woongjae/react2021

1. Basic Hooks

1-1. useState

• state를 대체할 수 있음

기존에는 state를 변경하려면 class 문법을 통해서만 가능했고, functional 컴포너늩에서는 구현이 불가능했지만, hook이 새롭게 업데이트 되면서 functional 컴포넌트에서도 state를 가질 수 있게 되었다.

1-1-1. class 구현(기존)

import React from 'react'

export default class Example2 extends React.Component {
  state = {
    count: 0,
  }
  render() {
    const { count } = this.state
    return (
      <div>
        <p>You Clicked {count} times</p>
        <button onClick={this.click}>BTN</button>
      </div>
    )
  }
  click = () => {
    this.setState({
      count: this.state.count + 1,
    })
  }
}

1-1-2. functional 구현(1)

import React from 'react'

export default function Example2() {
  const [count, setCount] = React.useState(0)

  return (
    <div>
      <p>You Clicked {count} times</p>
      <button onClick={click}>BTN</button>
    </div>
  )

  function click() {
    setCount(count + 1)
  }
}

1-1-3. functional 구현(2)

import React from 'react'

// (기존) useState => count
// (수정) useState => {count: 0}
export default function Example3() {
  const [state, setState] = React.useState({ count: 0 })

  return (
    <div>
      <p>You Clicked {state.count} times</p>
      <button onClick={click}>BTN</button>
    </div>
  )

  // function click() {
  //   setState({ count: state.count + 1 })
  // }
  function click() {
    setState((state) => {
      return {
        count: state.count + 1,
      }
    })
  }
}

state hook이 나오면서 ...

• (기존)
  : Functional Component = Stateless Component = Stateless Functional Component
• (현재)
  : Functional Compoent !== Stateless Component

• 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어려움
  : 컨테이너 방식 말고 상태에 관련된 로직
• 복잡한 컴포넌트들은 이해하기 어려움
• Class는 사람과 기계를 혼동시킴
  : 컴파일 단계에서 코드 최적화가 어려워짐
• this.state는 로직에서 레퍼런스를 공유하기 때문에 문제 발생 가능성이 있음
  : functional 컴포넌트는 this.state를 공유하지 않음
  : 따라서, 어떠한 것이 맞다 틀리다가 아니라, 상황에 맞게 class 혹은 function을 적절하게 활용해야함

1-2. useEffect

• 라이프 사이클 훅을 대체할 수 있음
  : componentDidMount
  : componentDidUpdate
  : componentWillUnmount

// useEffect
import React from 'react'

export default function Example5() {
  const [count, setCount] = React.useState(0)

  // React.useEffect(() => {
  //   console.log('componentDidMount && componentDidUpdate', count)
  // })
  React.useEffect(() => {
    console.log('componentDidMount')

    return () => {
      // cleanup
      // componentWillUnmount
    }
  }, [])

  React.useEffect(() => {
    console.log('componentDidMount && componentDidUpdate by count', count)
    return () => {
      // cleanup
      console.log('cleanup by count' count)
    }
  }, [count])

  return (
    <div>
      <p>You Clicked {count} times</p>
      <button onClick={click}>BTN</button>
    </div>
  )

  function click() {
    setCount(count + 1)
  }
}

[번역] useEffect 완벽 가이드 | rinae's devlog

1-3. userContext

6. Context API 에서 다룸

---

2. Custom Hooks

// useWindowWidth.js
import { useState, useEffect } from 'react'

export default function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth)
  useEffect(() => {
    const resize = () => {
      setWidth(window.innerWidth)
    }
    window.addEventListener('resize', resize)
    return () => {
      window.removeEventListener('resize', resize)
    }
  }, [])

  return width
}

useHasMounted vs widthHasMounted

(...)

3. Additional Hooks

4. React Router Hooks

5. 컴포넌트 간 통신

6. Context API