React 컴포넌트 안에 자식요소 컴포넌트 넣기 (wrapper 안에 다른 div넣기)

App.js에서 Wrapper 라는 컴포넌트를 쓰다가,

Wrapper안에 새로운 요소를 추가해야 하는 상황이라면,

(원래 컴포넌트 안에 태그를 추가 할 수없음ㅇ)

 

기존 Wrapper.jsx안에 코드(div,p 등등) 를 추가해야 하지만,

Wrapper.jsx에 children 요소를 추가함으로써

html 처럼 App.js에 자식요소를 그대로 넣을 수 있게 됨

 

 

 

| Wrapper.jsx 코드

import React from "react";

function Wrapper({ children }) {
  return( 
  <div>{children}</div>
  );
}

export default Wrapper;

 

Wrapper 에 자식요소로 들어갈 children 을 지정해주고,

App.js에서 html 에서 div,p등등을 입력하듯 작성함

 

 

| App.js 코드

import React from "react";
import Wrapper from "./component/Wrapper";
import Hello from "./component/Hello";
import "./App.css";

function App() {
  /* 객체형으로 현재 컴포넌트에서 스타일을 선언하는 방법 */
  const style = {
    backgroundColor: "skyblue",
    color: "white",
    fontSize: 40,
    padding: "1rem",
  };

  const name = "hello2";
  return (
    <>
      {/* css를 적용하는 방법 : className 속성에 적용 */}
      {/* 
       컴포넌트안에 태그를 추가 할 수 없다 그래도 할수 있다
       방법은 매개변수 컴포넌트안에 { children } 객체를 매개변수 전달하고
       return 안쪽에 { children } 를 선언하면 
       컴포넌트 안에 이동 안해도 태그를 입력할 수 있다
      */}
      <Wrapper />
      <Wrapper>
        <div className="deeppink">hello1</div>
        <div style={style}>{name}</div>
        <h3 className="not_copo">나는 children이라서 나타남</h3>
        <Hello name="apple" color="gold" isSpecial={true} />
        <Hello name="banana" color="yellowgreen" />
        <Hello/>
      </Wrapper>
    </>
  );
}

export default App;

 

 

결과인 h3태그가 적용된 모습