๐Ÿฆฏ Hook

๊น€์ฒ ์ค€ยท2022๋…„ 1์›” 20์ผ
0

REACT

๋ชฉ๋ก ๋ณด๊ธฐ
11/38
post-custom-banner

๐Ÿฆฏ Hook์ด๋ž€?

ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ ํด๋ž˜์Šค์˜ ๋ผ์ดํ”„์‚ฌ์ดํด ๋ฉ”์„œ๋“œ ๊ธฐ๋Šฅ๊ณผ state ๊ด€๋ฆฌ๋ฅผ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ๊ธฐ๋Šฅ์ด๋‹ค.

๐Ÿค” Hook์ด ๋งŒ๋“ค์–ด์ง€๊ฒŒ๋œ ๊ณ„๊ธฐ๋Š”?

  • ๋ผ์ดํ”„ ์‚ฌ์ดํด์˜ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด
  • state๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด
  • ์„ฑ๋Šฅ ํ–ฅ์ƒ์„ ์œ„ํ•ด
  • state๋ฅผ ์„œ๋กœ ๋‹ค๋ฅธ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๊ณต์œ ํ•˜๊ธฐ ์‰ฝ๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด

    ๊ธฐ์กด์— ๋‚ด๊ฐ€ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์€ state๋ฅผ ์—ฌ๋Ÿฌ ์ปดํฌ๋„ŒํŠธ์— ์“ฐ๋ ค๋ฉด props๋กœ ์ „๋‹ฌํ•˜์˜€๋‹ค.
    ํ•˜์ง€๋งŒ ์ปดํฌ๋„ŒํŠธ๋งˆ๋‹ค state๋ฅผ ์ „๋‹ฌํ•˜๋ ค๋ฉด ๋ถ€๋ชจ์ปดํฌ๋„ŒํŠธ๋งˆ๋‹ค ์ผ์ผํžˆ props๋กœ state๋ฅผ ์ „๋‹ฌํ•ด์ค˜์•ผํ•œ๋‹ค๋Š” ๋ฒˆ๊ฑฐ๋กœ์›€์ด ์žˆ๋‹ค.
    ์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด HOCs(Higher Order Components) ๋˜๋Š” render props๋ฅผ ์ œ์•ˆํ•˜์˜€๋‹ค.

class component์—์„œ์˜ ๋ฌธ์ œ

1. ์ƒํƒœ ๋กœ์ง ์žฌ์‚ฌ์šฉ์˜ ์–ด๋ ค์›€

์œ„์—์„œ ์„ค๋ช…ํ–ˆ๋“ฏ์ด state๋ฅผ ์—ฌ๋Ÿฌ ์ปดํฌ๋„ŒํŠธ ์‚ฌ์ด์—์„œ ๊ณต์œ ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” render props์ด๋‚˜ HOCs ๋กœ์ง ํŒจํ„ด์„ ์‚ฌ์šฉํ•œ๋‹ค.

์ด๋Š” state sharing์„ ํšจ์œจ์ ์œผ๋กœ ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์žฅ์ ์„ ๊ฐ€์ง€๊ณ  ์žˆ์ง€๋งŒ ๋กœ์ง์„ ๊ตฌ์„ฑํ•˜๊ธฐ ์œ„ํ•˜์—ฌ ์ฝ”๋“œ์˜ ๋ณต์žก์„ฑ์„ ์œ ๋ฐœํ•˜์—ฌ Wrapper Hell์„ ๋ฐœ์ƒ์‹œํ‚ฌ์ˆ˜ ์žˆ๊ณ  ์ด๋กœ ์ธํ•˜์—ฌ ์ฝ”๋“œ ์ถ”์ ์ด ์–ด๋ ค์›Œ์งˆ ์ˆ˜ ์žˆ๋‹ค๋Š” ์œ ์ง€๋ณด์ˆ˜ ๋ฐ ๊ฐ€๋…์„ฑ์—์„œ์˜ ๋‹จ์ ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.

