[React] props

1 props

부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용하는 것.

 

props 사용방법

1. <자식컴포넌트 전송할이름 = {변수명} or "텍스트">

변수명을 넣고 싶을때는 중괄호를,

일반 텍스트를 전송할 때는 따옴표.

 

2. 자식컴포넌트 선언하는 function 안에 파라미터를 하나 만들어준다.

import React from 'react';
import Header from '../layout/Header';
import Footer from '../layout/Footer';

function Info(props){
    return(
        <div className="main__cont">
            <div>{props.text1}</div>
            <div>{props.text2}</div>
            <div>{props.text3}</div>
            <div>{props.text4}</div>
        </div>
    )
}

function Main(){
    return(
        <div id="wrap">
            <Header/>
            <section id="mainCont">
                <Info
                    text1 = "WE PROVIDE"
                    text2 = "VISUAL CODING"
                    text3 = "SOLUTIONS"
                    text4 = "FOR YOU WEBS"
                />

            </section>

        </div>
    )
}

export default Main;

 

props 생략

import React from 'react';
import Header from '../layout/Header';
import Footer from '../layout/Footer';

function Info({text1, text2, text3, text4}){ //props를 생략하고 이름을 대신 적어줄 수도 있다.
    return(
        <div className="main__cont">
            <div>{text1}</div>
            <div>{text2}</div>
            <div>{text3}</div>
            <div>{text4}</div>
        </div>
    )
}

function Main(){
    return(
        <div id="wrap">
            <Header/>
            <section id="mainCont">
                <Info
                    text1 = "WE PROVIDE"
                    text2 = "VISUAL CODING"
                    text3 = "SOLUTIONS"
                    text4 = "FOR YOU WEBS"
                />
            </section>
            <Footer/>

        </div>
    )
}

export default Main;