๐Ÿค” React state ๋ถˆ๋ณ€์„ฑ

lim1313ยท2021๋…„ 9์›” 7์ผ
0

TILPLUS

๋ชฉ๋ก ๋ณด๊ธฐ
15/40

state๊ฐ€ ๋ถˆ๋ณ€์„ฑ์„ ์ง€์ผœ์•ผํ•˜๋Š” ์ด์œ 

state๋Š” ๋™์ ์œผ๋กœ ๋ณ€๊ฒฝ๋˜๋Š” ๊ฐ’์ธ๋ฐ, ๋ถˆ๋ณ€์„ฑ์„ ์œ ์ง€ํ•ด์•ผ ํ•œ๋‹ค๋‹ˆ.. ๋ฌด์Šจ ์˜๋ฏธ์ผ๊นŒ?

์—ฌ๊ธฐ์„œ ๋ถˆ๋ณ€์„ฑ์€, ๋ฉ”๋ชจ๋ฆฌ ์˜์—ญ์—์„œ์˜ ์ง์ ‘์ ์ธ ๋ณ€๊ฒฝ์„ ํ•˜์ง€ ์•Š๊ณ , ๊ธฐ์กด์˜ ๊ฐ’์„ ์ˆ˜์ •ํ•˜์ง€ ์•Š์œผ๋ฉด์„œ ์ƒˆ๋กœ์šด ๊ฐ’์„ ๋งŒ๋“ค์–ด๋‚ด๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•œ๋‹ค.

๊ธฐ์กด state์˜ ๋ถˆ๋ณ€์„ฑ์„ ์ง€์ผœ์ฃผ์–ด์•ผ๋งŒ, ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ์—์„œ ์ƒํƒœ๊ฐ€ ์—…๋ฐ์ดํŠธ๊ฐ€ ๋์Œ์„ ๊ฐ์ง€ ํ•  ์ˆ˜ ์žˆ๊ณ  ์ด์— ๋”ฐ๋ผ ํ•„์š”ํ•œ ๋ฆฌ๋ Œ๋”๋ง์ด ์ง„ํ–‰๋˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

๋ถˆ๋ณ€์„ฑ์„ ์ง€์ผœ์•ผ ํ•˜๋Š” ์ด์œ 

  1. ์–•์€ ๋น„๊ต๋ฅผ ํ†ตํ•ด ์ƒํƒœ ๋ณ€ํ™”๋ฅผ ๊ฐ์ง€ํ•˜๊ธฐ ๋•Œ๋ฌธ.
  2. ์ปดํฌ๋„ŒํŠธ ์„ฑ๋Šฅ ์ตœ์ ํ™” ์ž‘์—…์„ ์œ„ํ•จ.

1. ์–•์€ ๋น„๊ต๋ฅผ ํ†ตํ•ด ์ƒํƒœ ๋ณ€ํ™”๋ฅผ ๊ฐ์ง€

const [state,setState] = useState([1,2,3])

const stateChange = () => {
    state.push(4);
    console.log(arr);
    setState(arr);
  };
}

์œ„์˜ ์ฝ”๋“œ๋ฅผ ๋ณด๋ฉด, state๋ผ๋Š” ์ƒํƒœ์— 4๋ฅผ pushํ•ด์ฃผ์—ˆ๋‹ค. push๋Š” ์›๋ž˜์˜ ๋ฐฐ์—ด์„ ๋ณ€๊ฒฝ์‹œํ‚จ๋‹ค. ์ฆ‰, [1,2,3]์˜ ์ฐธ์กฐ๊ฐ’์„ ๊ทธ๋Œ€๋กœ ๊ฐ€์ง„์ฑ„ 4๋ฅผ push ํ•ด์ฃผ์–ด [1,2,3,4]์˜ ๋ฐฐ์—ด์ด ๋œ๋‹ค.

์—ฌ๊ธฐ์„œ ์ค‘์š”ํ•œ ๊ฒƒ์€ ๊ธฐ์กด ์ƒํƒœ์™€ ์ƒˆ๋กœ์šด ์ƒํƒœ๋Š” ์–•์€ ๋น„๊ต๋ฅผ ํ†ตํ•ด ๋ณ€ํ™”๊ฐ€ ๊ฐ์ง€๋œ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค. ์ฆ‰ ์ฐธ์กฐ๊ฐ’์ด ๋™์ผํ•˜๋‹ค๋ฉด ์•„๋ฌด๋ฆฌ ๋ฐฐ์—ด์•ˆ์˜ ์š”์†Œ๊ฐ€ ๋ฐ”๋€Œ์–ด๋„ ๊ฐ์ง€๋˜์ง€ ์•Š๋Š”๋‹ค.

๊ธฐ์กด์˜ ์ฐธ์กฐ๊ฐ’ ์•ˆ์˜ ์š”์†Œ๊ฐ€ ์ˆ˜์ •๋˜์–ด์กŒ๊ธฐ ๋•Œ๋ฌธ์—, ์—…๋ฐ์ดํŠธ๋œ ๋ถ€๋ถ„์„ ๋น„๊ตํ•  ์ˆ˜ ์—†๋‹ค. ์ƒํƒœ ๋น„๊ต๊ฐ€ ๋ถˆ๊ฐ€๋Šฅํ•˜๊ธฐ ๋•Œ๋ฌธ์—, ๋ฆฌ๋ Œ๋”๋ง๋„ ๋ฐœ์ƒํ•˜์ง€ ์•Š๋Š”๋‹ค.

