SLASH 기술 블로그

시작하기 Styled Component는 CSS-in-JS를 선호하는 나에게 있어 굉장히 좋은 라이브러리이다. 또한 누군가가 React 프로젝트에서 Style을 선언하는 방식에 대해 고민을 하고 있다면 Styled Component를 소개 해 줄 것이다. 이번 글에서는 Styled Component가 어떤 원리로 CSS-in-JS를 구현 할 수 있는지 간단하게 구현해보면서 이해해보자. CSS-in-JS 핵심 문법 Styled-Components는 styled.{tagName}`` 이런식으로 선언하여 사용하게된다. 이때 ``안에다가 CSS코드를 작성하게 되는데 ``안에 있는 값을 파싱할 수 있게 해주는 것이 Tagged Template Literals 이다. Tagged Template Literals 이..

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..