[React] props에 대해 알아보자
■ props란 ?
■ props 구조 분해 할당
■ props란 ?
- 컴포넌트 간에 데이터를 전달하기 위해 사용되는 읽기 전용 객체
- properties의 줄임말
⭐️ 부모 컴포넌트가 자식 컴포넌트에 값을 넘겨줄 때 사용해요.
React 컴포넌트는 함수라는거 잊지 않으셨죠 ?
쉽게 생각하면,
props는 함수의 매개변수에요.
function Child(props) {
return <p>{props.name}님 안녕하세요!</p>;
}
function App() {
return <Child name="이백" />;
}이해를 돕기 위해 일반 함수와 React 컴포넌트를 비교해볼게요.
📒↓인사말을 출력하는 greet 함수가 있어요.
function greet(name) {
console.log(name+"님 안녕하세요!");
}
📘↓인사말을 출력하는 Child 컴포넌트가 있어요.
function Child(props) {
return <p>{props.name}님 안녕하세요!</p>;
}
greet 함수에선 name을 매개변수로 정의했고,
Child는 props를 매개변수로 정의했네요.
📒 ↓ greet 함수는 아래와 같이 호출할 수 있어요.
greet("이백");
// 원하는 결과 : 이백님 안녕하세요!
📘↓ Child 컴포넌트는 아래와 같이 사용할 수 있어요.
function App() {
return <Child name="이백" />;
}
// 원하는 결과: 이백님 안녕하세요!
"이백"이 greet 함수의 인자인건 바로 보일 것 같아요.
하지만, Child 컴포넌트에서 인자가 무엇인지 감이 잘 안 올 것 같아요 !
greet 함수와 동일하게 "이백"일까요 ??
정답은 ❌
return <p>{props.name}님 안녕하세요!</p>;
"이백"이 인자라면, {props.name}가 아니라 {props}를 써야하는거 아닌가요 ??
맞는지 코드를 실행시켜볼게요.
어라 에러가 떴어요.
뭔가 이상하죠 @ ~ @ ;;
에러 메세지를 해석해보면,
객체는 React Child로 유효하지 않다. (키: {name}을 가진 객체를 찾음 )
→ 즉, JSX안에서 {객체}를 넣으려고 해서 생긴 문제에요.
객체라니 ?? 🧐
greet 함수처럼 "이백"이 인자로 간게 아니라,
{name: "이백"}이 인자로 전달된거에요. ! 인자값이 객체인거죠.
그래서 객체 안의 속성 name을 읽어온거구요.
이제 왜 props.name을 썼는지 이해되시죠 !?
‼ 아래 구조 분해 할당에 나오는
Profile 컴포넌트의 인자는 무엇인지 맞혀보세요 ~
■ props 구조 분해 할당
우리는 이제 props를 전달하는 방법을 알아요.
function Profile(props) {
return (
<div>
<h2>{props.name}</h2>
<p>{props.age}세 / {props.job}</p>
</div>
);
}
function App() {
return <Profile name="이백" age="23" job="대학생" />;
}
여기서 코드를 더 짧고, 깔끔하고, 읽기 쉽게 만들기 위해 구조 분해 할당을 사용할 거에요.
function Profile({ name, age, job }) {
return (
<div>
<h2>{name}</h2>
<p>{age}세 / {job}</p>
</div>
);
}
function App() {
return <Profile name="이백" age="23" job="대학생" />;
}
→ Profile의 매개변수에서 props 대신 구조 분해한 형태로 { name, age, job } 정의해주었어요 !
구조 분해 할당을 쓰니, 확실히 불필요한 코드가 없어지는 것을 볼 수 있죠 ? ( props. 과 같은 ! )
필수는 아니고 선택 사항이랍니당. 😀
> Profile의 인자 정답 보기
{ name: "이백", age: "23", job: "대학생" }
니꼬 선생님의 강의를 듣고, 지피티의 도움을 받아 작성한 글이에요 ! 😆
다음 포스팅에서 만나요 ~