๐Ÿคฟ setState์˜ ๋น„๋™๊ธฐ์„ฑ

Lee Jooamยท2022๋…„ 5์›” 26์ผ
0

setState๋Š” ๋น„๋™๊ธฐ์ ์œผ๋กœ ์ž‘๋™ํ•œ๋‹ค.

์ด์œ 

๊ทธ ์ด์œ ๋Š” ์ด์ „ state์™€ ๋‹ค์Œ state๋ฅผ ๋น„๊ตํ•˜๋ฉฐ ๋ฆฌ๋ Œ๋”๋ง์„ ํ•˜๋Š” ๊ฒŒ ๋น„์šฉ์ด ํฐ ์ž‘์—…์ด๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

setState๋ฅผ ํ†ตํ•ด ์ƒˆ๋กœ์šด state๋กœ ์—…๋ฐ์ดํŠธํ•˜๋Š” ์ž‘์—…์„ ์—ฐ๋‹ฌ์•„ 3๋ฒˆ ๋ฐœ์ƒ์‹œ์ผฐ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด๋ณด์ž.

const handleClick = () => {
  setState(count + 1);
  setState(count + 1);
  setState(count + 1);
}

์ด๋Ÿฐ ์ž‘์—…์—์„œ ๋ฆฌ์•กํŠธ๋Š” ์žฌ์กฐ์ •์„ ํ†ตํ•œ ๋ฆฌ๋ Œ๋”๋ง์„ 3๋ฒˆ ๋ฐœ์ƒ์‹œํ‚ค์ง€ ์•Š๋Š”๋‹ค. ๋ฆฌ์•กํŠธ๋Š” ๋˜‘๋˜‘ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

์ตœํ›„์˜ ์ž‘์—…๋งŒ ๋ฆฌ๋ Œ๋”๋งํ•˜๋Š” ๊ฒŒ ๋น„์šฉ์ด ์ ๋‹ค๋Š” ๊ฑธ ์•Œ๊ณ  ์žˆ๋‹ค.

๋ฌธ์ œ๋Š” ๊ฐœ๋ฐœ์ž์˜ ์˜๋„์™€๋Š” ๋‹ค๋ฅธ ๊ฒฐ๊ณผ๋ฅผ ๋ถˆ๋Ÿฌ์˜ฌ ์ˆ˜ ์žˆ๋‹ค๋Š” ์œ„ํ—˜์„ฑ์ด๋‹ค. ์œ„์˜ ์˜ˆ์‹œ์—์„œ count๋Š” ๊ธฐ์กด์˜ count์—์„œ +3๋œ ๊ฐ’์ด ์•„๋‹Œ +1๋กœ๋งŒ state๊ฐ€ ์„ค์ •๋œ๋‹ค.

ํ•ด๊ฒฐ์ฑ…

const handleClick = () => {
  setState(prev => count + 1);
  setState(prev => count + 1);
  setState(prev => count + 1);
}

๋‹ค์Œ๊ณผ ๊ฐ™์ด ํ•จ์ˆ˜๋ฅผ ์ „๋‹ฌํ•ด์ฃผ๋ฉด ๊ฐ„๋‹จํ•˜๊ฒŒ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค.

const handleClick = () => {
  setState(prev => count + 3);
}

๋ฌผ๋ก  ์• ์ดˆ์— setState๋ฅผ ์—ฌ๋Ÿฌ ๋ฒˆ ํ˜ธ์ถœํ•  ์ผ์ด ์—†๋„๋ก ํ•˜๋Š”๊ฒŒ ๋” ์ข‹๋‹ค.

์ฃผ๊ด€์ ์ธ ์˜๊ฒฌ

setState๊ฐ€ ๋น„๋™๊ธฐ์ ์œผ๋กœ ๋ฐœ์ƒํ•˜๋Š” ์›๋ฆฌ์— ๋Œ€ํ•ด ์กฐ๊ธˆ ์กฐ์‚ฌํ•ด๋ดค๋‹ค.

