[9주차] 5. 리액트 컴포넌트 스타일링(2)

리액트 컴포넌트 스타일링

Styled-components

• Styled-components 라이브러리는 CSS in JS(자바스크립트 안에 CSS 작성)와 관련된 것이다.
• CSS in JS 라이브러리 중 가장 인기 많음, emotion도 유명함
• Tagged Template Literal 문법 속성을 활용해서 구현이 되어 있다.
• 설치 : yarn add styled-components
• style 적용하고자 하는 파일 상단에 import styled from "styled-components"; 작성
• 확장 프로그램 vs code-styled-components 설치시 색상 지원, 자동완성지원
• 사용 시
  ${props => props.컴포넌트props이름 && csswidth : 10rem; height : 10rem;}
• 주석 작성 : /주석/

Tagged Template Literal

• template literal : 문자열 안에 특정 자바스크립트 값을 넣어서 조합 시 쉽게 해주는 문법 ` 사용
• Tagged Template Literal 사용시 안에 있는 값들이 분리가 되고 따로 추출되어 배열 안에 들어간 형태로 분리해서 해당 값들을 사용할 수 있다

Polished 스타일 유틸 함수

• 설치 : yarn add polished
• Polished 라이브러리 : darken, lighten 등 색상 변환 함수, cover 함수(자신이 차지할 수 있는 모든 영역 차지), ellipsis 함수(텍스트가 너무 길시 뒤에다 … 붙임)
• polished 유틸 함수 쓸 컴포넌트 파일 상단에 import { 사용할 polished 함수들 } from ‘polished’;

ThemeProvider

• import styled, {ThemeProvider} from "styled-components";
• ThemeProvider로 컴포넌트 코드 감싸기
• ThemeProvider props로 theme= {{}} 작성

@Keyframes

• Transition 효과 구현시 css의 @keyframes 키워드 사용
• 시작과 끝의 css 효과 설정해놓고 이에 따라 애니메이션 효과 부여 가능

투두리스트 만들기

컴포넌트

TodoTemplate

• 투두리스트의 레이아웃 설정하는 역할
• 화면 중앙에 흰색 박스 보여줌

TodoHead

• 오늘의 날짜 요일 보여줌
• 앞으로 해야 할 일이 몇 개 남았는지 보여줌

TodoList

• 할일에 대한 정보가 들어있는 todos라는 배열을 배열내장함수 map을 사용해서 여러 개의 todo item 컴포넌트를 렌더링해주는 역할
• 각 항목들이 todo item
• 각 할일에 대한 정보를 렌더링해주는 컴포넌트
• 좌측 동그라미 누를 시 할일 완료 여부를 toggle 할 수 있다.(
• 할일 완료시 좌측에 체크버튼 나타나고 텍스트 색상이 연해짐
• 항목에마우스 올릴 시 우측에 쓰레기통 아이콘이 나타나고 그 아이콘 누를시 그 항목 삭제할 수 있음

TodoCreate

• 새로운 할일을 등록하는 역할
• 하단부의 초록색 원 버튼을 렌더링 해줌
• 그 초록색원 클릭시 할일 입력할 수 있는 폼 나타나고 버튼 다시 누르면 폼이 사라지게 됨 또는 input에다 무언가를 입력하고 엔터하면 새로운 항목을 추가할 수 있게 함

global style 설정(전역 스타일 설정)

import {createGlobalStyle} from 'styled-components'

const GlobalStyle = createGlobalStyle적용시키고 싶은 전역 스타일;

• 적용시키고 싶은 구간 앞에 < GlobalStyle /> 입력

Context API

• 쓰는 것이 무조건 옳은 것은 아님
• 프로젝트의 규모가 커질 때 굉장히 유용
• state를 위한 context, dispatch를 위한 context 따로 나눠서 하면 개발할 때 편해서 이 패턴을 자주 사용하는 것을 추천

Tips

• 한번에 두개 이상 패키지 설치시 yarn add 패키지 패키지 이렇게 띄어쓰기로 구분