2023.09.15(React JS필기 정리)

Today do list

⦁ styled component

TIL

• styled component

import React from 'react'
// 스타일컴포넌트 설치
// npm i styled-component
//styled component css 적용 시 자동완성은
//vscode-styled-components 익스텐션을 받으면 됨
import styled from 'styled-components'

// styled component 사용법 잘보기 styled. 뒤에 오는 것은 html 태그가 와야된다.
// 그다음 ``안에는 css코드가 와야한다.
const Father = styled.div`
  display: flex;
`
const BoxOne = styled.div`
  background-color: teal;
  width: 100px;
  height: 100px;
`

const BoxTwo = styled.div`
  background-color: tomato;
  width: 100px;
  height: 100px;
`
const Text = styled.span`
  color: white;
`

const Styledcomponent = () => {
  return (
    <Father>
      <BoxOne>
        <Text>Hello!</Text>
      </BoxOne>
      <BoxTwo></BoxTwo>
    </Father>
  )
}

export default Styledcomponent

Retrospection

• 포트폴리오를 만들고 이걸 보니 이론적으로 css파일을 따로 만들지 않고도 FE를 구현 가능하지 않을까?

• 아..... 반응형때문에 안될수도 있겠다...

Tommorrow do list