์ผ๋‹จ ๊ณต์‹๋ฌธ์„œ์—๋Š” setState๊ฐ€ ๋น„๋™๊ธฐ์ ์œผ๋กœ ์ž‘๋™ํ•˜๋‹ˆ ์‚ฌ์šฉ์— ์œ ์˜ํ•˜๋ผ๋Š” ๋ง๊ณผ ํ•ด๊ฒฐ๋ฐฉ๋ฒ•์ด ์ ํ˜€์žˆ๊ณ , ๊ทธ์— ๋Œ€ํ•œ ๋‚ด๋ถ€์ ์ธ ์›๋ฆฌ๋Š” ์„ค๋ช…ํ•˜๊ณ  ์žˆ์ง€ ์•Š๋‹ค.

๋‹น์‹œ์˜ ์ฐธ์กฐ๊ฐ’์ด ๋™์ผํ•ด์„œ์ผ๊นŒ? ์•„๋‹ˆ๋ฉด React๊ฐ€ ๋™์ผํ•œ state์— ๋Œ€ํ•ด setter๋ฅผ ํ˜ธ์ถœํ•  ๋•Œ ์ด์ „ setter๋“ค์„ ๋ฌด์‹œํ•ด์„œ์ผ๊นŒ?

props (โ€œpropertiesโ€์˜ ์ค„์ž„๋ง) ์™€ state ๋Š” ์ผ๋ฐ˜ JavaScript ๊ฐ์ฒด์ž…๋‹ˆ๋‹ค.

๋ฌธ๋“ ์ด๋Ÿฐ ๋ฌธ์žฅ์ด ๋ณด์˜€๋‹ค. ๋ณด๋Š” ๊ฒƒ๊ณผ ๊ฐ™์ด state๋Š” ๊ฐ์ฒด๋‹ค. ์ด๊ฒƒ์„ ํ† ๋Œ€๋กœ ์กฐ๊ธˆ ๋” ์กฐ์‚ฌํ–ˆ๋‹ค.

functional-setstate-is-the-future-of-react์ด ๋ฌธ์„œ๋ฅผ ๋ณด๊ณ  ์‹ค๋งˆ๋ฆฌ๋ฅผ ์žก์•˜๋‹ค.

Object Composition์ด๋ผ๋Š” ๊ฐœ๋…์„ ์•Œ๊ฒŒ ๋˜์—ˆ๋‹ค. ๊ธฐ์กด ๊ฐ์ฒด์— ๋™์ผํ•œ ํ‚ค ๊ฐ’์œผ๋กœ ์—…๋ฐ์ดํŠธ ํ•  ๋•Œ ๊ฒฐ๊ณผ์ ์œผ๋กœ ๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ๋งŒ ์ ์šฉ๋œ๋‹ค๋Š” ๊ฐœ๋…์ด๋‹ค.

Object.Assign({}, {name: 'lee'}, {name: 'joo'});

๋ฌธ์žฅ์œผ๋กœ ํ‘œํ˜„ํ•˜์ž๋ฉด ์ด๋ ‡๋‹ค. ์ตœ์ข…์ ์œผ๋กœ ์ ์šฉ๋˜๋Š” ๊ฒƒ์€ ๋งˆ์ง€๋ง‰์œผ๋กœ ์”Œ์›Œ์ง€๋Š” ๋…€์„์ด๋‹ค.

setState(count + 1);
setState(count + 1);
setState(count + 1);

์œ„์˜ ํ˜•์‹์œผ๋กœ state๋ฅผ ๋ณ€๊ฒฝํ•˜๋ฉด Object Composition์ฒ˜๋Ÿผ ์ตœ์ข…์ ์œผ๋กœ ๋ฎ์–ด์”Œ์›Œ์ง€๋Š” ๊ฐ’์€ ๋งˆ์ง€๋ง‰ setState์ด๋‹ค.

