1. CSS-in-Js란?
- (1) css-in-js란 무엇인가?이번 챕터에서는 조금 더 간편한 방법으로 컴포넌트를 꾸밀 수 있는 CSS-in-Js 방식에 대해 배웁니다.
- CSS-in-JS방식이란, 단어 그대로 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식입니다. 순수한 CSS코드를 우리가 아니라, 자바스크립트를 이용해서 CSS코드를 만들어내는 것이죠. CSS-in-JS 방식을 사용하기 위해 우리는 새로운 패키지를 사용할 것 입니다.
- 우리는 지난 주차에 css파일을 생성하고 그 안에서 CSS를 사용해서 컴포넌트를 꾸몄습니다. 나름 괜찮은 방식이었습니다만, 조금 불편했습니다. 컴포넌트를 만들고 컴포넌트를 꾸미기 위해 css 파일을 만들어서 import 하고 HTML tag 마다 classname를 넣고 CSS 코드를 작성하는 것을 반복해야 했지요.
- (2) styled-components 란 무엇인가?styled-components는 우리가 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀수 있게 도와주는 패키지 입니다. styled-components외에도 다양한 패키지가 있지만, styled-components 예전부터 꾸준히 많은 개발자들에게 선택받은 패키지입니다. 우리도 이번에 한번 배워서 사용해보겠습니다.
패키지란, React에는 없는 기능이지만 우리가 추가로 가져와서 사용할 수 있는 써드파티 프로그램 입니다. 패키지들은 누군가에 의해 만들어진 것으로 npm에 모여 있어요. 우리는 사용하고자 하는 패키지를 npm install 또는 yarn add 를 통해서 설치해서 사용할 수 있어요. 앞으로 이렇게 React에서 자체적으로 제공하지 않지만, 사용하면 우리가 개발하는데 더 유용한 여러 패키지를 사용해볼 예정입니다
styled-components 사용하기
- (1) 기본적인 사용법 알아보기위와 같이 코드를 작성하고 브라우저를 보면, 아래와 같이 스타일링이 된 컴포넌트를 볼 수 있습니다. 이해가 되시나요?가장 핵심이 되는 코드는 const StBox = styled.div
; 이 부분입니다. 처음보면 참 이상하게 생겼죠? 하지만 이 방식대로 styled-components를 만드는 것이 맞습니다! **참고로은 따옴표가 아니라 '백틱'** 이라는 문자입니다. ~ 을 입력할 때 쉬프트 키를 누르지 않으면 백틱을 사용할 수 있습니다.div ➡️ styled.divbutton ➡️ styled.button// src/App.jsimport React from "react"; // styled-components에서 styled 라는 키워드를 import 합니다.import styled from "styled-components"; // styled키워드를 사용해서 styled-components 방식대로 컴포넌트를 만듭니다.const StBox = styled.div` // 그리고 이 안에 스타일 코드를 작성합니다. 스타일 코드는 우리가 알고 있는 css와 동일합니다. width: 100px; height: 100px; border: 1px solid red; margin: 20px; `; const App = () => { // 그리고 우리가 만든 styled-components를 JSX에서 html 태그를 사용하듯이 사용합니다.return <StBox>박스</StBox>; }; export default App; - span ➡️ styled.span
- 그리고 styled. 뒤에는 html의 태그가 옵니다. 아래 처럼 내가 원하는 html 태그를 사용해서 styled-components를 만들 수 있습니다.
- SC의 기본적인 원리는 꾸미고자 하는 컴포넌트를 SC의 방식대로 먼저 만들고, 그 안에 스타일 코드를 작성하는 방식으로 진행합니다. 코드를 보겠습니다.
- (2) 조건부 스타일링이란?
- classname을 사용해서 구현하기는 조금 까다로운 조건부 스타일링을 styled-components를 이용하면 간편하게 할 수 있습니다. 만약에 스타일 코드를 작성할 때 if문을 사용할 수 있다면? , switch문을 사용할 수 있다면? , 삼항연산자를 사용할 수 있다면? 이라는 생각을 혹시 해보셨나요? CSS-in-JS 방식의 강점이 바로 스타일 코드를 JS코드 작성하듯이 스타일 코드를 작성할 수 있다는 점 입니다.
- (3) 조건부 스타일링 구현해보기위 이미지에 보이는 red, green, blue border를 가진 박스를 구현해보겠습니다. 내가 컴포넌트한테 “넌 red야" 라고 하면 red box가 되고, “넌 green box야"라고 말하면 green box가 되게끔 어떻게 해야 할까요?코드를 보겠습니다.위 코드를 한번 분석해볼까요?
-
먼저 styled-component를 생성합니다.
const StBox = styled.div``; -
그리고 생성한 styled-component를 부모 컴포넌트에서 사용합니다. 여기서 부모컴포넌트는 App.js 이겠군요.
const App = () => { return ( <div> <StBox>빨간 박스</StBox> <StBox>초록 박스</StBox> <StBox>파랑 박스</StBox> </div> ); }; -
그리고 이제 우리가 원하는 값, 즉 borderColor를 props로 자식컴포넌트, 여기서는 자식컴포넌트가 styled-components 겠죠? StBox 에 전달합니다.
const App = () => { return ( <div> <StBox borderColor="red">빨간 박스</StBox> <StBox borderColor="green">초록 박스</StBox> <StBox borderColor="blue">파랑 박스</StBox> </div> ); }; -
부모 컴포넌트에서 props를 보냈습니다. 자식 컴포넌트에서는 받아야겠죠? 아래와 같은 모양으로 받습니다. 순서대로 어떻게 된건지 알아볼까요?
- 첫째, 먼저 자바스크립트 코드를 사용하기 위해 ${ } 를 열어줍니다.
- 왜 ${} 를 열어줘야 하나요? 라는 의문이 생긴 분들은 템플릿 리터럴를 공부하고 오세요!
- 둘째, 비어있는 화살표 함수를 열어 줍니다. ${( )=>{ }} 이렇게요.
- 셋째, 함수의 인자에서 prosp를 받아오고, props안에는 부모 컴포넌트에서 보낸 borderColor가 있습니다. 그것을 return 합니다. ${(props)⇒{ return props.borderColor }} 이렇게 리턴하면 (props)⇒{ return props.borderColor } 의 값이 === 'red' 가 되고 결국 우리 눈에는 복잡해보이지만, 브라우저는 border: 1px solid red 라는 코드로 인식하여 스타일링이 되는 것 입니다.
-
const StBox = styled.div
border: 1px solid ${(props) => props.borderColor};;
-
- // src/App.js import React from "react"; import styled from "styled-components"; // 1. styled-components를 만들었습니다. const StBox = styled.div
width: 100px; height: 100px; border: 1px solid ${(props) => props.borderColor}; // 4.부모 컴포넌트에서 보낸 props를 받아 사용합니다. margin: 20px;; const App = () => { return ({/ 2. 그리고 위에서 만든 styled-components를 사용했습니다. /} {/ 3. 그리고 props를 통해 borderColor라는 값을 전달했습니다. /} 빨간 박스 초록 박스 파랑 박스); }; export default App; - 우리는 지난주에 props를 배웠습니다. props는 부모 컴포넌트에서 자식 컴포넌트로 어떤 정보를 전달하고자 할 때 사용합니다. styled-components도 말 그대로 컴포넌트 입니다. 즉, 우리는 box들에게 prosp를 통해서 border color에 대한 정보를 전달해줄 수 있다는 말 입니다.
프론트 요정임