[React] Props (매개변수)

매개변수

const intro = (name, age) => {
	console.log(`안녕 내이름은 ${name}이야, 나이는 ${age}살이야.`);
};

intro("김나나", 13);

보통 함수에서의 매개변수라고 할 때는 위의 코드에 있는 name, age를 떠올리게 되는데,
이런 식으로 값을 전달할 수 있는 매개변수는 Props를 이용하여 넘겨줄 수 있다.

아래는 App.js의 코드인데, 컴포넌트 이름은 PropsEx로 해보았다.

위 이미지처럼 사용한다면 PropsEx에 name과 age에 각각 값을 넣어 객체 형태로 넘겨줄 수 있다.

그렇다면 PropsEx 컴포넌트에 값이 잘 들어갔는지 console.log를 통해 확인을 해보았다.

위 이미지처럼 props라는 이름으로 매개변수를 받아와 console에 뿌려보니,

위처럼 객체 형태로 잘 받아와지는 것을 볼 수 있다.

이렇게 값을 잘 받아오는 것을 확인했으면 이제 받아온 값들을 뿌려주면 된다.

이렇게 {}중괄호를 사용하여 불러오고자 하는 값을 실제 변수로 바꿀 수 있다.

하지만 위처럼 매번 props.name 처럼 하나하나 적어주기는 비효율적이라고 생각한다면, 더욱 좋은 방법이 있다.

App.js에

      <PropsEx name="김나나" age="13" />
      <PropsEx name="kimLrLr" age="17" />

이렇게 값을 넣어두고,

PropsEx.js에는

위 이미지처럼 코드를 수정하여 console을 확인해보면,

아까와는 달리 객체 형태가 아닌 원하는 값만 출력되는 것을 확인할 수 있다.
그러면 다시 h1태그 내부를 수정하여

이렇게 작성했다면,

원했던 것처럼 결과가 화면에 잘 뿌려져있는 것을 볼 수 있다.