[React] 리액트 공식문서 보고 useState, component 이해하기

MyButton이라는 컴포넌트를 생성한 뒤 

MyApp이라는 곳에서 컴포넌트를 각각 두개 호출해본다. 

MyButton안에는 버튼을 클릭할 때 마다 카운트가 올라가는 변수가 존재한다. 

import { useState } from 'react';

export default function MyApp(){
  // 같은 컴포넌트를 여러번 렌러링해도 각각 고유의 상태를 갖게 된다. 같은 컴포넌트를 사용하지만 다른 값을 가짐. 
  return(
    <div>
      <h1>Counters that update separately</h1>
      <MyButton />
      <MyButton />
    </div>
  );
}

// component 
function MyButton(){

  // useState 로 상태 관리 
  const [count, setCount] = useState(0);

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

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

 

같은 컴포넌트를 호출했지만 상태 값이 각각 다르게 유지되는 것을 발견할 수 있다. 

---

이번에는 버튼이 따로 동작하지 않고 숫자가 동일하게 카운트 되도록 해보자. 

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

  function handleClick() {
    setCount(count + 1);
  }
  return (
    <div>
      <h1>Counters that update separately</h1>
      {/* props : 상태를 MyButton으로 각각 전달함. JSX {} 사용하여 값 전달*/}
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

 

상태관리 변수인 count 를 MyButton 이 아닌 MyApp에서 관리할 수 있도록 위로 코드를 올려주고, 

각 컴포넌트를 호출하는 부분에 count 변수에 해당 변수와 이벤트 핸들러를 작성 

이걸 props로 넘겨준다고 표현한다. 

 

각 버튼을 클릭할 경우 onClick이벤트가 실행 -> 이벤트 핸들러 작동 

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

MyButton 컴포넌트에서는 다음과 같이 props를 받아온 뒤 값을 각 요소에 꽂아놓고 리턴해주면 된다. 

 

 

수가 같이 카운트 된다. 

 

---

🎯참고 자료 

Quick Start – React