8월2일 TIL

🔥목차🔥

1. Styled Components

📖오늘의 TIL 시작!📖

• Styled Components?
  • 우선 개념은 기존 돔을 만드는 방식인 css, scss 파일을 밖에 두고, 태그나 id, class이름으로 가져와 쓰지 않고, 동일한 컴포넌트에서 컴포넌트 이름을 쓰듯 스타일을 지정하는 것을 styled-components 라고 한다
  • 설명을 읽었을때는 정확한 감이 오지 않았었다 하지만 사용 해본 결과 내가 정리한 바로는
    • 결국 css를 js로 가져와서 사용 할 수 있게 해주는것 으로 이해했다
    • 예를들면 Butten을 만들려면 butten classname: simple-butten 이런식으로 지정해준다음 CSS로 넘어가서 효과를 주는데
    • styled components를 사용하면 js에 const simplebutten = styled.butten `
      background-color = red;
    • 이런식으로 하나 정의해두면 다음부터는 저 simplebutten 하나로 css를 거치지않고도 효과를 넣은상태로 사용이 가능해진다
• 그럼 Styled Components는 무조껀적으로 좋은가?
  • 그건아니다 장단점을 한번 살펴볼까 한다
• 장점
  • Scss라이브러리 설치 없이 Scss 문법을 사용할 수 있다.
  • 자유로운 CSS 커스텀 컴포넌트를 만들 수 있다.
  • 컴포넌트의 props를 참조할 수 있으며, props의 값에 따라 스타일을 다르게 코딩 할 수 있다.
• 단점
  • 빠른 페이지 로드에 분리하다

📖오늘 배운것에 대한 오늘의 정리 및 마무리📖

• 오늘은 Styled Conponents에 대해서 사용도 해봤다
• 자세한 코드는 깃에 올릴 예정
• 장점이 단점보다 많다보니 자주 사용할꺼같다
• React개발에는 많이 사용된다고 하니 사용을 많이 해서 익숙해질 필요성이 있는거같다
• 그럼 내일도 화이팅!