Frontend/React

React | ๋ณ€์ˆ˜ vs State

์ด์ œํฌ 2023. 11. 23. 18:00


๋ณ€์ˆ˜

  • ๊ฐ’์„ ์ง์ ‘ ํ• ๋‹นํ•˜์—ฌ ๋ณ€๊ฒฝํ•œ๋‹ค.
  • ์ž‘์„ฑ๋œ Component ๋‚ด๋ถ€์—์„œ๋งŒ ์‚ฌ์šฉ๋˜๋Š” ๊ฐ’์ด๋‹ค.
  • ๋ณ€์ˆ˜ ๊ฐ’์ด ๋ณ€๊ฒฝ๋˜์–ด๋„ Component๊ฐ€ ๋ฆฌ๋ Œ๋”๋ง ๋˜์ง€ ์•Š๋Š”๋‹ค.
let myVariable = 0;

myVariable = 1;

State 

  • useState๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์„ ์–ธ๋œ State๋Š” setState๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐ’์„ ๋ณ€๊ฒฝํ•œ๋‹ค.
  • ์ž‘์„ฑ๋œ Component ๋‚ด ์™ธ๋ถ€์—์„œ ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ๋‹ค. props๋‚˜ context ๋“ฑ์„ ํ†ตํ•ด ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ๋กœ ์ „๋‹ฌ ๊ฐ€๋Šฅ
  • State ๊ฐ’์ด ๋ณ€๊ฒฝ๋˜๋ฉด Component๊ฐ€ ๋ฆฌ๋ Œ๋”๋ง ๋˜๋„๋ก ํŠธ๋ฆฌ๊ฑฐ ๋œ๋‹ค.
  • ์ƒํƒœ ๊ด€๋ฆฌ๊ฐ€ ํ•„์š”ํ•˜๊ฑฐ๋‚˜, ๋™์  UI ๊ตฌํ˜„์„ ์œ„ํ•ด ์‚ฌ์šฉ๋œ๋‹ค.
const [myState, setMyState] = useState(0);

setMyState(1);
๋ฐ˜์‘ํ˜•