Hook์„ ์‚ฌ์šฉํ•˜๋ฉด ์ปดํฌ๋„ŒํŠธ๋กœ๋ถ€ํ„ฐ ์ƒํƒœ ๊ด€๋ จ ๋กœ์ง์„ ์ถ”์ƒํ™”ํ•  ์ˆ˜ ์žˆ๋‹ค.
Hook์€ ๊ณ„์ธต์˜ ๋ณ€ํ™” ์—†์ด ์ƒํƒœ ๊ด€๋ จ ๋กœ์ง์„ ์žฌ์‚ฌ์šฉ ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ค€๋‹ค. ์ด๊ฒƒ์€ ๋งŽ์€ ์ปดํฌ๋„ŒํŠธ ํ˜น์€ ์ปค๋ฎค๋‹ˆํ‹ฐ ์‚ฌ์ด์—์„œ Hook์„ ๊ณต์œ ํ•˜๊ธฐ ์‰ฝ๊ฒŒ ๋งŒ๋“ค์–ด์ค€๋‹ค.

2. ์ปดํฌ๋„ŒํŠธ์˜ ๋ณต์žก์„ฑ
ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ ๋น„์Šทํ•œ ๋ผ์ดํ”„ ์‚ฌ์ดํด ๋ฉ”์„œ๋“œ์—์„œ ๋™์ผํ•œ ์ž‘์—…์„ ๋ฐ˜๋ณตํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋‹ค.
(์˜ˆ๋ฅผ ๋“ค๋ฉด, ComponentDidmount,ComponentDidUpdate์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๋Š” ์ž‘์—…)

์ด๋Š” ๊ฐ™์€ ์ž‘์—…์„ ๋ฐ˜๋ณตํ•˜๋Š” ๋ฒˆ๊ฑฐ๋กœ์›€์„ ๋ฐœ์ƒ์‹œ์ผœ ๋ถˆํŽธํ•จ์„ ์ค€๋‹ค.

์ด๋Ÿฌํ•œ ๋‹จ์ ์„ ๋ณด์™„ํ•˜๊ธฐ ์œ„ํ•˜์—ฌ Hook์€ ๋น„์Šทํ•œ ๊ธฐ๋Šฅ์„ ํ•˜๋Š” ๋ผ์ดํ”„ ์‚ฌ์ดํด ๋ฉ”์„œ๋“œ๋ฅผ ํ•˜๋‚˜์˜ Hook API์—์„œ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•œ๋‹ค.(ex. useEffect)

3.ํด๋ž˜์Šค์˜ ์–ด๋ ค์›€
state๋ฅผ ์„ ์–ธํ•ด์ฃผ๊ธฐ ์œ„ํ•˜์—ฌ super๋กœ props๋ฅผ ์ „๋‹ฌ๋ฐ›๊ณ  constructor ๋ฉ”์„œ๋“œ์•ˆ์—์„œ state๋ฅผ ์„ ์–ธํ•˜๊ณ (๋ฐ–์—์„œ ๊ฐ„๋‹จํžˆ ํ•ด๊ฒฐํ•  ์ˆ˜๋„ ์žˆ๊ธด ํ•จ.) ์–ด๋– ํ•œ ๊ธฐ๋Šฅ์„ ํ•˜๊ธฐ ์œ„ํ•œ ๋ฉ”์„œ๋“œ๋ฅผ ์ •์˜ํ•˜์—ฌ ์‚ฌ์šฉํ•  ๋•Œ์—๋Š” this๋กœ ๋ฐ”์ธ๋”ฉํ•ด์ค˜์•ผํ•œ๋‹ค.(์ด ๋˜ํ•œ ํด๋ž˜์Šค ํ•„๋“œ๋กœ ์‚ฌ์šฉํ•˜๋ฉด ๋˜๊ธด ํ•จ.)

Hook์€ ์ด๋Ÿฌํ•œ ๋ณต์žกํ•œ this์— ๋Œ€ํ•œ ์‚ฌ์šฉ์„ ํ•˜์ง€ ์•Š๊ณ  ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ ๊ตฌํ˜„ํ•จ์œผ๋กœ์จ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•œ๋‹ค.


ํ›…์˜ ์ข…๋ฅ˜

useState

  • useState์€ ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ state๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” Hook API์ด๋‹ค.

  • useState๋Š” ์ƒํƒœ๊ฐ’๊ณผ ์ƒํƒœ๊ฐ’์„ ๋ณ€๊ฒฝํ•ด์ฃผ๋Š” ํ•จ์ˆ˜๋ฅผ ๋‹ด๋Š” ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜ํ•˜๊ณ 
    ๋ช…์นญ์€ ๊ตฌ์กฐ๋ถ„ํ•ดํ•จ์œผ๋กœ์จ ๋ช…๋ช…ํ•œ๋‹ค.

  • useState์˜ ์ธ์ž๋กœ์จ๋Š” state์˜ ์ดˆ๊นƒ๊ฐ’์„ ํ• ๋‹นํ•œ๋‹ค.

