components에 props 전달

 

App컴포넌스에서 Sakura 컴포넌스로 name 라는 변수 값을 전달하려고 할 때

 

App.jsx

 

import './App.css';
import Sakura from "./Sakura";


function App() {

    return <Sakura name="react"></Sakura>;
}

export default App;

 

Sakura.jsx

 

import React from "react";

function Sakura(props) {

    return <div>Hi, {props.name}</div>;
}

export default Sakura;

 

결과

 

---

 

비구조화 할당

 

App.jsx

 

import './App.css';
import Sakura from "./Sakura";


function App() {

    return <Sakura name="react" color="pink" fontSize="35px"></Sakura>;
}

export default App;

 

Sakura.jsx

 

import React from "react";

function Sakura({ name, color, fontSize }) {

    return <div style={{ color, fontSize }}>Hi, {name}</div>;
}

export default Sakura;

 

결과

 

 

---

defaultProps

 

컴포넌트에서 props를 지정하지 않았고 default 값을 설정하고 싶을 때

 

default 값 적용 전 단순 컴포넌트 재사용

 

App.jsx

 

import logo from './logo.svg';
import './App.css';
import Sakura from "./Sakura";


function App() {
    return (
        <>
            <Sakura name="react" color="pink" fontSize="35px"></Sakura>
            <Sakura></Sakura>
        </>
    );
}

export default App;

 

 

 

Sakura.jsx

 

import React from "react";

function Sakura({ name, color, fontSize }) {

    return <div style={{ color, fontSize }}>Hi, {name}</div>;
}

export default Sakura;

 

 

결과

 

값이 아무것도 없는 모습

 

---

defaultPrpos 설정

 

App.jsx

import logo from './logo.svg';
import './App.css';
import Sakura from "./Sakura";


function App() {
    return (
        <>
            <Sakura name="react" color="pink" fontSize="35px"></Sakura>
            <Sakura></Sakura>
        </>
    );
}

export default App;

 

Sakura.jsx

import React from "react";

function Sakura({ name, color, fontSize }) {

    return <div style={{ color, fontSize }}>Hi, {name}</div>;
}

// defaultProps 설정
Sakura.defaultProps = {
    name: "리액트",
    color: "skyblue",
    fontSize: "45px"
};

export default Sakura;

 

결과

 

---

 

Props.children

 

컴포넌트 태그 사이에 값이 있을 때 children 예약어를 사용하여 표시

 

Wrapper.jsx

 

import React from "react";

function Wrapper() {

    const style = {
        border: "3px solid black",
        padding: "20px"
    };

    return <div style={style}></div>;
}

export default Wrapper;

 

Sakura.jsx

 

import React from "react";

function Sakura({ name, color, fontSize }) {

    return <div style={{ color, fontSize }}>Hi, {name}</div>;
}

// defaultProps 설정
Sakura.defaultProps = {
    name: "리액트",
    color: "skyblue",
    fontSize: "45px"
};

export default Sakura;

 

App.jsx

 

import './App.css';
import Sakura from "./Sakura";
import Wrapper from "./Wrapper";


function App() {
    return (
        <Wrapper>
            <Sakura name="react" color="pink" fontSize="35px"></Sakura>
            <Sakura></Sakura>
        </Wrapper>
    );

}

export default App;

 

결과

 

 

?

뭔가 이상하다 Wrapper 로 감쌌는데 안에 내용들이 안보인다

이걸 보이게 하려면 props.children 을 랜더링 해주어야 한다.

*주의 children 은 사용자 지정어가 아니다.

Wrapper.jsx(수정)

 

import React from "react";

// *주의 children 은 사용자 지정어가 아니다.
function Wrapper({ children }) {

    const style = {
        border: "3px solid black",
        padding: "20px"
    };
// *주의 children 은 사용자 지정어가 아니다.
    return <div style={style}>{children}</div>;
}

export default Wrapper;

 

결과

 

보더 안에 이제 내용들이 보인다.