Dev-Log 4월 4일

오늘은 무엇을 했는가?

• 공부하기

Styled Components

1. 스타일드 컴포넌트란?
   대표적인 CSS-in-JS 라이브러리로 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법
   Template Literal(` `,$,{}를 사용하여 표현식을 표기하는 방법)을 사용해 스타일을 지정할수 있고, 동적으로 props를 내려받아 사용도 가능
2. 선정 이유?
   1) 별도의 CSS 파일 만들 필요가 없어 파일 관리가 용이함.
   2) 파일명, 클래스네임명 등 고민의 시간이 줄어든다.
   3) 해당 컴포넌트에서 수정 하기 때문에 파일 이동이 적어 작업이 편하다.
   4) export하여 재사용 할 수도 있다.
3. 설치하기

자바스크립트 
npm i styled-components
타입스크립트 
npm i --save-dev @types/styled-components

4. 사용 예제
   참고한 블로그

버튼 만들기 예제
import React from 'react';
import styled, { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    margin: 50px;
    padding: 50px;
    background-color: black;
  }
`;

const Container = styled.div`
  background-color: lightgray;
  width: 100%;
  height: 100vh;
`;

const Button = styled.button`
  color: white;
  min-width: 120px;

  /* props로 넣어 준 값을 직접 전달해 줄 수 있습니다. */
  background-color: ${(props) => props.color || 'blue'};

  /* & 문자를 사용하여 Sass 처럼 자기 자신 선택이 가능합니다. */
  &:hover {
    background-color: white;
    color: black;
  }
  & + button {
    margin-left: 1rem;
  }
`;

export default function App() {
  return (
    <Container>
      <GlobalStyle />
      <Button>버튼1</Button>
      <Button color='red'>버튼2</Button>
    </Container>
  );
}

오늘 힘든 점은 무엇인가?

• CSS가 제일 어렵다 진짜..

내일은 무엇을 해야 하나?

• 반응형 웹 공부 하기