styled-components

우선 styled-components 사용을 위해 패키지부터 설치해보자.

 

1. styled-components 패키지 설치

* yarn add styled-components

 

2. styled-components 장점

  - class 이름을 별도로 지을필요가없다.

  - 컴포넌트에 스타일을 바로 작성하므로, 간단하고 직관적

 

3. styled-components 적용예시

우리가 설치한 패키지를 import 해오는것을 잊지말자!

 

background-color: ${(props) => (props.bgColor를 ? "red" : "purple")};

→ 삼항연산자를 활용한 배경색 넣기

 

<MyStyled bgColor를={"red"}>hello React!</MyStyled>

→ 이런식으로, 컴포넌트에 바로 스타일을 적용하므로 직관적이고 간단하다. 별도 class 이름을 지을필요도 없다.

 

4. 버킷리스트에 적용된 styled-components 및 전반적인 흐름을 이해해보자!

 

* App.js

import React from "react"; import logo from "./logo.svg"; // BucketList 컴포넌트를 import 해옵니다. // import [컴포넌트 명] from [컴포넌트가 있는 파일경로]; → 임포트 하는 방법은 알아두자! import BucketList from "./BucketList"; import styled from "styled-components"; // 클래스형 컴포넌트 기본형태 class App extends React.Component {      constructor(props) {         super(props); // App 컴포넌트의 state를 정의         this.state = { list: ["영화관 가기", "매일 책읽기", "수영 배우기"],   }; } // 클래스형 컴포넌트는 랜더 함수 안에 리액트 엘리먼트를 넣어준다.       render() {          return (             <div className="App">                   <Container>                   <Title >내 버킷리스트</Title>                   <Line/>                    {/* 컴포넌트를 넣어주는방식 */}                    {/* <컴포넌트 명 [props 명]={넘겨줄 것(리스트, 문자열, 숫자, ...)}/> */}                   <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; `; export default App;  → 다른곳에서도 App.js를 사용하기위해 export 해줘야한다.

* BucketList.js

 

App.js 에서는 임포트하는방법, 클래스형 함수 기본형태, 컴포넌트의 데이터 관리방법(state, props) 등에대한 개념을

이번 코드들을 보면서 다시 개념숙지를 해보도록 하면 좋을 것 같다. 

 

또한, BucketList.js 에서 부모로부터 전달받은 데이터 (props)를 통해 map함수를 돌려서 목록으로 만드는 방법에대해서도 알아보자! 

 

우선은 전반적은 흐름 및 개념에 대해서 알고 있어야 될것같다.