๋ชฉ๋กReact (7)

ram2 ๐Ÿš—

[react] useEffect()

state props . . ํŠน์ • ์ฝ”๋“œ๋“ค์ด ์ฒซ ๋ฒˆ์งธ component render์—์„œ๋งŒ ์‹คํ–‰๋˜๊ฒŒ ํ•˜์ž. ์ฒ˜์Œ ํ•œ ๋ฒˆ๋งŒ..!! ๋‚˜์ค‘์—๋Š” ์ƒํƒœ๊ฐ€ ๋ณ€ํ•ด๋„ ์‹คํ–‰๋˜์ง€ ์•Š๋„๋ก. ์šฐ๋ฆฌ๊ฐ€ state๋ฅผ ๋ณ€๊ฒฝํ•  ๋•Œ ๋ชจ๋“  code๊ฐ€ ๋‹ค์‹œ ์‹คํ–‰๋œ๋‹ค. ํ•˜์ง€๋งŒ ๊ทธ๋Ÿด ํ•„์š”๊ฐ€ ์—†์„ ๊ฒฝ์šฐ!! ์–ด๋–ป๊ฒŒ ํ•ด์•ผํ• ๊นŒ? useEffect๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค. ์ด useEffect๋Š” ๋‘ ๊ฐœ์˜ argument๋ฅผ ๊ฐ€์ง€๋Š”๋ฐ, ์ฒซ ๋ฒˆ์งธ๋Š” ์šฐ๋ฆฌ๊ฐ€ ๋”ฑ ํ•œ ๋ฒˆ๋งŒ ์‹คํ–‰ํ•˜๊ณ  ์‹ถ์€ ์ฝ”๋“œ์ด๋‹ค. ex) useEffect(function1, []) ๋‘๋ฒˆ์งธ๋Š” ... ๋งˆ๋ฒ•๊ฐ™๋‹ค....? ๊ฒฐ๊ตญ, useEffect์— ๋Œ€ํ•ด ๋ฐฐ์› ๋‹ค. ์ด ํ•จ์ˆ˜๋Š” ๊ณ„์† ์‹คํ–‰๋˜์ง€ ์•Š๋„๋ก ํ•˜๋Š” ๊ฒƒ. ํ•œ ๋ฒˆ๋งŒ ์‹คํ–‰ํ•ด๋„ ๋˜๋Š” ๊ฒƒ๋“ค์„ ๋‹ค๋ฃจ๋Š” ํ•จ์ˆ˜์ด๋‹ค. ๋‘ ๋ฒˆ์งธ argument๋Š”.. ์ด๋Ÿด ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค. ํŠน์ •ํ•œ ๋ถ€๋ถ„์ด ๋ณ€..

๐Ÿ–ฅ๏ธ react 2022. 12. 27. 18:21
styled components

์ฒ˜์Œ์œผ๋กœ react๋ฅผ ๊ณต๋ถ€ํ•˜๊ณ  ๋‚˜์„œ css ์‚ฌ์šฉ์— ์ต์ˆ™์น˜ ์•Š๊ณ , ์•„์ง ํ๋ฆ„์„ ์ œ๋Œ€๋กœ ์žก์ง€ ๋ชปํ•œ ์ƒํƒœ์—์„œ ๊ฐœ๋ฐœ์— ์ฐธ์—ฌํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค. ๊ทธ๋ ‡๊ธฐ์— component ์ด๋ฆ„์„ ์–ด๋–ป๊ฒŒ ์ •ํ•˜๋Š”์ง€๋„ ์ž˜ ์•Œ์ง€ ๋ชปํ•ด ํ˜ผ๋ž€์Šค๋Ÿฌ์› ๋‹ค. ์ผ๋‹จ ํ•ด๋ด์•ผํ•œ๋‹ค๋Š” ์ƒ๊ฐ, html, css, js ๋ชจ๋‘ ์ฒ˜์Œ ์‹œ์ž‘ํ•˜๋Š” ๋งŒํผ ๊ฒฐ๊ณผ๋ฌผ์ด ์žˆ์–ด์•ผ ํ•œ๋‹ค๋Š” ์ƒ๊ฐ์— ์ผ๋‹จ ๋›ฐ์–ด๋“ค์—ˆ๋‹ค. ๊ทธ ๊ฒฐ๊ณผ ๋‚˜๋กœ ์ธํ•ด style ๊ฐ„์„ญ์ด ์ผ์–ด๋‚˜๋ฒ„๋ ธ๋‹ค... ๊ฒฐ๊ตญ ๋‚˜๋Š” ์ž ์‹œ ํ”„๋กœ์ ํŠธ์— ์†์„ ๋–ผ๊ฒŒ ๋˜์—ˆ์ง€๋งŒ ์ด๋ฒˆ ์ผ์„ ํ†ตํ•ด style ๊ฐ„์„ญ์ด ๋ฌด์—‡์ธ์ง€ ํ™•์‹คํ•˜๊ฒŒ ์•Œ๊ฒŒ ๋˜์—ˆ๊ณ , ๋‹ค์‹œ๋Š” ๊ฐ™์€ ์‹ค์ˆ˜๋ฅผ ๋ฐ˜๋ณตํ•˜์ง€ ์•Š๊ฒ ๋‹ค๋Š” ๋‹ค์ง์„ ํ–ˆ๋‹ค. ๊ณต์œ  ๋ฐ›์€ styled components์— ๋Œ€ํ•œ ๊ธ€์„ ๊ณต๋ถ€ํ•˜๊ณ , ์ •๋ฆฌํ•œ ๋‚ด์šฉ์ด๋‹ค. styled components์˜ ํ•„์š”์„ฑ ์ค‘๋ณต๋œ ํด๋ž˜์Šค๋ช…์„ ๋งŒ๋“ค๊ฒŒ ๋˜๋ฉด, ๋‹ค..

๐Ÿ–ฅ๏ธ react 2022. 12. 27. 07:45