함수형 컴포넌트, State

함수형 컴포넌트란?

말 그대로 함수로 이루어진 컴포넌트이다. 입력을 받으면 출력을 반환해야 하는 구조다. 

아래 코드로 쉬운 예시를 들자면, 

function MyComponent(props) {
  return <div>{props.name}</div>
}

1. 부모가 props를 넘긴다
2. MyComponent함수가 이것을 받는다
3. React가 화면으로 바꿔준다 

따라서 값을 넣으면 화면으로 출력해주는 구조라서 함수형 컴포넌트라고 한다. 

---

State란? 

State = 기억해야 하는 값이다. 

쉽게 말해 component가 기억하고 있는 변수 라고 생각하면 된다. 

아래 코드로 쉬운 예시를 또 들자면,

const [count, setCount] = useState(0);

• count = 현재 기억하고 있는 숫자
• 처음 값 = 0
• 이 component는 count값을 계속 기억하고 있음 

useState?

위의 코드에서 useState가 나왔는데,

useState = 값을 기억할 공간을 만드는 것이다.

Setter?

setter=기존 값을 바꾸는 속성

setCount(5);

이 코드의 의미는 기존에 기억하고 있던 값을 5로 바꿔라 라는 의미이다

제일 중요한 핵심은, setter로 값을 바꾸면 "리렌더링" 된다는 것이다. 

쉽게 말해 값이 바뀌면 화면도 다시 그려진다.

 

State 간단 실습 

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

• 흐름:
  1. useState(0)으로 count 값을 0으로 초기화
  2. 버튼 클릭 시 > setCount(count + 1) 실행
  3. count값이 변경
  4. React가 자동으로 화면을 렌더링
  5. 변경된 값이 화면에 반영 

초기값 0

setter로 바뀐 값 5

• 결과: 브라우저에서 + 버튼 누르면 숫자가 1씩 증가한다. 

---

불필요한 리렌더링 줄이기

React는 기본적으로 값이 "조금만" 바뀌어도 component가 다시 실행된다. 

• 버튼을 눌러서 count가 바뀐다면? parent와 child가 같이 다시 실행됨.
  그러나 child에는 읽기 전용 데이터가 가기 때문에 값이 다시 변할 수 없다.
  결국 불필요하게 리렌더링된것이다. 

해결 방법

1. React.memo : props가 안 바뀌면 child도 다시 실행 안함
2. useMemo : 계산 결과 기억해두고 조건 안 바뀌면 다시 계산 안함
3. useCallback : 함수 새로 만들지 말고 기존 거 계속 사용 

결론: React는 기본적으로 리렌더링이 많다 보니, 필요하면 Memo나 useCallback을 사용해서 줄일 수 있지만 괜히 미리 사용해서 조기 최적화를 해선 안 된다.