리액트 기본 - State(uesState), 재렌더링과 부작용(useEffect), Export

 

리액트 개발에서는 화면에 표시하는 데이터나 길이가 변하는 상태 등을 모두 State로 관리한다.

리액트 훅

• useState 
• const [State 변수, State 업데이트 함수] = useState();
• const [State 변수, State 업데이트 함수] = useState(초깃값);
• src/App.jsx

import { useState } from "react";
import { ColoredMessage } from "./components/ColoredMessage";

export const App = () => {
  // State 정의
  // const [State 변수, State 업데이트 함수] = useState(초깃값);
  const [num, setNum] = useState(0);
  // 버튼 클릭 시 State를 카운트 업
  const onClickButton = () => {
    // setNum(num + 1);
    // State를 업데이트 할 때는 set 함수 안에서 함수를 지정하는 것이 좋다.
    setNum((prev) => prev + 1);
  };

  return (
    <>
      <h1 style={{ color: "red" }}>두밧두 후쿠오카</h1>
      <ColoredMessage color="green">온콘살말</ColoredMessage>
      <ColoredMessage color="pink">휴닝카이 보고싶다</ColoredMessage>
      <button onClick={onClickButton}>버튼</button>
      <p>{num}</p>
    </>
  );
};

재렌더링

• 변경을 감지하고 컴포넌트를 다시 처리하는 것
• State가 변경될 때 함수 컴포넌트는 다시 처음부터 처리가 실행되고 State가 변경되면 다시 처음부터 계속 반복 되면서 차이가 있는 DOM을 감지하고 업데이트를 반여해서 화면을 표시한다.
• 맨 처음의 렌더링(컴포넌트와 마운트)과 재렌더링은 다르다. useStete의 괄호로 설정한 초깃값은 마운트 시에만 적용되며 매번 초기화 되지 않는다.
• State 업데이트 시 컴포넌트가 재렌더링되어 함수 컴포넌트가 다시 처음부터 실행된다.

 

부작용과 useEffect

• useEffect
• 컴포넌트의 부작용을 제어하는 기능
• 어떤 값이 변했을 때에 한해서만 어떤 처리를 실행하는 기능을 한다.
• useEffect(() => {}, [의존하는 값]);
• 첫 번째 인수는 화살표 함수로 처리하고 두 번째 인수는 반드시 배열로 지정한다.
• 배열 여러개 지정 시 useEffect(() => {}, [num1, num2]);
• useEffect는 의존 배열에 지정한 값이 변했을 때와 컴포넌트 마운트 시(가장 처음)에 반드시 실행된다.
• State 수가 많아지면 재렌더링 횟수도 늘어난다. 따라서 재렌더링을 할 때마다 처리하는 것은 시간이 낭비되므로 값이 변했을 때만 실행하고 싶은 경우 useEffect를 사용한다.

 

Export

1) nomal export

기본적으로 nomal export를 사용하는 것이 좋다. 

// export 측
export const SomeComponent = () => {};

// import 측
import { SomeComponent } from "./SomeComponent";
// as 별칭
import { SomeComponent as Some } from "./SomeComponent";

 

2) default export

default export는 import 시 임의의 명칭을 붙일 수 있다. 

파일 한 개에서 한 번만 사용할 수 있다. 해당 파일의 내용을 모두 모아서 export 하는 경우에 사용한다.

// export 측
const SomeComponent = () => {};
export default SomeComponent;

// import 측
import SomeComponent from "./SomeComponent";
// default export는 import 시 임의의 명칭을 붙일 수 있다. 
import Some from "./SomeComponent";

 

 

참고

모던 자바스크립트로 배우는 리액트 입문