๋ฆฌ๋ค๊ธฐ2 [React] styled-components ๐๋ฆฌ์กํธ๋ฅผ ๋ค๋ฃจ๋ ๊ธฐ์ ๐์ ๊ณต๋ถํ๋ค๊ฐ 14์ฅ์์ ๋ด์ค๋ทฐ์ด๋ฅผ ๋ง๋๋ ๋ถ๋ถ์์ ์ฒ์์ผ๋ก styled-components์ ๋ํ ๋ถ๋ถ์ด ์ธ๊ธ๋์๋ค. ์ด ๋๋ถ์ ํ์ด์ง๋ ์ด์๊ฒ ์์ฑ๋์์ง๋ง ์ css, sass(scss)๋ฅผ ์ด์ฉํ์ง์๊ณ styled-components๋ฅผ ์ฌ์ฉํ ๊ฒ์ผ๊น? ์ด๋ฐ ๊ถ๊ธ์ฆ์ ์ป๊ฒ ๋์ด ๋๋ ๋ค์ ๊ตฌ๊ธ๋ง์ ์์ํ๋ค. ๊ตฌ๊ธ์ "styled-components"๋ฅผ ์ณ๋ณด์๋๋ ์ด ์น์ฌ์ดํธ๊ฐ ๋ด๋ค. ์คํ์ผ๋ ์ปดํฌ๋ํธ์ ๊ณต์ ์น์ฌ์ดํธ์ธ๊ฐ ๋ณด๋ค. ์ด ์ฌ์ดํธ์ ๋ฑ ์ฒ์์ ๋ค์ด๊ฐ์๋ง์ ๋ณด๋ฉด ์ด๋ ๊ฒ ์ฐ์ฌ์ ธ์๋ค. Visual primitives for the component age? ์ผ๋จ ๋ญ ๋น์ฃผ์ผ์ ์ผ๋ก ๋์์ค๋ค๋ ์๋ฆฌ๊ฐ๋ค Use the best bits of ES6 and CSS to style you.. 2021. 2. 3. [React] JSX โ์๋ ๋ด์ฉ์ [๋ฆฌ์กํธ๋ฅผ ๋ค๋ฃจ๋ ๊ธฐ์ ] ์ฑ ์์ ๊ณต๋ถํ ๋ด์ฉ์ ์์ฝํ์์ต๋๋ค. JSX๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ํ์ฅ๋ฌธ๋ฒ์ด๋ฉฐ, XML๊ณผ ๋งค์ฐ ๋น์ทํ๊ฒ ์๊น JSX๋ฅผ ์ฌ์ฉํ๋ฉด,,, ํธํ๊ฒ ๋ ๋๋ง ๊ฐ๋ฅ HTML์ฝ๋์ ์ ์ฌํด์ ๋ณด๊ธฐ ์ฝ๊ณ , ์ต์ ์ปดํฌ๋ํธ๋ฅผ HTMLํ๊ทธ ์ฐ๋ฏ์ด ์ฌ์ฉํ๋ฉด์ ํ์ฉ๋๊ฐ ๋์ ์์) import React from 'react'; function App(){ return( ๋ฆฌ์กํธ ์๋ ! ์ ์๋ํ๋? ); } export default App; ์์ ์ฝ๋์ฒ๋ผ h1ํ๊ทธ์ h2ํ๊ทธ๊ฐ divํ๊ทธ ํ๋๋ก ๊ฐ์ธ์ ธ์๋ค. ์ด๋ ๊ฒ ๋ฆฌ์กํธ ์ปดํฌ๋ํธ์์ ์์ ์ฌ๋ฌ ๊ฐ๋ฅผ ํ๋์ ์์๋ก ๊ฐ์ธ๋ ์ด์ ? ์ปดํฌ๋ํธ ๋ด๋ถ๋ ํ๋์ DOM ํธ๋ฆฌ ๊ตฌ์กฐ๋ก ์ด๋ฃจ์ด์ ธ์ผ ํ๋ค๋ ๊ท์น์ด ์๊ธฐ ๋๋ฌธ ์กฐ๊ฑด๋ถ ์ฐ์ฐ์ JSX ๋ด๋ถ์ ์๋ฐ์คํฌ๋ฆฝํธ .. 2020. 12. 23. ์ด์ 1 ๋ค์ ๋ฐ์ํ