App.js

import React, { useState } from "react";

const App = () => {
  const [count,setCount] = useState(0) // ์›ํ•˜๋Š” ์ด๋ฆ„ ๋ช…๋ช… ๋ฐ ์ดˆ๊นƒ๊ฐ’ ์„ค์ •
  console.log(useState(0)); // state์™€ state๋ฅผ ๋ณ€๊ฒฝํ•ด์ฃผ๋Š” ํ•จ์ˆ˜ ๋ฐ˜ํ™˜
  return <div></div>;
};

export default App;

useState(0)์˜ ๋ฐ˜ํ™˜๊ฐ’



  • ์ผ๋ฐ˜์ ์œผ๋กœ ์ผ๋ฐ˜ ๋ณ€์ˆ˜๋Š” ํ•จ์ˆ˜๊ฐ€ ๋๋‚  ๋•Œ ์‚ฌ๋ผ์ง€์ง€๋งŒ, state ๋ณ€์ˆ˜๋Š” React์— ์˜ํ•ด ์‚ฌ๋ผ์ง€์ง€ ์•Š๋Š”๋‹ค.

  • ์—ฌ๋Ÿฌ๊ฐœ์˜ state๋ฅผ ์„ค์ •ํ•˜์—ฌ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ์—ฌ๋Ÿฌ๊ฐœ์˜ useState๋ฅผ ์„ ์–ธํ•˜๋ฉด ๋œ๋‹ค.

functional update

const [state,setState] = useState(initValue)

setState()๊ฐ€ ์ด์ „ state๊ฐ’์— ์˜์กดํ•˜์—ฌ ๋‹ค์Œ state๊ฐ’์„ ์„ค์ •ํ•˜๊ณ ์ž ํ•œ๋‹ค๋ฉด setState()์— ํ•จ์ˆ˜๋ฅผ ํ• ๋‹นํ•  ์ˆ˜ ์žˆ๋‹ค.

setState( prevstate => prevstate + 1)

์ด์ „ state๊ฐ’์„ ์ฐธ์กฐํ•˜์—ฌ state๊ฐ’์„ ์„ค์ •ํ•ด์•ผํ•  ๋•Œ ์œ ์šฉํ•  ๊ฒƒ ๊ฐ™๋‹ค.

๋˜ํ•œ ํ•จ์ˆ˜ํ˜• ์—…๋ฐ์ดํŠธ ๊ฐ™์€ ๊ฒฝ์šฐ์—๋Š” setState๋กœ ๋ณ€ํ™”๊ฐ€ ์—†๋‹ค๋ฉด re-rendering์„ ํ•ด์ฃผ์ง€ ์•Š๋Š”๋‹ค.

