Udemy 강의 <React - The Complete Guide 2024 (incl. Next.js, Redux)>

section3의 coding문제 6

 

아래의 코드 중, Card 부분을 다른 컴포넌트로 나눠야 한다.

 

먼저 생각했던 부분은  아래와 같이 porps로 전달하는 방식이었다. 

 

App.js

<Card name="Anthony Blake"

                        href="mailto:blake@example.com"

                        content="Blake is a professor of Computer Science at the University of Illinois."

/>

근데 정답처리가 안 돼서.. children방식으로 사용해 봤다.

근데.. 되네..?

 

분명 이전의 코드 상에 문제가 있었을 수도 있겠지만, 들었던 생각이 왜 굳이 두 가지의 방법을 사용하는 거지? 였다. 

그래서 gpt에게 물어봤더니 아래와 같이 알려주었다. 

 

기존의 코드처럼 props로 넘겨주면 컴포넌트를 단순화할 수 있는 장점이 있다.

 

장점:

• 단순성: 모든 정보가 props로 전달되므로, 컴포넌트가 비교적 단순하고 예측 가능한 방식으로 동작합니다.
• 일관성: 컴포넌트의 출력 형식이 고정되어 있어, 동일한 구조로 출력됩니다.

단점:

• 유연성 부족: 출력 형식이 고정되어 있으므로, 다양한 형식이나 구조의 콘텐츠를 렌더링 하기 어렵습니다. 예를 들어, 추가적인 HTML 요소나 스타일을 적용하고 싶다면, props만으로는 제약이 있을 수 있습니다.
• 확장성 제한: 컴포넌트가 복잡해지거나, 다양한 상황에 맞추어 유연하게 동작해야 할 때는 props만으로 충분하지 않을 수 있습니다.

반대로 children을 사용했을 경우 아래와 같은 특징이 있다. 

장점:

• 유연성: children을 사용하면, 컴포넌트 내부에 어떤 HTML 요소든 자유롭게 넣을 수 있습니다. 예를 들어, 텍스트뿐만 아니라 이미지, 리스트, 다른 컴포넌트 등을 포함할 수 있습니다.
• 확장성: 컴포넌트를 더 복잡한 구조로 확장할 수 있습니다. 콘텐츠의 형식이 다양해져도, 컴포넌트는 다양한 상황에서 재사용이 가능합니다.
• 제어력: children을 통해 원하는 형식과 스타일을 쉽게 제어할 수 있습니다. 컴포넌트 사용자가 직접 HTML을 구성할 수 있어 더 많은 제어가 가능합니다.

단점:

• 조금 더 복잡해질 수 있음: 단순히 텍스트와 링크를 출력하는 경우에는 children을 사용하면 코드가 조금 더 길어질 수 있습니다.
• 일관성 관리 필요: children을 사용하는 경우, 컴포넌트 사용자가 의도하지 않은 구조로 콘텐츠를 전달할 수 있기 때문에 일관성을 관리하는 데 더 많은 주의가 필요할 수 있습니다.

 

분명... 강의에서 이와 비슷한 내용을 본 거 같은데...

금세 잊어버리고.. 문제 푸는데 헤맸다..