[React] props의 간단 개념

React는 컴포넌트 단위로 쪼개서 구현을 한다.

컴포넌트에서 컴포넌트고 값을 주고 받을때 props를 사용한다.

props는 properties의 줄임말이다.

 

상위 컴포넌트에서 정의를 하고, 하위 컴포넌트에 전달을 한다고 가정하자.

/* index.js */

function index(){
	return (
        <>
        	<Hello name='이름'/>
        </>
    )
}

상위 컴포넌트에서 하위컴포넌트의 태그 안에 값을 넣어준다.

 

/*Hello.js*/
function Hello(props){
	const name = {props.name};
    	console.log(name);
}

하위 컴포넌트는 괄호() 안에 props으로 값을 받아온다.

props이 아닌 name으로 받아와도 된다.

(여기에서 name인 이유는 상위 컴포넌트에서  Hello 태그 안에 name을 키 값으로 넣어줬기 때문이다. 즉, 본인이 지정한 key 값으로 바로 받아올 수 있다.)

 

 

react 로고