[리액트 기초반] 2주차 - styled-components

변시윤·2021년 11월 18일
0

styled-components란?

컴포넌트 스타일링 기법 중 하나로 class 이름을 지정하지 않아도 된다는 이점이 있다. 또한 컴포넌트에 스타일을 직접 적기 때문에 생성과 수정이 쉽고 직관적이다.


1.프로젝트 설치

yarn add styled-components

이전에 설치했던 프로젝트와 달리 sytled-components는 나의 리액트 프로젝트 안에 패키지를 설치한다. 그래서 경로를 반드시 내가 설치하려는 프로젝트 안으로 설정해야 한다. package.json > "dependencies" 안에 프로젝트에 쓰이는 모든 패키지가 기록되기 때문이다.



2.적용

2-Ⅰ. import

import styled from "styled-components";

2-Ⅱ. 객체

const MyStyled = styled.div`
  width: 50vw;
  height: 150px;
  background: skyblue;
  `;

2-Ⅰ에서 styled를 import 했기 때문에 styled이라는 객체를 만들어야 한다. 객체 안에는 css와 같은 방법으로 style을 주면 된다.

2-Ⅲ. render

  render() {
    return (
      <div className="App">
        <MyStyled/>  
      </div>
    );
  }

선언한 객체를 render 안에 넣으면 적용 완료.



3. props

<MyStyled bg_color={"red"}/>

bg_color라는 이름의 props를 주었다. style-components 역시 컴포넌트이기 때문에 props를 줄 수 있다.

const MyStyled = styled.div`
  width: 50vw;
  height: 150px;
  background-color: ${(props) => (props.bg_color)};
`;

props로 받아온 데이터 중 bg_color를 꺼낸 모습이다.
backtick(`) 안에서 props로 받아온 데이터를 활용할 땐 ${자바스크립트}를 사용한다.
return과 마찬가지로 삼항연산자와 변수는 사용 가능하나 if문과 for문은 쓸 수 없다.

중괄호 함수 {}

${(props) => {
	return props.bg_color;
    }}

화살표 함수 =>

${(props) => (props.bg_color)

중괄호{} 공식을 축약하면 화살표 함수가 된다.

삼항연산자

<MyStyled bg_color={"true"}/>
${(props) => (props.bg_color? "blue" : "green")};

삼항연산자를 활용하면 다음과 같은 응용도 가능하다.



4. SCSS

SCSS 문법이란?

CSS를 보다 효율적이고 편리하게 사용하기 위해 만들어진 언어. CSS와 CSS의 확장문법인 SASS의 중간쯤이라고 생각하면 된다.

예시

  • html
<MyStyled>
    <div>
    	<p>hello, world!</p>
    </div>
</MyStyled> 
  • CSS
.MyStyled {
	margin: auto;
    }
.MyStyled > div {
	width: 50vw;
    	height: 150px;
        background: skyblue;
        }
.MyStyled > div > p {
	color: white;
    }
.MyStyled > div > p:hover {
	color: yellow;
    }
.MyStyled {
	margin: auto;
    div {
    	width: 50vw;
    	height: 150px;
        background: skyblue;
        	p {
            	    color: white;
                    &:hover: { color: yellow; }
                }
     }
}                            

예시를 SCSS 문법으로 치환했다. 반복적인 부모 클래스를 일일이 적어줄 필요가 없기 때문에 경제적이고, html과 유사한 구조를 갖고 있어서 직관적이다. 이를 Nesting이라고 한다. 가상선택자를 사용할 땐 &를 붙인다. &는 나 자신을 지칭한다.



🧠 Quiz

지난 시간에 만든 버킷리스트의 style을 css에서 styled-components로 바꿔보자.

정답

App.js

render() {
    return (
      <div className="App">
        <Container>
          <Title >내 버킷리스트</Title>
          <Line/>
          <BucketList list={this.state.list} />
        </Container>
      </div>
    );
  }
const Container = styled.div`
  max-width: 350px;
  min-height: 80vh;
  background-color: #fff;
  padding: 16px;
  margin: 20px auto;
  border-radius: 5px;
  border: 1px solid #ddd;
`;

const Title = styled.h1`
  color: slateblue;
  text-align: center;
`;

const Line = styled.hr`
  margin: 16px 0px;
  border: 1px dotted #ddd;
`;

BucketList.js

import React from 'react';
import styled from "styled-components";

    const my_lists = list;

    return (
        <div>
            {
                my_lists.map((list, index) => {
                    console.log(list);
                    return (
                        <ItemStyle key={index}>
                            {list}
                        </ItemStyle >
                    );
                })
            }
        </div>
    );
}

const ItemStyle = styled.div`
    padding: 26px;
    margin: 8px;
    background-color: rgb(250, 247, 216);
`;

export default BucketList;

오답노트

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      list: ["Eternals", "First Cow", "Seberg", "French Dispatch"],
    }
  }

  render() {
    return (
      <Back>
        <MyStyled>
          <div>
            <h2>개봉예정작</h2>
            <hr/>
            <ListItem list = {this.state.list}/>
          </div>
        </MyStyled>    
      </Back>
    );
  }
const Back = styled.div`
background-color: #eee;
height: 100vh;
width: 100vw;
display: flex;
`;

const MyStyled = styled.div`
  height: 80vh;
  background-color: #fff;
  width: 50vw;
  max-width: 350px;
  margin: auto;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 3px;
    h2 {
      color: rgb(146, 105, 184);
      text-align: center;
    }
    hr {
      margin: 16px 8px;
    }
`;

const ListItem = styled.div `
  padding: 26px;
  margin: 8px;
  background-color: rgb(250, 247, 216);
`;

정답에서는 styled.components를 최대한 많이 사용하기 위해 컴포넌트에 객체를 지정했지만 나는 Nesting을 사용해서 코드를 간소화하였다. 여기까지는 방식의 차이인데 props로 받아온 <ListItem list = {this.state.list}/> 이 부분이 틀렸다. BucketList.js로 데이터를 보내주고 있는 걸 깜빡한 것이다. 그래서 <ListItem list = {this.state.list}/>은 App.js가 아니라 BucketList.js에서 style-components를 사용해야 한다. BucketList.js에서도 App.js에서 했던 것과 마찬가지로 style-components를 import 한 뒤 const를 사용하면 된다. 오답대로 작성하면 브라우저에서는 props의 데이터 없이 style만 덩그러니 출력된다.

profile
개그우먼(개발을 그은성으로 하는 우먼)

0개의 댓글