[ React ] props는 argument와 어떤 차이를 가질까?

 

의문점

 

 

  위 이미지는 react quick start의 share data between component 부분에서 제공하며, 다른 두 버튼에서 하나의 count값을 사용하는 예시의 이해를 돕습니다. 아래 코드는 이와 관련된 react 코드입니다.

 

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

 

    이 코드를 보며 든 생각은 버튼을 클릭하는 이벤트에 대한 처리는 MyButton에서 이루어지며, 따라서, 전달된 count는 MyButton이 생성한 lexical environment의 지역변수로 복사 및 추가되고 따라서 데이터 공유는 불가능해야 하는 것 아닌가였습니다.

 

결론

  count 변수는 props로서 MyButton에 전달됩니다. 즉, Mybotton은 이러한 props를 통해 부모인 MyApp의 count에 접근 가능하게 되는 것입니다.

  props는 함수에 전달되는 argument와는 다릅니다. argument는 함수 호출될 때 전달되어 지역변수화한 뒤 함수의 연산을 돕지만, 리액트의경우 component를 호출하는 대신 렌더링 하며, compoenet가 렌더릴될때 각 component는 부모 component로 부터 props를 전달받습니다.