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

시작하기 전에 몇년전부터 각종 OS나 앱에서 다크모드가 나오면서 많은 유저들이 다크모드에 대한 관심이 늘어났다. (아마 내 생각엔 애플?? 제품에서 먼저 나왔던거 같다.) 그러면서 OS세팅에 따른 다크모드/화이트모드 지원이라던지 유저의 설정에 따른 모드 지원을 해주는 사이트가 하나 둘 씩 늘어나고 있는 추세이다. 이번 글에서는 우리도 한번 Styled Component를 이용해서 다크모드를 지원하는 프로젝트 세팅을 해보려고 한다. Styled Component - themeProvider 이 글에서는 다크모드를 지원하는 구조를 Styled Component에서 제공해주는 themeProvider를 이용하여 구현 해볼 것이다. themeProvider란 Context API 기반으로 이루어진 Styled-..

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파일 안에서..