useEffect

  • useEffect๋Š” ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ์˜ ์ƒ๋ช…์ฃผ๊ธฐ ๋ฉ”์„œ๋“œ์™€ ๋น„์Šทํ•˜๊ฒŒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” Hook API์ด๋‹ค.

    ์ƒ๋ช…์ฃผ๊ธฐ ๋ฉ”์„œ๋“œ componentDidMount๋‚˜ componentDidUpdate, componentWillUnmount์™€ ๊ฐ™์€ ๋ชฉ์ ์œผ๋กœ ์ œ๊ณต๋˜์ง€๋งŒ, ํ•˜๋‚˜์˜ API๋กœ ํ†ตํ•ฉํ•ฉ๋ผ์žˆ๋‹ค.

  • ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ , ๊ตฌ๋… ์„ค์ • , DOM ๋‹ค๋ฃจ๊ธฐ ๋“ฑ๊ณผ ๊ฐ™์€ effect๋“ค์„ useEffect์—์„œ ์„ค์ •ํ•œ๋‹ค.
    (DOM ๋ณ€๊ฒฝ์€ ํƒ€์ด๋จธ ์„ค์ • ํ˜น์€ useLayoutEffectํ™œ์šฉ)

  • ์ฒซ๋ฒˆ์งธ ์ธ์ž์ธ ํ•จ์ˆ˜์˜ ์—ญํ• ์€ effect์ด๋‹ค.
    effect๋ฅผ ์„ค์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ํ•จ์ˆ˜์˜ ๋ฌธ์— ์ดˆ๊ธฐ๋ Œ๋”๋ง(componentDidMount), ์—…๋ฐ์ดํŠธ ๋ Œ๋”๋ง(componentDidUpdate) ์ดํ›„์— ์›ํ•˜๋Š” ์ž‘์—…์„ ์„ค์ •ํ•˜๋ฉด ๋œ๋‹ค.

    ์„ค์ •ํ•œ ์ž‘์—…(effect)์„ ํ•ด์ง€ํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ํ•จ์ˆ˜์—์„œ ํ•ด์ง€ํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋ฉด ๋œ๋‹ค.(componentWillUnmount)

  • useEffect์˜ clean-up function(return์—์„œ ์„ค์ •ํ•˜๋Š” ํ•จ์ˆ˜)์€ unmount๋  ๋•Œ๋งŒ ๋ถˆ๋ฆฌ๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋‹ค.
    clean-up function์€ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์—…๋ฐ์ดํŠธ ๋˜๊ธฐ์ „์—๋„ ๋ถˆ๋ฆฐ๋‹ค.

  • ๋‘๋ฒˆ์งธ ์ธ์ž๋Š” dependency์ด๋‹ค.
    ๋‘๋ฒˆ์งธ ์ธ์ž๋Š” ๋ฐฐ์—ด์„ ๋„ฃ์–ด์ฃผ๋Š”๋ฐ ๋ฐฐ์—ด์•ˆ์—๋Š” ํ•ด๋‹น๊ฐ’์ด ๋ฐ”๋€” ๋•Œ๋งŒ effect๊ฐ€ ์ผ์–ด๋‚˜๋„๋ก ํ•˜๊ฒŒ ํ•ด์ค€๋‹ค.

    ๋นˆ ๋ฐฐ์—ด์„ ๋„ฃ๋Š”๋‹ค๋ฉด ์ฒซ ๋ Œ๋”๋ง(componentDidMount)๋•Œ๋งŒ effect๊ฐ€ ์ผ์–ด๋‚˜๊ฒŒ ํ•ด์ค€๋‹ค.

  • ์„œ๋กœ ๊ด€๋ จ์žˆ๋Š” ๋กœ์ง์€ useEffect๋ฅผ ์—ฌ๋Ÿฌ๋ฒˆ ์‚ฌ์šฉํ•˜์—ฌ ๊ตฌ๋ถ„ํ•  ์ˆ˜ ์žˆ๋‹ค.
    (ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ๋Š” ์ƒ๋ช…์ฃผ๊ธฐ ๋ฉ”์„œ๋“œ์—์„œ ๊ด€๋ จ์—†๋Š” ๋กœ์ง์„ ๋ชฐ์•„๋„ฃ๊ณค ํ•ด์•ผํ–ˆ์Œ.)

useEffect์•ˆ์—์„œ state๋ฅผ ๋ณ€๊ฒฝํ•˜๋ฉด ๋ฌดํ•œ๋ Œ๋”๋ง๋ฃจํ”„์— ๋น ์งˆ ์ˆ˜ ์žˆ์œผ๋‹ˆ ์ฃผ์˜ํ•  ๊ฒƒ!
(state๋Š” ๋ฐ”๋€”๋•Œ๋งˆ๋‹ค ๋ฆฌ๋ Œ๋”๋ง๋˜๋Š”๋ฐ ๋ Œ๋”๋ง๋  ๋•Œ๋งˆ๋‹ค useEffect๋„ ์‹คํ–‰๋˜์–ด ๋ฌดํ•œ๋ฃจํ”„์— ๋น ์ง€๊ฒŒ ๋จ.)

useReducer

useReducer๋Š” useState๋ณด๋‹ค ๋” ๋‹ค์–‘ํ•œ ์ปดํฌ๋„ŒํŠธ ์ƒํ™ฉ์— ๋”ฐ๋ผ ๋‹ค์–‘ํ•œ ์ƒํƒœ๋ฅผ ๋‹ค๋ฅธ ๊ฐ’์œผ๋กœ ์—†๋ฐ์ดํŠธํ•ด ์ฃผ๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ํ›…์ด๋‹ค.

