[리액트] Props; 컴포넌트 간 정보 주고받기

부모 → 자식 컴포넌트 정보 전달

각 props(properties)에 대한 value을 통해 정보를 넘겨줄 수 있다..

자식 컴포넌트에서 받은 정보 사용

1. 자식 컴포넌트의 인자로 props(properties)을 하나의 객체로 받는다.

2.  

   자식 컴포넌트에서 props 객체의 각 value; 속성에 접근하여 소스코드에 활용한다.[★]

   예) prop 객체: name, emotion // props 객체의 각 value: "Yeonju", "happy"

    

(방법1)

//src/components/HowRu.js

function HowRU(props){ 
	return <h3>{props.name} is {props.emotion}.</h3>
}


//src/App.js

function App(){
	return ( 
    	<div className="App">
        <HowRU name = "Yeonju" emotion="happy"/>
        </div>
    );
}

(방법2)

//src/components/HowRu.js

function HowRU({name, emotion}){ 
	return <h3>{name} is {emotion}.</h3>
}


//src/App.js

function App(){
	return ( 
    	<div className="App">
        <HowRU name = "Yeonju" emotion="happy"/>
        </div>
    );
}

 

자바스크립트에서 객체를 중괄호 { }로 표현한다. 자식 컴포넌트가 부모 컴포넌트로부터 받은 정보는 객체이다. 그러므로 부모 컴포넌트에서 자식컴포넌트를 생성하며 추가해주었던 여러개의 prop(property)를 중괄호 { }안에 넣어주면 된다. 이를 통해 자식컴포넌트에서 직관적으로 정보를 사용할 수 있다.

props.children

컴포넌트 태그 사이에 넣은 값을 보고 싶을 때, props.children을 사용한다. 내부의 내용이 보여지기 위해서 반드시 props.children을 렌더링해야 한다.  

//src/components/Wrapper.js

function Wrapper({children}){ 
	const style = {
    	color: 'pink',
        padding: '20px',
	};
    return(
    	<div style = {style}>
        	{children}
        </div>
    )
}


//src/App.js

function App(){
	return ( 
    	<Wrapper>
            <HowRU name="zzu" emotion="happy"/>
            <HowRU name="react" emotion="great"/>
        </Wrapper>
    );
}