230303 - React - styled-components, css, ThemeProvider

오늘 내가 배운 것 styled-components 1. CSS 함수, props 활용하여 동적으로 관리 2. ThemeProvider 1. CSS 함수, props 활용하여 동적으로 관리 리엑트에서 CSS 적용하는 방법으로 `styled-components`를 사용했는데, CSS를 적용시키다 보면 공통된 CSS 내용이 있다. 그러면 조금 간결하게 사용하기 위해서 공통된 내용을 css 함수를 이용하여 따로 뽑아서 사용할 수 있다. import styled, { css } from "styled-components" const flexCenter = css` display: inline-flex; justify-content: center; align-items: center; ` const Button ..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2023. 3. 5.
• textsms

230302 - React - CSS 적용하기

오늘 내가 배운 것 1. React CSS 적용하기 2. 방법 1. inline-style 이용하기 3. 방법 2. CSS파일 import 해서 이용하기 4. 방법 3. CSS Module 이용하기 5. 방법 4. Styled-components ( CSS-in-JS ) 라이브러리 이용하기 1. React CSS 적용하기 SPA의 특성상 URL이 바뀌지 않은 상태로 컴포넌트만 바뀌면서 페이지를 보여주는데, 이를 특성을 이용하면 CSS파일을 한 개만 만들어서 bundle.js 해서 이용하는 것이 정상이다. 하지만 이 과정에서 많은 문제점이 있다. 한 파일을 이용해서 관리를 하기 때문에 많은 내용의 CSS가 한 파일에 있어야 하고, 그러면 나중에 관리가 힘들어진다. 중복되는 CSS가 발생될 수 있고, 정말 ..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2023. 3. 3.
• textsms