๋ฆฌ๋“€์„œ๋Š” ํ˜„์žฌ ์ƒํƒœ, ๊ทธ๋ฆฌ๊ณ  ์—…๋ฐ์ดํŠธ๋ฅผ ์œ„ํ•ด ํ•„์š”ํ•œ ์ •๋ณด๋ฅผ ๋‹ด์€ ์•ก์…˜ ๊ฐ’์„ ์ „๋‹ฌ๋ฐ›์•„ ์ƒˆ๋กœ์šด ์ƒํƒœ๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ํ•จ์ˆ˜์ด๋‹ค.

๋ฆฌ๋“€์„œ ํ•จ์ˆ˜์—์„œ ์ƒˆ๋กœ์šด ์ƒํƒœ๋ฅผ ๋งŒ๋“ค ๋•Œ๋Š” ๋ฐ˜๋“œ์‹œ ๋ถˆ๋ณ€์„ฑ์„ ์ง€์ผœ์ฃผ์–ด์•ผ ํ•œ๋‹ค.

useReducer์˜ ์ฒซ ๋ฒˆ์งธ ํŒŒ๋ฆฌ๋ฏธํ„ฐ์—๋Š” ๋ฆฌ๋“€์„œ ํ•จ์ˆ˜๋ฅผ ๋„ฃ๊ณ  , ๋‘ ๋ฒˆ์งธ ํŒŒ๋ผ๋ฏธํ„ฐ์—๋Š” ํ•ด๋‹น ๋ฆฌ๋“€์„œ์˜ ๊ธฐ๋ณธ๊ฐ’์„ ๋„ฃ์–ด์ค€๋‹ค.

const [state,dispatch] = useReducer(reducer,0)

์ด ํ›…์„ ์‚ฌ์šฉํ•˜๋ฉด state ๊ฐ’๊ณผ dispatch ํ•จ์ˆ˜๋ฅผ ๋ฐ›์•„์˜จ๋‹ค. ์—ฌ๊ธฐ์„œ state๋Š” ํ˜„์žฌ ๊ฐ€๋ฆฌํ‚ค๊ณ  ์žˆ๋Š” ์ƒํƒœ๊ณ , dispatch๋Š” ์•ก์…˜์„ ๋ฐœ์ƒ์‹œํ‚ค๋Š” ํ•จ์ˆ˜์ด๋‹ค.

dispatch(action)

state,action์„ ๊ฐ์ฒด๋กœ ์‚ฌ์šฉํ•  ๋•Œ

import React, { useReducer } from "react";

const App = () => {
  function reducer(state, action) {
    switch (action.type) {
      case "INCREMENT":
        return { value: state.value + 1 };
      case "DECREMENT":
        return { value: state.value - 1 };

      default:
        return state;
    }
  }

  const [state, dispatch] = useReducer(reducer, { value: 0 });

  return (
    <div>
      <p>ํ˜„์žฌ ์นด์šดํ„ฐ ๊ฐ’์€ {state.value}์ž…๋‹ˆ๋‹ค.</p>

      <button onClick={() => dispatch({ type: "INCREMENT" })}>INCREMENT</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>DECREMENT</button>
    </div>
  );
};

export default App;

state,action๊ฐ’์„ ๊ฐ์ฒด๊ฐ€ ์•„๋‹Œ ๊ฐ’์œผ๋กœ ์‚ฌ์šฉํ•˜์˜€์„ ๋•Œ


import React, { useReducer } from "react";

const Base = () => {
  function reducer(state, action) {
    switch (action) {
      case "INCREMENT":
        return state + 1;
      case "DECREMENT":
        return state - 1;
      default:
        return state;
    }
  }

  const [state, dispatch] = useReducer(reducer, 0);
  return (
    <div>
      <h1>value</h1>
      <button onClick={() => dispatch("INCREMENT")}>INCREMENT</button>
      <button onClick={() => dispatch("DECREMENT")}>DECREMENT</button>
    </div>
  );
};

export default Base;

