[TIL #20] 231108_Styled Components 사용, useState, useEffect

오늘 한 일

---

• [알고리즘] Level.1 5문제
• [내배캠] React 숙련 강의 1~4강

오늘의 알고리즘 풀이

학습 내용

---

Styled Components

1. Styled-componetns란?

(1) CSS-in-Js란?
기존에는 컴포넌트를 만들고 꾸미기 위해 HTML 태그마다 classname을 넣고, css 파일을 만들어서 import 한 후 css파일에 작성을 했다. 이를 더 간편하게 하기 위해 CSS-in-Js 방식을 사용한다. 말 그대로 자바스크립트를 이용해서 CSS코드를 만들어 내는 것이다. 이를 위해 필요한 것이 styled-components 패키지이다.

(2) Styled-components란?
CSS-in-Js 방식으로 컴포넌트를 꾸밀 수 있는 패키지 중 가장 많이 사용하는 패키지이다.
yarn add를 통해 설치하여 사용할 수 있다.

2. Styled-components 사용하기

(1) Styled-components 준비

• VSCode 익스텐션 설치 : vscode-styled-components
• 터미널에서 추가 : yarn add styled-components
  
  

(2) Styled-components 사용

• styled import하기

import styled from "styled-components";

• styled 키워드를 통해 컴포넌트 생성하여 css와 동일한 방식으로 코드 작성
• 백틱 안에 스타일 코드 작성

const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin: 20px;
`;

• 해당 스타일 코드를 적용할 jsx 위치에 태그로 삽입

const App = () => {
  return <StBox>박스</StBox>;
};

💡 Styled-components 장점

• 자바스크립트 방식으로 css를 만들기 때문에 if문, switch문, 삼항연산자 등에도 사용 가능하다.
• classname을 하나 하나 붙일 필요가 없다.
• 조건부 스타일링이 가능하다.

(3) 조건부 스타일링

props를 이용하여 부모 컴포넌트에서 자식 컴포넌트로 정보를 전달하여 특정 스타일만 다르게 적용할 수 있다. 예를 들어서 다른 스타일 속성은 동일하고, border 컬러만 다르게 적용하고 싶을 때 조건부 스타일링을 사용할 수 있다.

• styled-components 생성

const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin: 20px;
`;

• 부모 컴포넌트 App.js에서 props 보내기

const App = () => {
  return (
    <div>
      <StBox borderColor="red">빨간 박스</StBox>
      <StBox borderColor="green">초록 박스</StBox>
      <StBox borderColor="blue">파랑 박스</StBox>
    </div>
  );
};

• 부모 컴포넌트에서 보낸 props를 자식컴포넌트 StBox에서 받기
• ${} 안에서 props를 인자로 받아 props.bodrColor 값이 출력되도록 한다.

const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.borderColor};
  margin: 20px;
