$$config title: styled component keywords: - IT - ... $$ # 라이트모드 다크모드 등의 CSS를 쉽게 적요해주는 오픈 API컴포넌트 모든 css 적용 방법의 단점을 해결해주늩 좋은 기능 랜덤으로 클래스이름을 정의해줌 유효한 html 태그를 지정하고 백틱 안에 css코드 써주기 styled component - props / attrs / as="" : 다양한 기능들 - animation- keyframes : 애니메이션 효과주기 - psudeo selector : 기본 html 태그를 styled component안에서 수정하고 정의하는 것 - state selector : 내가 생성한 컴포넌트를 styled component안에서 수정하고 정의하는 것 - theme : 다크모드 라이트모드전화 ㄴ기능 npm i styled-components ```js import styled from "styled-components"; const Father = styled.div` display: flex; `; const BoxOne = styled.div` background-color: tomato; width: 100px; height: 100px; `; const BoxTwo = styled.div` background-color: teal; width: 100px; heigth: 100px; `; const Text = styled.h1` color: white; `; function App() { return ( Hello! ); } export default App; ``` 겹치지 않는 css코드 사용 ~~~js import styled from "styled-components"; const Father = styled.div` display: flex; `; // 인자 props로 받은 bgColor를 css에 정의 const Box = styled.div` background-color: ${props => props.bgColor}; width: 100px; height: 100px; `; // styled(Box): Box의 css 속성 + 추가하고자 하는 css 적용 const Circle = styled(Box)` border-radius: 50px; `; function App() { return ( {/* bgColor 라는 props를 해당 태그에 인자로 보냄 */} ); } export default App; ~~~ styled component 심화 버전 ~~~js import styled from "styled-components"; const Father = styled.div` display: flex; `; // // 인자 props로 받은 bgColor를 css에 정의 // const Box = styled.div` // background-color: ${props => props.bgColor}; // width: 100px; // height: 100px; // `; // // styled(Box): Box의 css 속성 + 추가하고자 하는 css 적용 // const Circle = styled(Box)` // border-radius: 50px; // `; // const Btn = styled.button` // color: white; // background-color: tomato; // border: 0; // border-radius: 15px; // `; // styled.input.attrs({ required: true }): 여러개의 input태그에 한번의 정의로 동일한 input속성 추가 const Input = styled.input.attrs({ required: true, placeholder: "작성은 한번, 적용은 여러개에" })` background-color: tomato; `; function App() { return ( {/* bgColor 라는 props를 해당 태그에 인자로 보냄 */} {/* 해당 css속성을 사용하고 싶지만, 다른 html태그를 사용하고 싶을 때 */} {/* Login */} {/* as라는 제공 props를 사용해 바꾸고자하는 html태그 정의(모든 태그에 가능) */} {/* Logout */} ); } export default App; ~~~ 다크모드 라이트모드 index,js를 아래와 같이 변경 ~~~js import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import App from './App'; // styled-components 의 theme 사용을 위해 import import { ThemeProvider } from 'styled-components'; const rootElement = document.getElementById('root'); const root = createRoot(rootElement); // 다크 & 라이트 테마에서 어떤 색을 사용할지 구체적으로! 컴포넌트로 생성 const darkTheme = { textColor: "whitesmoke", backgroundColor: "#111" } const ligthTheme = { textColor: "#111", backgroundColor: "whitesmoke" } root.render( {/* 감싸주기, props로 theme 전달 */} , ); app.js를 아래와 같이 변경 ~~~js import styled from "styled-components"; const Wrapper = styled.div` display: flex; height: 100vh; width: 100vw; justify-content: center; align-items: center; background-color: ${props => props.theme.backgroundColor} `; const Text = styled.h1` color: ${props => props.theme.textColor}; `; function App() { return ( Hello~~ ); } export default App; ~~~~ timescript를 이용하면 에러를 잡아줄 수 있음 다음 게시물과 연결됨

게시글 상세