[React] 리액트 styled-components

15. 리액트 styled-components

🤯 리액트 styled-components 설치

• 명령어를 통하여 최신 버전의 리액트 style-components 설치

# npm을 사용하는 경우

npm install --save styled-components

# yarn응ㄹ 사용하는 경우

yarn add styled-components

• 스타일이 잘 적용되었다면 회색 배경에 흰색 글씨로 안녕 리액트라는 문자열을 출력하는 컴포넌트가 잘 작동하면 이러한 화면이 등장

• 리액트 styled-components의 MainPage.jsx 파일을 생성하여 코드를 작성한 후 꼭 index.js 파일에서 Mainpage를 import 해주어야 npm 실행 명령어인 npm start 작성시 실행 가능

🤯 리액트 styled-components 사용

• 스타일드 컴포넌트 (styled-components) 는 태그드 템플릿 리터럴(tagged template literal)을 사용하여 구성요소의 스타일을 지정
• 템플릿 리터럴은 자바스크립트가 제공하는 문법 중 하나

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

const Wrapper = styled.div`
	padding: 1em;
    background: grey;
`;

• Styled 컴포넌트는 태그드 템플릿 리터럴을 사용하여 CSS 속성이 적용된 React 컴포넌트를 만들어줌
• Styled 컴포넌트를 사용하는 기본적인 방법은 백틱(``)으로 둘러싸인 문자열 부분에 CSS  속성을 넣고 태그함수 위치에는 styled.html 태그 형태로 사용
• 해당 엘리먼트 태그에 CSS 속성들이 적용된 형태의 React 컴포넌트가 만들어짐

🤯 리액트 styled-components의 props 사용

• styled 컴포넌트에서는 조건이나 동적으로 변하는 값을 스타일링하기 위해 props 기능을 제공함
• 리액트 컴포넌트의 props와 같은 개념으로 이해하면 됨

• styled 컴포넌트를 사용하는 부분의 css 속성을 보면 내부에 props가 사용된 것을 알 수 있음
• props는 해당 컴포넌트에 사용된 props를 의미
• 실제 버튼 컴포넌트를 사용하는 부분의 코드를 보면 props로 dark를 넣어주는 것을 볼 수 있음
• 실제 버튼 컴포넌트에 들어간 props는 그대로 styled 컴포넌트로 전달
• styled 컴포넌트를 사용하여 다양한 스타일을 자유자재로 구현할 수 있음

🤯 리액트 styled-components의 스타일 확장하기

• styled 컴포넌트를 사용하면 React 컴포넌트가 생성됨
• 생성된 컴포넌트를 기반으로 추가적인 스타일을 적용하고 싶을 경우에는 styled 컴포넌트의 스타일 확장 기능 사용

• 버튼 컴포넌트는 HTML의 버튼 태그를 기반으로 만들어진 단순한 버튼
• 라운디드 버튼 컴포넌트는 HTML 태그가 빠져 있고 버튼 컴포넌트가 괄호로 둘러싸인 채로 들어가 있는 것을 볼 수 있음
• HTML 태그가 빠져 있고 버튼 컴포넌트가 괄호로 둘러싸인 채로 들어가 있는 스타일이 다른 컴포넌트의 스타일을 확장해서 사용하는부분
• 라운디드 버튼 컴포넌트는 버튼 컴포넌트의 모서리를 둥글게 만든 컴포넌트
• 더 다양한 형태로 확장할 수 있음

🤯 리액트 리터럴(literal)

• 리터럴은 소스 코드에 고정된 값을 의미
•  상수와 둘은 다른 개념

let number = 20;

• 대입 연산자의 왼쪽에는 number라는 이름의 변수가 등장하고 오른쪽에는 정수 20이 등장
• 정수 20은 number라는 변수를 가진 소스 코드에 고정된 값을 의미

// 정수 리터럴 (Integer literal)
const myNumber = 10;

// 문자열 리터럴 (String literal)
const myStr = "Hello";

// 배열 리터럴 (Array literal)
const myArray = [];

// 객체 리터럴 (Object literal)
const myObject = {};

• 여러 종류의 리터럴이 나와 있음
• 변수를 선언할 때 var나 let을 사용하지 않고 상수를 의미하는 컨스턴스(const)를 사용
• 컨스턴스를 선언하게 되면 해당 변수들이 모두 상수가 됨
• 상수는 변하지 않는 수를 의미하고 한 번 선언된 이후에 값을 변경할 수 없음
• 대입 연산자의 오른쪽에 있는 값들이 모두 리터럴이 됨

🤯 리액트 템플릿 리터럴(template literal)

• 템플릿 리터럴은 리터럴을 템플릿 형태로 사용하는 자바스크립트 문법
• 역따옴표(` `)라고 부르는 백틱스를 사용하여 문자열을 작성하고 그 안에 대체 가능한 익스프레션을 넣는 방법
• 익스프레션을 대체라는 뜻을 가진 Substitution라고 부름

// Untagged template literal
// 단순한 문자열
`string text`

// 여러 줄(Multi-line)에 걸친 문자열
`string text line 1
 string text line 2`
 
 // 대체 가능한 expression이 들어있는 문자열
`string text ${expression} string text`

// Tagged template literal
// myFunction의 파라미터로 expression으로 구분된 문자열 배열과 expression이 순서대로 들어간 형태로 호출됨
myFunction `string text ${expression} string text`;

• UntaggedTemplateLiteral은 보통 문자열을 여러 줄에 걸쳐서 작성하거나, 포메팅을 하기 위해 사용
• 태그드 템플릿 리터럴 (TaggedTemplateLiteral)은 앞에 나와 있는 태그 평션을 호출하여 결과를 리턴
• 태그 평선의 파라미터는 익스프레션으로 구분된 문자열 배열과 익스프레션이 순서대로 들어가게 됨

• myTagFunction이라는 이름의 태그 평션에 파라미터와 익스프레션이 각각 어떻게 들어가는지 쉽게 파악
• 태그드 템플릿 리터럴을 사용하면 문자열과 익스프레션을 태그 평선의 파라미터로 넣어 호출한 결과를 받게 됨

 

공부한 자료

https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A% B8/dashboard

[지금 무료] 처음 만난 리액트(React) 강의 | Inje Lee (소플) - 인프런