React Hook - ChoDragon9/posts GitHub Wiki

๊ฐœ์š”

  • ๊ณ„์ธต ๋ณ€ํ™” ์—†์ด ์ƒํƒœ ๊ด€๋ จ ๋กœ์ง์„ ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์คŒ
  • ๋กœ์ง์— ๊ธฐ๋ฐ˜์„๋‘” ์ž‘์€ ํ•จ์ˆ˜๋กœ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ์Œ

State Hook

function Example() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  )
}

Effect Hook

React Class์˜ componentDidMount, componentDidUpdate, componentWillUnmount์™€ ๊ฐ™์€ ๋ชฉ์ ์œผ๋กœ useEffect๋ฅผ ์ œ๊ณตํ•œ๋‹ค.

function Example() {
  const [count, setCount] = useState(0);
  const [title, setTitle] = useState('');

  useEffect(() => {
    setTitle(`You Clicked ${count} times`)
  });

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

  return (
    <div>
      <p>{title}</p>
      <button onClick={onClickButton}>
        Click me
      </button>
    </div>
  )
}

Hook ์‚ฌ์šฉ ๊ทœ์น™

  • ์ตœ์ƒ์œ„์—์„œ๋งŒ Hook์„ ํ˜ธ์ถœํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
    • ๋ฐ˜๋ณต๋ฌธ, ์กฐ๊ฑด๋ฌธ, ์ค‘์ฒฉ๋œ ํ•จ์ˆ˜ ๋‚ด์—์„œ Hook์„ ์‹คํ–‰ํ•˜๋ฉด ์•ˆ๋œ๋‹ค.
  • React ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ ๋‚ด์—์„œ๋งŒ Hook์„ ํ˜ธ์ถœํ•ด์•ผ ํ•œ๋‹ค.
    • ์ผ๋ฐ˜ JavaScript ํ•จ์ˆ˜์—์„œ๋Š” Hook์„ ํ˜ธ์ถœํ•ด์„œ๋Š” ์•ˆ๋œ๋‹ค.
โš ๏ธ **GitHub.com Fallback** โš ๏ธ