<aside> 🚩 Goal: 생성한 컴포넌트를 부모 자식관계로 설정해보고 활용해봅니다.
</aside>
[목차]
(1) 컴포넌트 안에 컴포넌트 넣기
컴포넌트는 다른 컴포넌트를 품을 수 있습니다. 이때 다른 컴포넌트를 품는 컴포넌트를 부모 컴포넌트라고 부르고, 다른 컴포넌트 안에서 품어지는 컴포넌트를 자식 컴포넌트라고 부릅니다.
코드로 바로 볼까요?
// src/App.js
import React from "react";
function Child() {
return <div>나는 자식입니다.</div>;
}
function App() {
return <Child />;
}
export default App;
App.js 파일 안에서 Child라는 새로운 컴포넌트를 만들었습니다. 그리고 Child 컴포넌트를 App 컴포넌트에서 마치 HTML 태그를 쓰듯이 넣었습니다. 이렇게 한 컴포넌트 안에 다른 컴포넌트를 넣을 수 있습니다.
이렇게 코드를 작성하면, 화면에는 “나는 자식입니다” 라는 문장이 보여지게 될 것 입니다. 왜냐하면 이 파일에서 내보내진 (우리는 “내보내진” 이라는 것을 export default 라고 하기로 했습니다.) 컴포넌트는 App 컴포넌트 이기때문에 App 컴포넌트가 화면에 보여집니다. 하지만 App 컴포넌트는 Child 컴포넌트를 자식으로 삼고 있죠! 그래서 결국 자식 컴포넌트에 있는 “나는 자식입니다" 라는 문장이 보여지게 되는 것 입니다.
이렇게 만들어진 컴포넌트는 마치 HTML 태그를 쓰듯이 사용하여 화면에 보여지게 할 수 있습니다. 앞으로는 “화면에 보여지게 하다"를 줄여서 Rendering 이라고 부르겠습니다. 그리고 이렇게 함수로 만들어진 컴포넌트를 html 태그 사용하듯이 코드를 작성하는 이 방식을 우리는 앞으로 JSX라고 부를 것 입니다.
<aside> 📖 컴포넌트를 부모 자식 관계로 연결해봅시다.
</aside>
App.js에 3개의 컴포넌트를 만들고 할아버지, 엄마, 자식 컴포넌트를 만들어보고 서로 연결시켜봅시다.