state๋ ๋์ ์ผ๋ก ๋ณ๊ฒฝ๋๋ ๊ฐ์ธ๋ฐ, ๋ถ๋ณ์ฑ์ ์ ์งํด์ผ ํ๋ค๋.. ๋ฌด์จ ์๋ฏธ์ผ๊น?
์ฌ๊ธฐ์ ๋ถ๋ณ์ฑ์, ๋ฉ๋ชจ๋ฆฌ ์์ญ์์์ ์ง์ ์ ์ธ ๋ณ๊ฒฝ์ ํ์ง ์๊ณ , ๊ธฐ์กด์ ๊ฐ์ ์์ ํ์ง ์์ผ๋ฉด์ ์๋ก์ด ๊ฐ์ ๋ง๋ค์ด๋ด๋ ๊ฒ์ ์๋ฏธํ๋ค.
๊ธฐ์กด state์ ๋ถ๋ณ์ฑ์ ์ง์ผ์ฃผ์ด์ผ๋ง, ๋ฆฌ์กํธ ์ปดํฌ๋ํธ์์ ์ํ๊ฐ ์ ๋ฐ์ดํธ๊ฐ ๋์์ ๊ฐ์ง ํ ์ ์๊ณ ์ด์ ๋ฐ๋ผ ํ์ํ ๋ฆฌ๋ ๋๋ง์ด ์งํ๋๊ธฐ ๋๋ฌธ์ด๋ค.
- ์์ ๋น๊ต๋ฅผ ํตํด ์ํ ๋ณํ๋ฅผ ๊ฐ์งํ๊ธฐ ๋๋ฌธ.
- ์ปดํฌ๋ํธ ์ฑ๋ฅ ์ต์ ํ ์์ ์ ์ํจ.
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์ ๊ฐ์ ๋ถ๋ณ์ฑ์ ์ง์ผ์ผ ํ๋ค.
์ ๋ฐ์ดํธ๊ฐ ํ์ํ ๊ณณ์์๋ ์์ ์๋ก์ด ๋ฐฐ์ด ํน์ ์๋ก์ด ๊ฐ์ฒด๋ฅผ ๋ง๋ค๊ธฐ ๋๋ฌธ์, React.memo๋ฅผ ์ฌ์ฉํ์ ๋ props๊ฐ ๋ฐ๋์๋์ง ํน์ ๋ฐ๋์ง ์์๋์ง๋ฅผ ์์๋ด์ ๋ฆฌ๋ ๋๋ง ์ฑ๋ฅ์ ์ต์ ํ ํ ์ ์๋ค.
ํ์ง๋ง, ๋ถ๋ณ์ฑ์ด ์ง์ผ์ง์ง ์์ผ๋ฉด ๊ฐ์ฒด ๋ด๋ถ์ ๊ฐ์ด ์๋ก์์ ธ๋ ๋ฐ๋๊ฒ์ ๊ฐ์งํ์ง ๋ชปํ๊ธฐ ๋๋ฌธ์ React.memo์์ ์๋ก ๋น๊ตํ์ฌ ์ต์ ํ ํ๋๊ฒ์ด ๋ถ๊ฐ๋ฅํด์ง๋ค.
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๋ ์๋ ๋ธ๋ก๊ทธ๋ฅผ ์ฐธ๊ณ ํ๋ฉด ๋๋ค.