๋ฆฌ๋•์Šค์—์„œ ์‚ฌ์šฉํ•˜๋Š” ์•ก์…˜ ๊ฐ์ฒด์—๋Š” ์–ด๋–ค ์•ก์…˜์ธ์ง€ ์•Œ๋ ค ์ฃผ๋Š” type ํ•„๋“œ๊ฐ€ ๊ผญ ์žˆ์–ด์•ผ ํ•˜์ง€๋งŒ, useReducer์—์„œ ์‚ฌ์šฉํ•˜๋Š” ์•ก์…˜ ๊ฐ์ฒด๋Š” ๋ฐ˜๋“œ์‹œ type์„ ๊ฐ€์ง€๊ณ  ์žˆ์„ ํ•„์š”๊ฐ€ ์—†๋‹ค.

๊ทธ๋ฆฌ๊ณ  useReducer์—์„œ๋Š” ์•ก์…˜๊ฐ’์ด ๊ฐ์ฒด๊ฐ€ ์•„๋‹ˆ์–ด๋„ ๋˜๊ณ  ๋ฌธ์ž์—ด์ด๋‚˜ ์ˆซ์ž์—ฌ๋„ ์ƒ๊ด€์—†๋‹ค.

if ๋ฌธ ๋ง๊ณ  switch ๋ฌธ?

ํ”ํžˆ ์“ฐ๋Š” if๋ฌธ์„ ์“ฐ์ง€ ์•Š๊ณ  ์™œ switch๋ฌธ์„ ์ผ์„๊นŒ?

    if (action === "INCREMENT") state + 1;
    else if (action === "DECREMENT") state - 1;
    else state;

์œ„์™€ ๊ฐ™์ด if๋ฌธ์„ ์ผ์„ ๋•Œ ๊ฐ€๋…์„ฑ์ด ์ข‹์ง€ ์•Š์€ ๊ฒƒ ๊ฐ™๊ณ  reducer์˜ ์ทจ์ง€์— switch๋ฌธ์ด ์ ํ•ฉํ•˜๊ธฐ์— switch๋ฌธ์„ ์‚ฌ์šฉํ•œ๋‹ค๊ณ  ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค.

switch ๋ฌธ์€ ์—ฌ๋Ÿฌ ๊ฐ€์ง€ case๋ฅผ ์„ค์ •ํ•˜์—ฌ ์กฐ๊ฑด์— ๋งž๋Š” case๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์–ด useReducer์˜ ์ทจ์ง€์ธ ์—ฌ๋Ÿฌ action ์ค‘ ์„ ํƒํ•ด ์‚ฌ์šฉํ•œ๋‹ค๋Š” ์˜๋ฏธ์—์„œ ๋” ์•Œ๋งž์€ ๊ฒƒ ๊ฐ™๋‹ค.

import React, { useReducer } from "react";

const App = () => {
  function reducer(state, action) {
    return {
      ...state, //๊ธฐ์กด state๊ฐ’ ๊ฐ€์ ธ์˜ค๊ธฐ
      [action.name]: action.value,
    };
  }

  const [state, dispatch] = useReducer(reducer, { name: "", nickname: "" });

  const onChange = (e) => {
    dispatch(e.target);
  };

  console.log("render");

  return (
    <div>
      <div>
        <input name="name" value={state.name} onChange={onChange} />
      </div>
      <div>
        <input name="nickname" value={state.nickname} onChange={onChange} />
      </div>

      <h1>์ด๋ฆ„ : {state.name}</h1>
      <h1>๋ณ„์นญ : {state.nickname} </h1>
    </div>
  );
};

export default App;

reducer ํ•จ์ˆ˜์— switch๋ฌธ์„ ์จ์•ผ๋งŒ ํ•˜๋Š” ๊ฒƒ๋„ ์•„๋‹ˆ๊ณ  action๊ฐ’์— ๋‹ค์–‘ํ•œ ๊ฐ’์„ ํ• ๋‹นํ•  ์ˆ˜๋„ ์žˆ๋‹ค.

When use?

useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one.
https://reactjs.org/docs/hooks-reference.html#usereducer

useReducer๋Š” ๋ณต์žกํ•œ state logic์„ ๊ฐ€์ง€๊ณ  ์žˆ์„ ๋•Œ๋‚˜ ๋‹ค์Œ state๊ฐ€ ์ด์ „ state์— ์˜์กดํ•˜๊ณ  ์žˆ์„ ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค.
(action์— ๋”ฐ๋ผ ์—ฌ๋Ÿฌ state๋ฅผ ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ)

post-custom-banner

0๊ฐœ์˜ ๋Œ“๊ธ€