2022.12.14 React 심화 #1

1. css-in-js

기존에 나는 css를 사용하기 위해 css 컴포넌트를 만들고 import하고 tag에 classname을 넣고 css를 작성하는 방식을 사용했지만 새로 배운 css에서는 조금 간편하게 사용이 가능하다고 한다.

우선 사용 전 준비물로 styled-components 플러그인 설치와 yarn에서의 styled-components 설치가 있다.

1. VScode에서 styled-components 플러그인을 설치.
2. VScode 터미널에서 yarn add styled-components 명령어 입력.

// src/App.js

import React from "react";
// styled-components에서 styled 라는 키워드를 import 합니다.
import styled from "styled-components";

// styled키워드를 사용해서 styled-components 방식대로 컴포넌트를 만듭니다. 
const StBox = styled.div`
	// 그리고 이 안에 스타일 코드를 작성합니다. 스타일 코드는 우리가 알고 있는 css와 동일합니다.
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin: 20px;
`;

const App = () => {
	// 그리고 우리가 만든 styled-components를 JSX에서 html 태그를 사용하듯이 사용합니다.
  return <StBox>박스</StBox>;
};

export default App;

기본적인 사용 방법은 const StBox - styled.div`` 이다.

백틱을 사용하고 뒤에는 원하는 html tag를 만들면 된다. 

예를 들어 styled.button, styled.span 같이 사용이 가능하다.

// 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;

이런 식으로 map과 switch문을 사용하여 props를 통해서 부모 컴포넌트로부터 값을 전달받고, 조건문을 이용해서 조건부 스타일링도 가능하다.

이 부분은 많이 써보고 연습을 해야 이해가 가능한 부분 같다.

---

2. useState 함수형

기존에 ustState를 사용할 때 const [state, setState] = useState(initialState); 같은 방식으로 사용을 했다.

// 기존에 우리가 사용하던 방식
setState(number + 1);

// 함수형 업데이트 
setState(() => {});

// 현재 number의 값을 가져와서 그 값에 +1을 더하여 반환한 것 입니다.
setState((currentNumber)=>{ return currentNumber + 1 });

함수형 useState를 사용할 때 (기존값) => {변경하는 값] 을 입력해서 사용하면 된다.

근데 일반형과 함수형은 그래서 무슨 차이가 있는 걸까?

import { useState } from "react";

const App = () => {
  const [number, setNumber] = useState(0);
  return (
    <div>
			{/* 버튼을 누르면 3씩 플러스 된다. */}
      <div>{number}</div>
      <button
        onClick={() => {
          setNumber((previousState) => previousState + 1);
          setNumber((previousState) => previousState + 1);
          setNumber((previousState) => previousState + 1);
        }}
      >
        버튼
      </button>
    </div>
  );
}

export default App;

위의 코드를 기존 일반형으로 적는다면 onClick ={() => { setNumver(number+1)} 이 세개가 들어가는 방식일 것이다.

그렇게 코드를 실행하면 일반형은 버튼 클릭시 1씩 증가 되지만 위 처럼 함수형으로 적는다면 3이 증가 된다.

그 이유는?

 

• 일반 업데이트 방식은 버튼을 클릭했을 때 첫번째 줄 ~ 세번째 줄의 있는 setNumber가 각각 실행되는 것이 아니라, 배치(batch)로 처리합니다. 즉 우리가 onClick을 했을 때 setNumber 라는 명령을 세번 내리지만, 리액트는 그 명령을 하나로 모아 최종적으로 한번만 실행을 시킵니다. 그래서 setNumber을 3번 명령하던, 100번 명령하던 1번만 실행됩니다.
• 반면에 함수형 업데이트 방식은 3번을 동시에 명령을 내리면, 그 명령을 모아 순차적으로 각각 1번씩 실행시킵니다. 0에 1더하고, 그 다음 1에 1을 더하고, 2에 1을 더해서 3이라는 결과가 우리 눈에 보이는 것이죠.

---

3. useEffect

useEffect는 useState와 같이 React에서 제공하는 훅이며 어떤 컴포넌트가 화면에 보여줬을 때 혹은 사라졌을 때 무언가를 실행하고 싶다면 useEffect를 사용한다.

// src/App.js

import React, { useEffect } from "react";

const App = () => {

  useEffect(() => {
		// 이 부분이 실행된다.
    console.log("hello useEffect");
  });

  return <div>Home</div>;
}

export default App;

App.jsx가 화면에 렌더링 된 순간 useEffect 안에 있는 console.log가 실행된다.

핵심은 컴포넌트가 렌더링 될 때 실행된다는 점이다.

// useEffect의 두번째 인자가 의존성 배열이 들어가는 곳 입니다.
useEffect(()=>{
	// 실행하고 싶은 함수
}, [의존성배열])

 

만약 이 코드가 있다면 useEffect가 반복 실행이 안되려면 의존성 배열을 사용해야 한다.

의존성 배열이란?

 

• useEffect에는 의존성 배열이라는 것이 있습니다. 말이 조금 어렵죠? 쉽게 풀어 얘기하면 “이 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect를 실행할게” 라는 것 입니다.

만약 어떤 함수를 컴포넌트가 렌더링 될 때 딱 한번만 실행하고 싶을 때는 의존성 배열을 빈 배열로 넣으면 된다.

하지만 그게 아니라면 의존성배열을 넣어 값이 실행 될 때 마다 실행하게 만들수 있다. 

---