`;

Styled Components 전역 스타일링

1. Global Styles (전역 스타일링)

styled-components는 해당 컴포넌트 내에서만 사용했다. 프로젝트 전체에 공통적으로 들어가야 할 스타일을 적용할 때에 전역 스타일링을 한다. (예를 들면 font 전체 적용)

글로벌 스타일 적용

• GlobalStyle.jsx 파일 생성
• Styled components에서 제공하는 createGlobalstyle 사용
• 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;

2. Sass(Syntactically Awesome Style Sheets)

css를 보다 효율적으로 사용하기 위해 만들어진 언어로, 유지 보수에 용이하고 재사용성을 높일 수 있다.

• 변수 사용 가능
• 중첩 가능
• 다른 style 파일 import 가능

$color: #4287f5;
$borderRadius: 10rem;

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

3. css reset

우리가 css를 적용하지 않아도 브라우저별로 default style이 적용되어 있다. 이를 제거하여 초기화 하기 위해 css reset을 사용한다.

React Hooks - useState

1. 함수형 업데이트

기존 업데이트 방식은 배치(batch) 업데이트 방식으로, 모아서 한 번만 실행한다. 이는 렌더링을 줄이기 위한 것으로, 렌더링은 성능과 직결된다. 즉, 렌더링이 많이 일어나면 성능이 좋을 수가 없기 때문에 불필요한 리렌더링을 방지하고자 단일 업데이트로 처리한다.

• 기존 업데이트 방식: 배치(batch) 업데이트
  setState(number + 1)
  배치성으로 처리, 모아서 한번만 실행 → 렌더링을 줄이기 위해

// src/App.js

import { useState } from "react";

const App = () => {
  const [number, setNumber] = useState(0);
  return (
    <div>
      <div>{number}</div> 
      <button
        onClick={() => {
          setNumber(number + 1); // 첫번째 줄 
          setNumber(number + 1); // 두번쨰 줄
          setNumber(number + 1); // 세번째 줄
        }}
      >
        버튼
      </button>
    </div>
  );
}

export default App;

→ 버튼을 누르면 1만 플러스 된다.

• 함수형 업데이트 방식
  setState(() => {})
  수정할 값이 아닌 함수를 넣을 수 있고, 함수의 인자에 현재의 state를 가져올 수 있다.
  명령을 모아 순차적으로 각각 한 번씩 실행, 최신값을 유지할 수 있음

// src/App.js

import { useState } from "react";

const App = () => {
  const [number, setNumber] = useState(0);
  return (
    <div>
      <div>{number}</div>
      <button
        onClick={() => {
          setNumber((previousState) => previousState + 1);
          setNumber((previousState) => previousState + 1);
          setNumber((previousState) => previousState + 1);
        }}
      >
        버튼
      </button>
    </div>
  );
}

export default App;

→ 버튼을 누르면 3씩 플러스 된다.

React Hooks - useEffect

1. useEffect란?

useEffect(() ⇒ {})
리액트 자체에서 사용하는 훅으로, import하여 사용
렌더링될 때마다 특정 작업을 수행해야할 때 설정하는 훅

• 컴포넌트가 화면에 보여졌을 때
• 컴포넌트가 화면에서 사라졌을 때

useEffect의 사용
컴포넌트가 렌더링될 때 useEffect 안에 있는 console.log가 실행된다. 예를 들어 value라는 state를 생성 후 input과 연결시키면, input에 어떤 값을 입력할 때마다 useEffect가 실행된다.
→ state가 계속 변경되기 때문에 리렌더링을 계속 함

import React, { useEffect, useState } from "react";

const App = () => {
  const [value, setValue] = useState("");

  useEffect(() => {
    console.log("hello useEffect");
  });

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(event) => {
          setValue(event.target.value);
        }}
      />
    </div>
  );
}

export default App;

2. 의존성 배열(dependency array)

콜백함수의 두번째 인자로 배열을 받는다.
이 배열에 값을 넣으면, 그 값이 바뀔 때에만 useEffect를 실행하도록 한다.

useEffect(()=>{
	// 실행하고 싶은 함수
}, [의존성배열])

의존성 배열이 빈 배열인 경우
의존성 배열이 빈 값일 경우 useEffect는 처음에 렌더링 될 때 딱 한번만 실행되고 그 이후에는 실행되지 않는다. 즉, 어떤 함수를 컴포넌트가 렌더링될 때 딱 한 번만 실행하고 싶을 때 의존성 배열을 빈 값을 두고 useEffect를 사용한다.

3. clean up

컴포넌트가 나타났을 때 useEffect의 함수가 실행되는 것과 반대로, 컴포넌트가 사라졌을 때 무언가 실행되는 것을 clean up이라고 표현한다.

클린 업 하는 방법
useEffect 안에서 return을 해 주고, 이 부분에 실행되길 원하는 함수를 넣는다.

오늘의 회고

---

1. Styled Components를 처음 설치하고 사용해봤다. UI를 꾸미는 방식이 엄청 다양하구나 느꼈다. 기존에 css파일을 만들어서 사용하는 것보다는 훨씬 편하고 활용성이 좋을 것 같다. 다시 여기에 적응하려면 시간 좀 걸리겠는데... 내일은 꼭 투두리스트를 다시 만들어 보려고 하는데, 여기서 스타일드 컴포넌트를 한 번 적용해 봐야겠다.

2. 알고리즘 문제 풀이가 생각보다 오래 걸린다. 오늘도 한 문제가 잘 안풀려서 계속 수정하고, 수정했는데도 잘 안풀려서 결국 튜터님을 찾아가서 해결했다. 내일부터는 2문제만 풀어야지... 전 조원분 중 한명이 튜터님께 학습법에 대해 질문하고 많은 조언을 들었다고 내용을 공유해 주셨다. 아주 유익한 내용이었는데, 튜터님들께 찾아가서 배우는 것들이 많은 것 같다. 그치만 찾아가긴 좀 부끄러운...나중에 한 번 같이 찾아가기로 했다.⭐

내일 할 일

---

• [알고리즘] Level.2 2문제
• [내배캠] React 숙련 강의 5~8강
• 투두리스트 다시 구현해보기