2022.10.08 TIL

styled-components 사용하기

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

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

const App = () => {
  return (
    <div>
      <StBox borderColor="red">박스</StBox>;
      <StBox borderColor="green">박스</StBox>;
      <StBox borderColor="blue">박스</StBox>;
    </div>
  );
};

export default App;

styled.ooo``백틱 안에 css작성하는 형식. 형태가 익숙하진 않지만 이런 방법도 있다는걸 알고 넘어가면 좋을 듯함.

useState 업데이트 방식

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

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

setState의 () 안에 수정할 값이 아니라 함수를 넣을 수 있다. 그리고 그 함수의 인자에서는 현재의 state을 가져올 수 있고, {} 안에서는 이 값을 변경하는 코드를 작성할 수 있다.

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

일반 업데이트 방식과 함수형 업데이트 방식의 차이

일반 업데이트

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

1씩 증가하게 된다. 이유는 버튼을 클릭했을 때 첫번째~ 세번째 줄의 setNumber가 각각 실행되는것이 아니라 배치(batch)로 처리한다. onClick을 했을 때 setNumber에서 명령을 3번 내리지만 리액트는 그 명령을 하나로 모아 최종 한번만 실행을 시킨다. 그래서 setNumber을 몇 번 명령하든 1번만 실행된다.

함수형 업데이트

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>
  );
}

함수형 업데이트는 3번을 동시에 명령을 내리면 그 명령을 모아 순차적으로 각각 실행시킨다. 0+1, 1+1, 2+1이 되어서 결과는 3이 된다.

---

useEffect

useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. 어떤 컴포넌트가 화면에 보여졌을 때 혹은 사라졌을 때 내가 무언가를 실행하려고 한다면 useEffect를 사용하면 된다.

// src/App.js

import React, { useEffect } from "react";

const App = () => {

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

  return <div>Home</div>;
}

export default App;

기본 형태는 이렇다. App컴포넌트가 화면에 렌더링 될 때 useEffect 안에 있는 콘솔이 실행된다.

의존성 배열

의존성 배열이란 해당 배열에 값을 넣으면 그 값이 바뀔때만 useEffect를 실행하는 것이다.

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

의존성 배열이 빈 값이면 useEffect는 처음 한 번만 실행되고 그 이후로는 실행되지 않는다.