props

프로젝트 하면서 정말 몇번이나 나를 헷갈리게 했던... 물론 정신이 멀쩡할때 이해가 안된거긴 하지만 이럴때도 props의 내용을 다시 곱씹어 보기로 했다.

properties

• 상위 컴포넌트에서 하위컴포넌트로 정보를 넘기는 방법

	const Hellor = (props) =>{
    	return <h1>Hello,{props.name}</h1>
    }
    
    
    function App(){
    return(
    	<div>
        	<Hellor name="sara"/> //Hello, sara
			<Hellor name="john"/> // Hello, john
            <Hellor name="donny"/>
        </div>
    )}

이런식으로 넘겨줄수가 있다. name을 props로 받게된다.

이런 props들은 여러개를 받을수 있는데

	const Img = (props) =>{
    	return 
        <div>
        	<img src={props.imageUrl} key={props.name} /> {props.name}은 	{props.count}개
        </div>
    }
    
    const Img = ({imageUrl,name,count}) =>{
    	return 
        <div>
        	<img src={imageUrl} key={name} /> {name}은 {count}개
        </div>
    }
    

이렇게 오브젝트 형식으로 줄수가 있다.

Props.children

import React from 'react';

const Test = ({children}) => {
   return (
       <div>
           <Header/>
           {children}
           <Footer/>
       </div>
   );
};

export default Test;

const Hompage = () =>{
   return
   <Test>
       <div> this is my hompie</div>
   </Test>
}

children은

<div>this is hompage</div>

Hompage안에 즉 저 this is hompie가 Layout태그안에 들어간다.

그래서 보통은 홈페이지 레이아웃을 짤때 저러한 children을 자주 이용한다.