Coding Story

vscode-styled-components 자동완성 되는지 모르고 일일히 다 치고 에러고쳤던 지난날의 나 ..^^ 이 플러그인을 설치하면 기존 css처럼 자동완성이 가능하다. 좋타

노마드코더 리액트 마스터 클래스 #2 STYLED COMPONENT index.js import React from "react"; import ReactDOM from "react-dom"; import { ThemeProvider } from "styled-components"; import App from "./App"; const darkTheme = { textColor: "whitesmoke", backgroundColor: "#111", }; const lightTheme = { textColor: "#111", backgroundColor: "whitesmoke", }; ReactDOM.render( , document.getElementById("root") ); App.js import..

import styled from "styled-components"; const Father = styled.div` display: flex; `; const Input = styled.input.attrs({ required: true })` background-color: tomato; `; function App() { return ( ); } export default App; As as 라는 props를 사용하면 명시한 태그로 컴포넌트를 사용할 수 있다. Father 컴포넌트는 header가 된다. Attrs attrs 뒤에 대괄호 안에는 input으로 전달된 모든 속성을 가진 오브젝트를 담을 수 있다. 모든 input 에 required: true가 적용된다.

노마드코더 React JS 마스터 클래스 #2 STYLED COMPONENTS npm i styled-components 로 styled-components를 설치해준다. import styled from "styled-components"; function App() { return ( ); } export default App; 기존의 코드는 태그 안에 일일히 style을 지정해주는 것이였다. styled component 사용하면 className이나 style을 사용할 필요가 없다. styled component에서 import한 styled를 이용한다. div를 사용해 닫아줄 필요가 없다. 모든 style은 컴포넌트를 사용하기 전에 미리 컴포넌트에 포함된다. css코드를 css 방식 그대로 쓸 ..