์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
- ์ปค์คํ
- ๊นํ์๋ฌ
- ๊นํ์ฌ์ดํธ
- svg์
- ์ปด๊ณต์ ๋ฐฐ
- axios์ธ์คํด์ค
- ํผ์ ๊ณต๋ถํ๋ ๋จธ์ ๋ฌ๋
- ์๋ฆฟ์์ ํ
- ๋ฅ๋ฌ๋
- ํผ๊ณต๋จธ์
- java 11 ์ค์น
- ์ฒดํฌ๋ฐ์ค์ปค์คํ
- CSS
- ๋จธ์ ๋ฌ๋
- ์ทํ๊ท๊ฑธ์ด
- ios
- ICT์ง์
- ICTํ๊ธฐ
- api๊ณตํตํ
- XCode
- react
- ํ๋ก ํธ์๋
- styled-components
- M1
- ICT์ธํด์ญ
- ์์ด๋์ค๋ณต
- ์์
- ๊ณผ๋์ ํฉ๊ณผ ๊ณผ์์ ํฉ
- ํ ์คํธ ์ธํธ
- ๋งฅ๋ถ
- Today
- Total
๋ชฉ๋กํ ๊ธ (1)
Hi-๋๐ High-๋โ๏ธ

๋ด๊ฐ ํ๋ ํ๋ก์ ํธ์์ ์๋ฆผ ์ค์ ์ ์ํด ํ ๊ธ ์ค์์น๋ฅผ ๋ง๋ค์ด์ผ ํ๋ค. 1. ํ ๊ธ ์ค์์น๋? ๐ก ํ ๊ธ ์ค์์น ํ ๊ธ ์ค์์น๋ ์ฐ๋ฆฌ๊ฐ ํํ ์๋ ๋ฌผ๋ฆฌ์ ์ค์์น์ฒ๋ผ "ON/OFF"์ ๊ฐ์ด ๋๊ฐ์ง ๋ฐ๋๋๋ ์ํ๋ฅผ ๋ค๋ฃฐ ๋ ์ฌ์ฉํ๋ค. ์ฌ์ฉ์๊ฐ ์ค์์น๋ฅผ ๋๋ฅผ ๋๋ง๋ค ์ํ๊ฐ ๋ณ๊ฒฝ๋ ์ ์๋๋ก ํด์ผํ๋ค. 2. ํ ๊ธ ์ค์์น ๊ตฌํ ๊ฒฐ๊ณผ 3. ์ค์ Point ๐ฑ props ์ด์ฉํ๊ธฐ props๋ก toggle์ ์ํ(on/off)๋ฅผ ๋๊ฒจ์ฃผ์ด css ๋ถ๋ถ์์ ์กฐ๊ฑด๋ถ๋ก ์คํ์ผ๋ง์ด ๊ฐ๋ฅํ๋๋ก ๋ง๋ค์๋ค. (ex) ${props => props.isToggleOn ? 'background-color: #7BAB6E' : 'background-color: #CECECE' }; ๐ฑ transition ์ฌ์ฉํ๊ธฐ ํ ๊ธ ๋ฒํผ์ด ์์ฐ์ค๋ฝ๊ฒ ์์ง์ผ..