인프런 커뮤니티 질문&답변
작성한 질문수
props에 대해 궁금한 점이 있습니다.
작성
·
316
1
우선 좋은 강의를 무료로 제공해 주신다는 점에 매우 감사드립니다 🙂
다름이 아니라 props에 대해 궁금한 점이 있어서 글 남깁니다.
function SampleComponent(props) {
return (
<div>
<div>{props.name}</div>
<div>{props.age}</div>
</div>
);
}만약 위와 같이 코드를 작성했다고 하면, 이 컴포넌트를 사용할 때 아래와 같이 사용할 것으로 예상됩니다.
root.render(
<React.StrictMode>
<SampleComponent name={'kim'} age={12} />
</React.StrictMode>
);근데 만약 코드가 매우 길어지고, props로 넘겨야 하는 것들이 많아진다고 가정해 보겠습니다. 예를 들어
props.name
props.age
props.university
props.profilePhoto
props.grade
etc...
이런 경우에는 도대체 props로 어떤 것들을 넘겨 주어야 하는지 굉장이 헷갈리는 상황이 발생할 것 같은데 이를 해결하기 위한 방법이 있을지 궁금합니다.
++ 제가 찾아본 바로는 아래와 같이 코드를 작성하면 된다고 합니다.
function SampleComponent({name, age}) {
return (
<div>
<div>{name}</div>
<div>{age}</div>
</div>
);
}그런데 이 방식을 사용하게 되면 children은 어떻게 넘겨 줄 수 있는지가 궁금합니다. 그냥 아래와 같이 처리하면 되는 것일까요?
function SampleComponent({children, name, age}) {
return (
<div>
<div>{name}</div>
<div>{age}</div>
<div>{children}</div>
</div>
);
}또한, 이 방식이 맞는 방식이라면, 굳이 아래 코드와 같이 props를 사용하시는 이유가 무엇인지도 궁금합니다.
function SampleComponent(props) {
return (
<div>
<div>{props.name}</div>
<div>{props.age}</div>
</div>
);
}답변 1
1
안녕하세요, 소플입니다.
props로 넘긴 데이터를 어떤 형태로 꺼내어 쓸 것인지에 대한 정답은 없습니다.
강의 실습에서는 자바스크립트에 익숙하지 않은 분들이 많기 때문에,
Destructuring assignment 문법을 최대한 사용하지 않으려고 했습니다.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
말씀해주신 것처럼 Destructuring assignment 문법을 파라미터 부분에서 곧바로 사용할 수도 있으며,
아래와 같은 형태로 사용할 수도 있습니다.
function SampleComponent(props) {
const { name, age } = props;
return (
<div>
<div>{name}</div>
<div>{age}</div>
</div>
);
}
그리고 만약 말씀하신 것처럼 데이터가 많아질 경우,
각 값이 아닌 아래와 같이 하나의 객체 형태로 넘겨서 사용할 수도 있습니다.
function SampleComponent({ user }) {
return (
<div>
<div>{user.name}</div>
<div>{user.age}</div>
<div>{user.university}</div>
<div>{user.profilePhoto}</div>
<div>{user.grade}</div>
</div>
);
}
마지막으로 children의 경우 기본적으로 제공되는 prop이기 때문에,
그냥 props에서 꺼내서 사용하면 됩니다.
결론적으로 props로 어떤 값을 어떤 형태로 넘길 것인지,
그리고 어떤 형태로 꺼내서 사용할 것인지는 모두 개발자가 정하는 것이고 그 부분에 정답은 없지만,
주로 Destructuring assignment 문법을 사용하는 경우가 일반적이라고 보시면 됩니다😀
감사합니다.