SLASH 기술 블로그

styled-component란 + 개인적인 생각이라는 글에서 나는 styled-component가 react에서 스타일을 다룰 때 좋은 것 같다고 했다. 이번 글에서는 나는 어떻게 코드를 작성하는지 보여주려고 한다. styled-component 사용법 보통 여러 styled-component 예제들은 상태의 따른 스타일 변경을 Props를 통해 아래와 같이 작성 할 것이다. 예제1. import React from 'react' import styled from 'styled-components' const Box = styled.div` ${(props) => props.hide && `display: none;`} ` const Example1 = () => { const [hide, setHid..

Styled-component를 알아보기 전에 React는 많은 회사에서 사용할 만큼 프론트엔드 개발자라면 꼭 한번쯤은 경험해봐야 하는 대중적인 UI 라이브러리로 자리 잡았다. 웹 사이트마다 같은 기능을 하는 버튼이나 검색창이라도 각각 다른 애니메이션 효과와 형태를 가지고 있다. 이렇게 HTML 태그에 스타일링을 할 수 있게 도와주는 것이 CSS였다. 하지만 CSS의 단점들을 보완하거나 더 좋은 방향으로 SCSS나 Styled-component와 같은 것들이 하나씩 등장 하게 되었다. 이번 주제에서는 Styled-component에 대해서 알아보고 개인적인 생각을 얘기 해보려고 한다. Styled-component란 Styled-component란 CSS-in-JS라고 하는 Javascript파일 안에서..