리액트를 쓰다가 막히는 부분이 있으면 검색을 통해 지식을 얻는데,
많은 분들이 props를 다루는 방법이 제각각이다.
물론, 정해진 규칙이 있을 것이라 생각이 되는데,
어떤 때에는 { }로 파라미터를 감싸서 표현할 때가 있고,
어떤 때에는 그냥 사용하는 경우가 있다.
심지어 잘못 사용하면 에러까지 이어지기도 한다.
둘은 어떤 차이가 있길래 다르게 표현이 되는걸까?

props

컴포넌트의 파라미터로 무엇인가를 받고 있다는 것은
외부에서 컴포넌트에 props를 입력했기 때문이다.

아래와 같은 상황인 것이다.

// App.js

import AgeShow from "./AgeShow";
import NameShow from "./NameShow";

export default function App() {
  return (
    <div>
      <AgeShow age={27} />
      <NameShow name="Rki0" />
    </div>
  );
}

두 개의 컴포넌트가 보인다.
그리고 각 컴포넌트에는 age, name이라는 props가 각각 입력되었다.

props를 전달했으니, 컴포넌트 파일에 들어가서 어떻게 전달받고 있는지 확인해보자.

props를 { }를 사용해서 받는 경우

우선, AgeShow.js 파일부터 살펴보자.

// AgeShow.js

function AgeShow({ age }) {
  return (
    <div>
      <p>나이를 props로 받아와서 보여주고싶어요</p>
      <span>{age}</span>
    </div>
  );
}

export default AgeShow;

App.js에서 age라는 props를 전달해준바 있다.
컴포넌트의 파라미터 부분을 보니, { age }라는 형태로 props를 받은 것을 볼 수 있다.
그리고 이 props는 span 태그에서 변수로써 바로 사용된 것을 확인 할 수 있다.

props를 { } 없이 받는 경우

이번에는 NameShow.js 파일을 살펴보자.

// NameShow.js

function NameShow(props) {
  return (
    <div>
      <p>이름을 props로 받아와서 보여주고싶어요</p>
      <span>{props.name}</span>
    </div>
  );
}

export default NameShow;

이번에는 props를 받아오는 방식을 다르게 해봤다.
다른 점은 중괄호 { }가 사용되지 않았다는 점이다.
따라서 props.name이라는 접근을 통해 받아온 props의 값에 접근할 수 있다.

음...설명이 좀 부족하다.
이렇게 사용을 하는구나~ 라고 이해는 할 수 있겠지만
왜 이렇게 사용하지? 라는 의문이 생긴다.

이유를 알아보자.

props는 객체(object)로 전달된다.

props라는 것이 정확히 무슨 값을 전달해주는지 확인하기 위해서 console.log()를 해보겠다.

// NameShow.js

function NameShow(props) {
  
  console.log("NameShow로 들어온 props", props);
  
  // ... //
}

export default NameShow;

앗! 객체(object) 형태로 props가 들어온 것이 확인되었다.
그래서 이 값들을 활용하려고 props.name이라는 접근법을 사용했던 것이다.
객체의 key에 접근하는 방법이었다. 이게 힌트였던 것이다.

풀어서 쓰면 이런 것이다.

<NameShow name="Rki0" />

NameShow라는 컴포넌트에 props를 전달하면

{
  name: "Rki0"
}

NameShow라는 컴포넌트는 props를 이런 형태로 전달받게 되는 것이다.
이를 활용하기 위해 객체(object)의 key-value 접근법을 사용하게 되는 것이고.

그럼 이제, 이해했다.
props는 객체(object) 형식의 데이터를 전달해준다는 것을.

아, 그러면 AgeShow.js에서는 왜 중괄호 { }를 사용한거죠?
한번 console.log()를 통해 살펴보자.

// AgeShow.js

function AgeShow({ age }) {
  console.log("AgeShow로 들어온 props", age);
  
  // ... //
}

export default AgeShow;

아! 중괄호 { }로 감싸주면 객체의 key에 해당하는 값만 보내주는구나!
즉, 구조 분해(비구조화 할당)를 하는구나!

만약, { age }가 아니라 props로 전달해줬다면 어떻게될까?
코드가 아래와 바뀔 것이다.

// AgeShow.js

function AgeShow(props) {
  console.log("AgeShow로 들어온 props", props);

  return (
    <div>
      <p>나이를 props로 받아와서 보여주고싶어요</p>
      <span>{props.age}</span>
    </div>
  );
}

export default AgeShow;

또한, 콘솔창에 찍어본 결과는 아래와 같이 변경된다.

객체 형태로 말이다.

만약, 이해가 쉽지않다면 다음과 같은 방식으로 생각하면 된다.

props == {age: 27}  // 객체 그 자체를 전달

{ age } == 27 == props.age  // 객체의 key에 접근한 value를 전달

컴포넌트에 props를 전달할 때,
객체를 한번에 전달해주느냐,
객체의 특정 key에 접근한 value를 전달해주느냐의 차이인 것이다.

결론

컴포넌트에 전달하는 props는 객체(object) 형태이다.

따라서, 중괄호 { } 없이 props를 받아오면 객체 그 자체가 넘어오고,

중괄호 { }를 사용하여 props를 받아오면 객체의 key에 접근한 value가 넘어온다.
이 경우, 중괄호 내에는 props를 전달할 때 사용한 key를 정확하게 입력해줘야한다.

참고 자료

벨로퍼트님 블로그