React props

import Counter from "./Counter"

 

fuction App(){

   return (

         <div>

            <Counter initialValue={5}  />

         <div>

    )

}

 

const Counter = (props) = {

    console.log(props)

}

 

콘솔에 찍어보면

{initialValue : 5}

라고 전달 된다.

 

여러개를 보내고 싶다면

<Counter a = {1} b = {2} />

를 한다면

{a : 1, b : 2}

가 찍힌다.

 

props를 기본 값을 설정할 수 있다.

const Counter = ({ initialValue }) => {

    Counter.defaultProps = {

       initialValue : 0,

    };

}

 

자식 component를 바로 props로 보내서 적용시켜줄수도 있다.

const Container = ({children}) => {

    return (

      <div style={{margin : 20}}>

        {children}

      </div>

    )

  }

 

import Container from "./Container";

 

fuction App() {

 

 return(

    <Container>

        <div>

           ...

        </div>

      </Container>

)

 

를 해주면 안에 포함된 div가 children으로 들어가서 적용된다.