리액트 숙련주차 - 1

1. Styled Components

ⅰ.  CSS -in - Js

• CSS - in - js 란 자바스크립트 코드로 CSS코드를 작성하여 컴포넌트를 꾸미는 방식
• 순수 CSS코드를 자바스크립트를 이용해서 CSS 코드를 만들어 내는 것
• styled-components란?
• styled-components는 우리가 리액트에서 CSS - in JS 방식으로 컴포넌트를 꾸밀수 있게 도와주는 패키지

패키지란, React에는 없는 기능이지만 우리가 추가로 가져와서 사용할 수 있는 써드파티 프로그램
패키지들은 누군가에 의해 만들어 진것으로 npm에 모여있음
사용하고자 하는 패키지를 npm install 또는 yarn add 를 통해서 설치할 수 있음

ⅱ. styled-components

• vscode 터미널에서 아래 명령을 입력해서 패키지를 설치

yarn add styled-components

• styled-components의 기본적인 원리는 꾸미고자 하는 컴포넌트를 스타일드 컴포넌트의 방식대로 생성한 후 그안에 스타일 코드를 작성하는 방식으로 진행됨

ⅲ. styled-components 사용하기

• 기본적인 사용방법

// 먼저 import 해줘야함
import { styled } from 'styled-components'

const 변수명 = styled.태그`
 css 코드 작성
`

• 조건부 스타일링이란?
  • CSS방식으로 작성하려면 if문이나 삼항연산자들을 사용할 수 없지만 styled-components를 사용하면 적용할 수 있음
  • 스타일 코드를 JS코드 작성하듯이 스타일 코드를 작성할수 있다는 점!!
  • props를 사용하여 styled-components를 를 구현하면 조건부 스타일링 가능해짐

// 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 (
    <div>
      {/* 2. 그리고 위에서 만든 styled-components를 사용했습니다. */}
      {/* 3. 그리고 props를 통해 borderColor라는 값을 전달했습니다. */}
      <StBox borderColor="red">빨간 박스</StBox>
      <StBox borderColor="green">초록 박스</StBox>
      <StBox borderColor="blue">파랑 박스</StBox>
    </div>
  );
};

export default App;

• 또다른 방식

// src/App.js

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

const StContainer = styled.div`
  display: flex;
`;

const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.borderColor};
  margin: 20px;
`;
// 박스의 색을 배열에 담습니다.
const boxList = ["red", "green", "blue"];

// 색을 넣으면, 이름을 반환해주는 함수를 만듭니다.
const getBoxName = (color) => {
  switch (color) {
    case "red":
      return "빨간 박스";
    case "green":
      return "초록 박스";
    case "blue":
      return "파란 박스";
    default:
      return "검정 박스";
   }
};
const App = () => {
  return (
    <StContainer>
			{/* map을 이용해서 StBox를 반복하여 화면에 그립니다. */}
      {boxList.map((box) => (
        <StBox borderColor={box}>{getBoxName(box)}</StBox>
      ))}
    </StContainer>
  );
};

export default App;

ⅳ. 정리

• CSS - in - JS란 자바스크립트로 CSS코드를 작성하는 방식
• props를 통해서 부모 컴포넌트로부터 값을 전달받고, 조건문을 이용해서 조건부 스타일링이 가능해짐

 styled-components에서 가장 중요한거는
npm i styled-components 나 yarn add styled-components
import { styled } from styled-components
const 변수명 = styled.html요소`
  css 
` 

2.  styled-components => GlobalStyles, Sass, css reset

ⅰ.GlobalStyles(전역 스타일링)

• 전역스타일링이란?
  • styled-components는 해당 컴포넌트 내에서만 사용했었는데 프로젝트 전체를 아우르는 스타일이 필요할 때가 있음
  • 이 경우를 전역적으로(globally) 스타일을 지정한다고 함
    => 이때 적용하는 방법이 바로 전역 스타일링
• 컴포넌트 단위의 스타일링

import styled from "styled-components";

function TestPage(props) {
  return (
    <Wrapper>
      <Title>{props.title}</Title>
      <Contents>{props.contents}</Contents>
    </Wrapper>
  );
}

const Title = styled.h1`
  font-family: "Helvetica", "Arial", sans-serif;
  line-height: 1.5;
  font-size: 1.5rem;
  margin: 0;
  margin-bottom: 8px;
`;

const Contents = styled.p`
  margin: 0;
  font-family: "Helvetica", "Arial", sans-serif;
  line-height: 1.5;
  font-size: 1rem;
`;

const Wrapper = styled.div`
  border: 1px solid black;
  border-radius: 8px;
  padding: 20px;
  margin: 16px auto;
  max-width: 400px;
`;

export default TestPage;

📚  기본적으로 해당 컴포넌트 내에서 쓰이는 스타일링 => 지역 스타일링
공통적으로 적용되는 스타일 부분을 빼줄 필요가 있음

• GlobalStyles 적용

// GlobalStyle.jsx
import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  body {
    font-family: "Helvetica", "Arial", sans-serif;
    line-height: 1.5;
  }
`;

export default GlobalStyle;

// App.jsx
import GlobalStyle from "./GlobalStyle";
import BlogPost from "./BlogPost";

function App() {
	const title = '전역 스타일링 제목입니다.';
	const contents = '전역 스타일링 내용입니다.';
  return (
    <>
      <GlobalStyle />
      <BlogPost title={title} contents={contents} />
    </>
  );
}

export default App;

ⅱ.  Sass 소개

• Sass(Syntactically Awesome Style Sheets)란?
  • css를 전통적인 방법보다 효율적으로 사용하기 위해 만들어진 언어
  • css는 웹 프로젝트 규모가 커질수록 코드가 복잡해지고 유지보수도 불편
    
  • 코드의 재사용성을 높이고 가독성 또한 향상시켜줄 수 있는 방법이 바로 Sass

// 변수화 시켜서 사용할 수 있음
$color: #4287f5;
$borderRadius: 10rem;

div {
	background: $color;
	border-radius: $borderRadius;
}

// 중첩할 수 있음
label {
      padding: 3% 0px;
      width: 100%;
      cursor: pointer;
      color: $colorPoint;

      &:hover {
        color: white;
        background-color: $color;
      }
}

// 다른 style 파일을 import 할 수 있음
// common.scss
// colors
$color1: #ed5b46;
$color2: #f26671;
$color3: #f28585;
$color4: #feac97;
// style.scss
//style.scss
@import "common.scss";

.box {
	background-color: $color3;
}

ⅲ. CSS reset

• css reset이란?
  • 브라우저는 기본적으로 default style을 제공함
  • 이를 초기화하고 우리가 정하는대로만 표현하는 것이 중요함
• css초기화 하기

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}