๊ด€๋ฆฌ ๋ฉ”๋‰ด

๋ชฉ๋กํ† ๊ธ€ (1)

Hi-๋žŒ๐Ÿ‘‹ High-๋žŒโ˜€๏ธ

[React] Toggle Component ๋งŒ๋“ค๊ธฐ

๋‚ด๊ฐ€ ํ•˜๋Š” ํ”„๋กœ์ ํŠธ์—์„œ ์•Œ๋ฆผ ์„ค์ •์„ ์œ„ํ•ด ํ† ๊ธ€ ์Šค์œ„์น˜๋ฅผ ๋งŒ๋“ค์–ด์•ผ ํ–ˆ๋‹ค. 1. ํ† ๊ธ€ ์Šค์œ„์น˜๋ž€? ๐Ÿ’ก ํ† ๊ธ€ ์Šค์œ„์น˜ ํ† ๊ธ€ ์Šค์œ„์น˜๋Š” ์šฐ๋ฆฌ๊ฐ€ ํ”ํžˆ ์•„๋Š” ๋ฌผ๋ฆฌ์  ์Šค์œ„์น˜์ฒ˜๋Ÿผ "ON/OFF"์™€ ๊ฐ™์ด ๋‘๊ฐ€์ง€ ๋ฐ˜๋Œ€๋˜๋Š” ์ƒํƒœ๋ฅผ ๋‹ค๋ฃฐ ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค. ์‚ฌ์šฉ์ž๊ฐ€ ์Šค์œ„์น˜๋ฅผ ๋ˆ„๋ฅผ ๋•Œ๋งˆ๋‹ค ์ƒํƒœ๊ฐ€ ๋ณ€๊ฒฝ๋  ์ˆ˜ ์žˆ๋„๋ก ํ•ด์•ผํ•œ๋‹ค. 2. ํ† ๊ธ€ ์Šค์œ„์น˜ ๊ตฌํ˜„ ๊ฒฐ๊ณผ 3. ์ค‘์š” Point ๐ŸŒฑ props ์ด์šฉํ•˜๊ธฐ props๋กœ toggle์˜ ์ƒํƒœ(on/off)๋ฅผ ๋„˜๊ฒจ์ฃผ์–ด css ๋ถ€๋ถ„์—์„œ ์กฐ๊ฑด๋ถ€๋กœ ์Šคํƒ€์ผ๋ง์ด ๊ฐ€๋Šฅํ•˜๋„๋ก ๋งŒ๋“ค์—ˆ๋‹ค. (ex) ${props => props.isToggleOn ? 'background-color: #7BAB6E' : 'background-color: #CECECE' }; ๐ŸŒฑ transition ์‚ฌ์šฉํ•˜๊ธฐ ํ† ๊ธ€ ๋ฒ„ํŠผ์ด ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ์›€์ง์ผ..

React 2023. 7. 19. 23:59