부모 / 자식 컴포넌트

부모 / 자식 컴포넌트

컴포넌트 안에는 또 다른 컴포넌트가 들어올 수 있다.
컴포넌트 안에 컴포넌트 안에 컴포넌트 가능
위 아래 상하관계를 갖게 됨! => 부모 / 자식요소

• 다른 컴포넌트를 품는 컴포넌트 : 🧑 부모 컴포넌트
• 다른 컴포넌트 안에서 품어지는 컴포넌트 : 👶 자식 컴포넌트

---

🤔 컴포넌트화가 필요한 이유

반복되는 로직이 생길 때는 컴포넌트가 필요하다.

function App (){
	<div>
    	<div>나는 아들입니다</div>
  		<div>나는 아들입니다</div>  
  		<div>나는 아들입니다</div>  
  		<div>나는 아들입니다</div>  
  		<div>나는 아들입니다</div>  
  		<div>나는 아들입니다</div>  
      </div>
}

이렇게 반복적으로 나오면 너무 길어서 리소스 낭비되니까
컴포넌트로 나눠주는 거다!

✋ 주의할 점

• return문 밑에는 태그 하나만 존재해야함
• 멀티라인이면 소괄호 필요하다.
  ( Div 안에 여러 태그를 묶어주던가 해야됨 )

원래 모습은

function App() {
  return <div>나는 아들입니다.</div>;
}

이런 모습인데 따로 컴포넌트로 나눠서 분리한 것이다.
이런식으로 리펙토링 진행
컴포넌트화가 필요한 이유 -> 반복되는 로직이 생길 경우에 필요함

//자식 컴포넌트 
function Child() {
  return <div>나는 아들입니다.</div>;
}

//부모 컴포넌트
function App() {
  return <Child />;
}

---

📖 Q1.

• App.js에 3개의 컴포넌트를 만들고 할아버지, 엄마, 자식 컴포넌트를 만들어보고 서로 연결시켜봅시다.
• 현재 App.js에 작성된 코드를 모두 지우고 새로 작성해보자!

✍️ Solution

import React, { Children } from "react";

function Child() {
    //Mom을 부모요소로 두고 있음 
  return <p>성공!</p>;
}

function Mom() {
  //Grandfather를 부모요소로 두고 있음 
  return <Child />;
}

function Grandfather() {
  //App을 부모요소로 두고 있음 
  return <Mom />;
}

function App() {
  return <Grandfather />;
}

export default App;

꼬리물기 느낌이라고 보면 될 것 같다.