[230324] React : props로 인자를 하위 컴포넌트에 전달 하기

---

🍀 오늘의 날짜 : 23년 03월 24일 
🍀 오늘의 주제 : React의 props 

---

 

🔖 props 로 상위 컴포넌트에서 하위 컴포넌트로 인자 전달 하기 

기본적인 하위 컴포넌트에 상위 컴포넌트의 인자를 전달 할 때 변수를 사용하면 다음과 같습니다. 

# 상위 : <하위컴포넌트명  속성 = { 변수 명  or 값 } / >

# 하위 : <div>{ props.속성 }</div>

function Parents = () => {
	const itemOne = "React를";
    
    return (
    	<div className="Parents">
        	<Child text={itemOne}/>
            // [1]  <Child text={ "React를" }/> 
            // [2]  <Child> React를 </Child> 
        </div>
    )
}


function Child = () => {
	return (
    	<div className="Child">{props.text}</div>
        {/* [1]  <div className="Child">{props.text}</div> */}
        {/* [2]  <div className="Child">{props.children}</div> */}
    )
}

 

 

 

변수 두 개를 이어서 출력하고 싶을 때는 다음과 같습니다. 

# 상위 : <하위 컴포넌트 > {변수 명1}   {면수 병2} <하위컴포넌트/>  

# 하위 :  <div>{ props.children }</div>

 

** 띄어쓰기 인식 됩니다. 

** 따로 속성명을 지정하지 않은 경우는 .chilrdrun을 통해 접근 할 수 있음을 알 수 있었습니다. 

 

 

 

🔹참고 블로그 : 벨로퍼트와 함께하는 리액트

 

 

React 어려운데 재밌습니다. ㅠ....... 은 무슨 모르니까 재밌던 거였습니다 

---