[React] ๊ณต์‹ ๋ฌธ์„œ / Hook / 3. State Hook ์‚ฌ์šฉํ•˜๊ธฐ

Hook๊ณผ ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ - ๋‘˜ ๋‹ค ๊ฐ€๋Šฅ const Example = (props) => { // ์—ฌ๊ธฐ์„œ Hook์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค! return ; } function Example(props) { // ์—ฌ๊ธฐ์„œ Hook์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค! return ; } state๊ฐ€ ์—†๋Š” ์ปดํฌ๋„ŒํŠธ hook์€ state๋ฅผ ํ•จ์ˆ˜ ์•ˆ์—์„œ ์‚ฌ์šฉ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์คŒ hook์€ ํด๋ž˜์Šค ์•ˆ์—์„œ ๋™์ž‘ X ํ•˜์ง€๋งŒ ํด๋ž˜์Šค๋ฅผ ์ž‘์„ฑํ•˜์ง€ ์•Š๊ณ  ์‚ฌ์šฉ ๊ฐ€๋Šฅ Hook์ด๋ž€? ํŠน๋ณ„ํ•œ ํ•จ์ˆ˜. ์˜ˆ๋ฅผ ๋“ค์–ด useState๋Š” state๋ฅผ ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ ์•ˆ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์คŒ ์–ธ์ œ Hook ์‚ฌ์šฉ? ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ ์•ˆ์— state๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ  ์‹ถ์„ ๋•Œ state ๋ณ€์ˆ˜ ์„ ์–ธ ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ๋Š” this๋ฅผ ๊ฐ€์งˆ ์ˆ˜ ์—†๊ธฐ ๋•Œ๋ฌธ์— this.state๋ฅผ..

WEB 2020. 12. 31. 10:27
[React] ๊ณต์‹ ๋ฌธ์„œ 5. State์™€ ์ƒ๋ช…์ฃผ๊ธฐ

์ด์ „ ๋‚ด์šฉ ๋ณต์Šต [WEB] - [React] ๊ณต์‹ ๋ฌธ์„œ 3. ์—˜๋ฆฌ๋จผํŠธ ๋ Œ๋”๋ง [React] ๊ณต์‹ ๋ฌธ์„œ 3. ์—˜๋ฆฌ๋จผํŠธ ๋ Œ๋”๋ง 3. ์—˜๋ฆฌ๋จผํŠธ ๋ Œ๋”๋ง ์—˜๋ฆฌ๋จผํŠธ React ์•ฑ์˜ ๊ฐ€์žฅ ์ž‘์€ ๋‹จ์œ„ ์ผ๋ฐ˜ ๊ฐ์ฒด React DOM์€ React ์—˜๋ฆฌ๋จผํŠธ์™€ ์ผ์น˜ํ•˜๋„๋ก DOM์„ ์—…๋ฐ์ดํŠธ ๋ถˆ๋ณ€ ๊ฐ์ฒด, ์—˜๋ฆฌ๋จผํŠธ ์ƒ์„ฑ ์ดํ›„ ํ•ด๋‹น ์—˜๋ฆฌ๋จผํŠธ์˜ ์ž์‹์ด๋‚˜ ์†์„ฑ ๋ณ€๊ฒฝ ๋ถˆ๊ฐ€ nakyungim.tistory.com UI๋ฅผ ์—…๋ฐ์ดํŠธ ํ•˜๋Š” ํ•œ ๊ฐ€์ง€ ๋ฐฉ๋ฒ• ์ƒˆ๋กœ์šด ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์ƒ์„ฑ ํ›„ ์ด๋ฅผ ReactDOM.render()๋กœ ์ „๋‹ฌ ๋ Œ๋”๋ง ๋œ ์ถœ๋ ฅ๊ฐ’์„ ๋ณ€๊ฒฝํ•˜๊ธฐ ์œ„ํ•ด ReactDOM.render() ํ˜ธ์ถœ 5. State์™€ ์ƒ๋ช…์ฃผ๊ธฐ ๋ชฉํ‘œ : 1. Clock ์ปดํฌ๋„ŒํŠธ๋ฅผ ์™„์ „ํžˆ ์žฌ์‚ฌ์šฉํ•˜๊ณ  ์บก์Šํ™” ํ•˜๊ธฐ 2. ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์Šค์Šค๋กœ ํƒ€์ด๋จธ ์„ค์ • and ๋งค์ดˆ ์Šค์Šค๋กœ ์—…๋ฐ์ด..

WEB 2020. 12. 30. 15:12