Props

property의 복수형인 properties의 축약형으로,

Js에서 컨포넌트에 전달할 정보를 가진 객체

의 역할을 한다.

사용법

// 부모 컴포넌트
const ParentComponent = () => {
  const age = 25;

  return (
    <div>
      <ChildComponent name="sewon" age={age} />
    </div>
  );
};


// 자식 컴포넌트
const ChildComponent = (props) => {
  return (
    <div>
      <h2>Name: {props.name}</h2>
      <p>Age: {props.age}</p>
    </div>
  );
};

위와 같이 컴포넌트에 속성과 값을 넣어주는 형태로 전달, 객체이기에 props.속성의 형태로 사용할 수 있다.

props에 문자열을 전달할 때에는 속성="값"의 형태로,
그 외 변수나 함수, 숫자 등은 속성={값}의 형태로 전달한다.

콜백함수

props는 객체만 전달하는 것은 아니다.

다른 컴포넌트에 파라미터로 전달되는 기능을 하는 콜백함수를 통해 자식 컴포넌트로 함수를 전달 할 수 있다.

아래 코드는 부모 컴포넌트가 자식 컴포넌트로 함수를 콜백 함수의 형태로 전달하는 과정이다.

const Parent = () = {
  const handleClick = () = {
    console.log('클릭됨!');
  }

  return (
    <Child onClick={handleClick} />
  );
}

//==========================

const Child = (props) => {
  return (
    <button onClick={props.onClick}>버튼</button>
  );
}

+

일반적으로는 문자열의 경우 큰 따옴표를 통해 바로 전달할 수 있지만,
매직 리터럴을 피하기 위해 변수로 선언하여 전달하는 것이 좋다.

그런데 컴포넌트의 특성상 여러번 사용하는 경우도 발생하는데, 어차피 이런 경우는 동적인 상태 변화를 위해 변수 등을 사용하여 전달할 것이다.