리액트 기본 - 공식문서 리딩

 

intro

 

안녕하세요. 오늘은 리액트를 공부할 때 가장 좋은방안을 찾다가 리액트 공식문서가 그렇게 좋다고 많은 사람들이 얘기하셔서 속는셈치고 공부를 해봤습니다. 그런데 다른 어떤 책들보다 설명이 잘 되어 있는 것 같더라고요. 그러면 시작해보겠습니다.

gogo~

 

---

1. count가 화면에 렌더링되는 버튼을 두가지 만들었는데, 첫번째 버튼과 두번째 버튼의 count가 따로 올라가는 코드

import { useState } from 'react';

export default function MyApp() {
  return (
    <div>
      <h1>Counters that update separately</h1>
      <MyButton />
      <MyButton />
    </div>
  );
}

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

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}

 

 

 

 

2. count가 화면에 렌더링되는 버튼을 두가지 만들었는데, 첫번째 버튼과 두번째 버튼의 count가 동시에 올라가는 코드

 

import { useState } from 'react';

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

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Counters that update together</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

function MyButton({ count, onClick }) {
  return (
    <button onClick={onClick}>
      Clicked {count} times
    </button>
  );
}

 

 

두 코드의 차이점은 무엇일까요?

두 코드의 핵심 차이점은 상태(State)를 어디에서 관리하느냐와 그로 인해 데이터가 어떻게 공유되느냐에 있습니다.

리액트에서는 이를 보통 **"State 끌어올리기(Lifting State Up)"**라는 개념으로 설명합니다.

---

1. 코드 1: 개별적인 상태 관리 (Isolated State)

이 코드에서는 useState가 MyButton 컴포넌트 내부에 정의되어 있습니다.

• 독립성: 각 MyButton 인스턴스는 자신만의 count 상태를 가집니다.
• 동작: 왼쪽 버튼을 클릭해도 오른쪽 버튼의 숫자는 변하지 않습니다. 메모리상에서 두 버튼의 상태는 완전히 별개입니다.
• 데이터 흐름: 상태가 컴포넌트 내부에서 폐쇄적으로 관리됩니다.

---

2. 코드 2: 공유된 상태 관리 (Shared State)

이 코드에서는 useState가 부모 컴포넌트인 MyApp으로 옮겨졌습니다.

• 동기화: 부모인 MyApp이 하나의 count 상태를 관리하고, 이를 두 자식(MyButton)에게 Props로 내려줍니다.
• 동작: 어떤 버튼을 누르든 부모의 handleClick이 실행되어 부모의 상태가 변하고, 그 결과 두 버튼의 숫자가 동시에 업데이트됩니다.
• 데이터 흐름: 상태가 부모에서 자식으로 흐르는 "단방향 데이터 흐름"을 보여줍니다.
  
  

 

 

---

다음 시간에는 틱택토 게임 만들어보기를 해보겠습니다~