๐ขNotice
- ๊ตฌ์ด์ฒด๋ก ์์ฑ๋์ด ์์ด ์์๋ณด๊ธฐ ํ๋ค ์ ์์
- ๋ฐ๋ ค์๋ TIL์ ์ ๋ฆฌํด๋์ ๊ฒ
- ์ธ์ ๋ฐฐ์ ๋์ง ๋ ์ง๊ฐ ๊ธฐ์ต ์๋จ (์๋ง๋ 7์ 29์ผ)
๐ Styled-components
๐ ์ค์น
- ๋ฆฌ๋์ค์ ๋ฆฌ์กํธ์ฉ ๋ฆฌ๋์ค ์ค์น
yarn add styled-components
๐ ์ด๊ฒ ๋ญ์ง?
- ๊ทธ๋ฅ css ์ฝ๋ ์ ์ฉ๋ HTML ์๋ฆฌ๋จผํธ ๋ง๋ค์ด๋ด๋ ๊ฑฐ ๊ฐ์ ๋๋์ ์ธ ๋๋
- ๊ณ ์ ์คํ์ผ๋ง๊ณผ props๋ฅผ ํตํ ๊ฐ๋ณ ์คํ์ผ๋ง ๊ฐ๋ฅํจ(์ ๊ณตํ๋ cssํจ์๋ฅผ ์ฌ์ฉํ์ฌ ์ฌ๋ฌ๊ฐ ์์ฑ ๋ฌถ์ด์๋ ๊ฐ๋ฅ)
๐ createGlobalStyle
- ์ ์ญ ์คํ์ผ ์ ์ฉ๋ ๊ฐ๋ฅํจ
๐ css nesting(์ค์ฒฉ)
- ํ์
์ .cssํ์ผ์ ๋ฐ๋ก ๋ง๋ค๋ค๊ฐ ํฉ์น๋ฉด ํด๋์ค ๋ช
์ด ์ค์ฒฉ๋๋ ๊ฒฝ์ฐ ๋ฐ์
- ๋์ : sass์ฌ์ฉ๋ ์๋๋ฐ styled-components๋ก ํ๊ธฐ๋ํจ
๐ ์ถ๊ฐ ๋์ ์ธ๊ฑฐ
๐ useState
- setState์ ํจ์ํ ์
๋ฐ์ดํธ ๋ฐฉ์(()=>{}) : ๋ฐฐ์น(batch)์ ์ํฅ๋ฐ์ง์์
๐ useEffect
- ์์กด์ฑ ๋ฐฐ์ด์ด๋? : ๋ฐฐ์ด์์ ์๋๊ฒ ๋ฐ๋์์๋๋ง ์คํํ๋๋ก ํด์ฃผ๋๊ฑฐ, ๋น๋ฐฐ์ด๋ก ์ฃผ๋ฉด ์ฐธ์กฐ๊ฐ ์๊ธฐ์ ํ๋ฒ๋ง ์คํ
- ํด๋ฆฐ์
: useEffect์ return๋ถ๋ถ์ ๊ทธ๋ ๊ฒ ๋ถ๋ฅด๋๋ฏ
๐ ๋ฆฌ๋์ค ์ฉ์ด
- ๋ชฉ์ ์ด๋ ์ก์
๊ฐ์ฒด์ ๋ด์ ๊ฐ์ด ๋ณด๋ด์ค์ผ ํ ๊ฒ
- ์ด๋ ๊ฒ ์ก์
๊ฐ์ฒด์ ๊ฐ์ด ๋ด์ ๋ณด๋ด์ฃผ๋ ๊ทธ ๊ฒ์ payload๋ผ ๋ถ๋ฆ
๐ก ๋์ ์๋ ์๋ณธ ํ
์คํธํ์ผ
- ๋จ๋ณด์ฌ์ฃผ๊ธด ๋ถ๋๋ฌ์์ ๋ ํฌ๋ฅผ private๋ก ๋๋ ค๋จ๋ค
- ๊ทธ๋์ ๋๋ง ๋ณผ์ ์์๊ฑฐ๊ฐ๋ค
somfist-github