일단 Doit

https://styled-components.com/ styled-components Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅🏾 styled-components.com 1. styled-components 사용하기전에 Template Literal에 대해 먼저 알아야 한다. const name = 'template literal'; const message = `string text ${name}`; console.log(message); //string text template literal 간단히 말해서 string에 변수를 조합해서 사용하는 방..

React 2023. 1. 20. 16:48

예전부터 사용하던 CSS 나 SCSS와 같이 Style을 정의해서 사용합니다. 파일 구성 SamplePage.jsx import './style/SamplePage.css'; const SamplePage = () => { return ( {}} /> 제목 ); }; export default SamplePage; 장점 - 기존 퍼블리셔와 역할은 분리할 수 있다. - Style CSS로 파싱하는 작업이 없기 때문에 React Style 보다 속도가 빠르다.

React 2023. 1. 20. 16:43

html Inline Style과 마찬가지로 Html 코드상에 Style을 정의하는 방식입니다. 단, Style을 정의할떄 Object형태로 정의해야 합니다. 작성 예제는 아래와 같습니다. const title = { color: '#000', fontWeight: '700', fontSize: '1.5rem', marginBottom: '40px', marginTop: '20px', display: 'inline-flex', width: '100%', marginLeft: '25px', } const App = () => { return ( ); } export default App; 장점 1) 한 소스에서 Html과 Style 정의가 가능하기 때문에 소스하나만 유지보수 하면 된다. 단점 1) 유지보수..

React 2023. 1. 20. 15:32

3가지 방법을 소개하고자 합니다. 1. Inline Style CSS https://blog.naver.com/innovatorwhy/222962568833 Inline Style CSS html Inline Style과 마찬가지로 Html 코드상에 Style을 정의하는 방식입니다. 단, Style을 정의할떄 ... blog.naver.com 2. Import Style CSS https://blog.naver.com/innovatorwhy/222962581967 Import Style CSS 예전부터 사용하던 CSS 나 SCSS와 같이 Style을 정의해서 사용합니다. 파일 구 SamplePage.jsx ... blog.naver.com 3. CSS in JS : styled-components htt..

React 2023. 1. 20. 15:23