리액트 컴포넌트끼리 중첩하기

참고한 원문 :

https://nextjs.org/learn/foundations/from-javascript-to-react/building-ui-with-components

 

기존 게시글 :

https://debianizer.tistory.com/15

React 클래스형 + (코드 분리 방식)

기존 게시글이 클래스(class) 기준 컴포넌트였다면 여기서는 함수(function)  기준이다.

(class 는 render() { return ... JSX ... } 방식인 반면,

 function 은 중간단계 없이 곧바로 return ... JSX ... 인 차이 뿐이다)

 

 

 

Header 를 먼저 빼고

function Header() {
  return <h1>Develop. Preview. Ship. 🚀</h1>;
}
function HomePage() {
  return <div></div>;
}

ReactDOM.render(<Header />, app);

 

HomePage 안에 Header 를 중첩한다.

function Header() {
  return <h1>Develop. Preview. Ship. 🚀</h1>;
}

function HomePage() {
  return (
    <div>
      {/* Nesting the Header component */}
      <Header />
    </div>
  );
}

ReactDOM.render(<Header />, app);