์ด์ฒ˜๋Ÿผ arr์— ๊ณ„์† push๋ฅผ ํ•ด์ฃผ์ง€๋งŒ, ๋™์ผํ•œ ์ฐธ์กฐ๊ฐ’์„ ๊ฐ€์ง„ ์ƒํƒœ์ด๊ธฐ ๋•Œ๋ฌธ์—, ์–•์€ ๋น„๊ต๋ฅผ ํ†ตํ•ด ์ƒํƒœ ๋ณ€ํ™”๋ฅผ ์ธ์‹ํ•˜์ง€ ๋ชปํ•˜๊ฒŒ ๋˜๋Š” ๊ฒƒ์ด๋‹ค.

๋•Œ๋ฌธ์—, state์™€ ์ƒˆ๋กœ์šด state์˜ ๊ฐ’์„ ์ œ๋Œ€๋กœ ๋น„๊ตํ•ด ์ฃผ๊ธฐ ์œ„ํ•ด์„œ๋Š” ๊ธฐ์กด state์˜ ๊ฐ’์€ ๋ถˆ๋ณ€์„ฑ์„ ์ง€์ผœ์•ผ ํ•œ๋‹ค.

2. ์ปดํฌ๋„ŒํŠธ ์„ฑ๋Šฅ ์ตœ์ ํ™” ์ž‘์—…

์—…๋ฐ์ดํŠธ๊ฐ€ ํ•„์š”ํ•œ ๊ณณ์—์„œ๋Š” ์•„์˜ˆ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด ํ˜น์€ ์ƒˆ๋กœ์šด ๊ฐ์ฒด๋ฅผ ๋งŒ๋“ค๊ธฐ ๋•Œ๋ฌธ์—, React.memo๋ฅผ ์‚ฌ์šฉํ–ˆ์„ ๋•Œ props๊ฐ€ ๋ฐ”๋€Œ์—ˆ๋Š”์ง€ ํ˜น์€ ๋ฐ”๋€Œ์ง€ ์•Š์•˜๋Š”์ง€๋ฅผ ์•Œ์•„๋‚ด์„œ ๋ฆฌ๋ Œ๋”๋ง ์„ฑ๋Šฅ์„ ์ตœ์ ํ™” ํ•  ์ˆ˜ ์žˆ๋‹ค.

ํ•˜์ง€๋งŒ, ๋ถˆ๋ณ€์„ฑ์ด ์ง€์ผœ์ง€์ง€ ์•Š์œผ๋ฉด ๊ฐ์ฒด ๋‚ด๋ถ€์˜ ๊ฐ’์ด ์ƒˆ๋กœ์›Œ์ ธ๋„ ๋ฐ”๋€๊ฒƒ์„ ๊ฐ์ง€ํ•˜์ง€ ๋ชปํ•˜๊ธฐ ๋•Œ๋ฌธ์— React.memo์—์„œ ์„œ๋กœ ๋น„๊ตํ•˜์—ฌ ์ตœ์ ํ™” ํ•˜๋Š”๊ฒƒ์ด ๋ถˆ๊ฐ€๋Šฅํ•ด์ง„๋‹ค.

React memo ์ฐธ๊ณ 


๋ถˆ๋ณ€์„ฑ ์ง€ํ‚ค๋ฉด์„œ state ๋ฐ”๊พธ๊ธฐ

๋ฐฐ์—ด์— ์ถ”๊ฐ€

setUsers(state.array.concat(user));

๋ฐฐ์—ด์—์„œ ์‚ญ์ œ

const onRemove = id => {
  // user.id ๊ฐ€ id ์ธ ๊ฒƒ์„ ์ œ๊ฑฐ
  setUsers(users.filter(user => user.id !== id));
};

๋ฐฐ์—ด์—์„œ ์ˆ˜์ •

const onToggle = id => {
  setUsers(
    users.map(user =>
      user.id === id ? { ...user, active: !user.active } : user
    )
  );
};

๊ฐ์ฒด์—์„œ ์ถ”๊ฐ€

setState(state => {...state, key: value})

๊ฐ์ฒด์—์„œ ์ œ๊ฑฐ

setState(state => {..._.omit(state, 'deleteKey')})

๊ฐ์ฒด์—์„œ ์ˆ˜์ •

setState(state => {...state, key: newValue})

์œ„์ฒ˜๋Ÿผ ๋ฐฐ์—ด ํ˜น์€ ๊ฐ์ฒด๋ฅผ ๋ฐ”๊พธ๋ฉด ๋ถˆ๋ณ€์„ฑ์„ ์œ ์ง€ํ•˜๋ฉด์„œ ๋ณ€๊ฒฝ์ด ๊ฐ€๋Šฅํ•˜๋‹ค, ๊ทธ๋Ÿฌ๋‚˜ immer.js๋ฅผ ์ด์šฉํ•˜๋ฉด ์ผ๋ฐ˜ ๊ฐ์ฒด ๋˜๋Š” ๋ฐฐ์—ด์„ ๋‹ค๋ฃจ๋“ฏ ์‚ฌ์šฉํ•˜๋ฉด immer๊ฐ€ ๋ถˆ๋ณ€์„ฑ์„ ์œ ์ง€์‹œ์ผœ์ค€๋‹ค.

immer.js๋Š” ์•„๋ž˜ ๋ธ”๋กœ๊ทธ๋ฅผ ์ฐธ๊ณ ํ•˜๋ฉด ๋œ๋‹ค.


์ฐธ๊ณ 
state ๋ถˆ๋ณ€์„ฑ , immer ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

profile
start coding

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