ํ•ด๋‹น ์‹œ์ ์˜ ์ฐธ์กฐ ๊ฐ’์€ ๋™์ผํ–ˆ๋‹ค๋Š” ์ƒ๊ฐ๋„ ๊ด€๋Œ€ํ•˜๊ฒŒ ๋ณด๋ฉด ์•„์ฃผ ํ‹€๋ฆฐ ๊ฒƒ์€ ์•„๋‹ˆ์—ˆ๋‹ค.

๊ทธ๋ ‡๋‹ค๋ฉด ํ•จ์ˆ˜ํ˜• ์—…๋ฐ์ดํŠธ๋Š” ์–ด๋–ป๊ฒŒ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” ๊ฒƒ์ผ๊นŒ?

๋งํฌ๋กœ ๋„ฃ์€ ๋ฌธ์„œ์— ๋”ฐ๋ฅด๋ฉด setState์— ํ•จ์ˆ˜๋กœ ์ธ์ž๊ฐ€ ๋“ค์–ด์˜ฌ ์‹œ update ํ์— ๋„ฃ๊ณ  ์ˆœ์ฐจ์ ์œผ๋กœ ์—…๋ฐ์ดํŠธ๋ฅผ ์‹คํ–‰ํ•œ๋‹ค๊ณ  ํ•œ๋‹ค.

Object Composition๊ณผ๋Š” ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์œผ๋กœ ์—…๋ฐ์ดํŠธ๋ฅผ ์‹คํ–‰ํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

๋ฆฌ์•กํŠธ์˜ ๋‚ด๋ถ€๊ฐ€ ์–ด๋–ป๊ฒŒ ๋˜์–ด์žˆ๋Š”์ง€๋Š” ๋ชจ๋ฅด๊ธฐ ๋•Œ๋ฌธ์— ์ƒ์„ธํ•˜๊ฒŒ๋Š” ์„ค๋ช…ํ•  ์ˆ˜ ์—†๋‹ค.

์š”์•ฝ

  1. setState๋Š” ๋น„๋™๊ธฐ์ ์œผ๋กœ ์ž‘์—…ํ•œ๋‹ค. ๊ทธ ์ด์œ ๋Š” ๋ Œ๋”๋ง ๋น„์šฉ์„ ์ตœ์ ํ™”ํ•˜๊ธฐ ์œ„ํ•จ.
  2. ํ•จ์ˆ˜ํ˜• ์—…๋ฐ์ดํŠธ๋ฅผ ํ†ตํ•ด ๋น„๋™๊ธฐ์ ์ธ ์ž‘์—…์œผ๋กœ ์ธํ•œ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค. ๋น„๋™๊ธฐ์ ์œผ๋กœ ์ž‘์—…ํ•œ๋‹ค๋Š” ๊ฒƒ์„ ๋ง‰๋Š” ๊ฑด ์•„๋‹˜.
  3. ์—…๋ฐ์ดํŠธ์— ์ „๋‹ฌํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ๋”ฐ๋กœ ๋บ„ ์ˆ˜๋„ ์žˆ๋‹ค.
const increaseCount = (prev) => {
  return prev + 1;
};

const decreaseCount = (prev) => {
  return prev - 1;
};

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <>
      <div>{count}</div>
      <button onClick={() => setCount(increaseCount)}>+</button>
      <button onClick={() => setCount(decreaseCount)}>-</button>
    </>
  );
};

๋‹ค์Œ๊ณผ ๊ฐ™์ด ๊ด€์‹ฌ์‚ฌ๋ฅผ ๋ถ„๋ฆฌํ•ด ์„ ์–ธ์ ์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ๋‹ค!

profile
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋กœ ๊ฑธ์–ด๊ฐ€๋Š” ์ค‘์ž…๋‹ˆ๋‹ค.

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

comment-user-thumbnail
2022๋…„ 5์›” 29์ผ

๋ฉ‹์ก

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