[React] props 사용

 

props는 자식 컴포넌트가 부모 컴포넌트의 State를 편하게 사용하기 위해 고안된 기능이다.

 

  let [player_name, setplayer_name] = useState(['살라', '마네', '디아즈'])
  let [player_age, setplayer_age] = useState(['1992년 6월 15일', '1992년생 4월 10일', '1997년생 1월 13일'])
  let [footed, setfooted] = useState(['Left-Footed', 'Both-Footed', 'Right-Footed'])

 

전편과 마찬가지로 역시나 상단의 배열들을 State로 저장해준 후

자식 컴포넌트를 하나 만들어준다.

 

 

let Modal = () => {
  return(
<div className="modal">
<h4>선수 이름</h4>
<p>생년월일</p>
<p>주사용발</p>
</div>
)}

 

 

여기있는 컴포넌트에 State를 이용하여 각 배열의 요소들을 넣어주고 싶으면

        {
          modal == '닫힘' ?  <Modal player_age={player_age} footed={footed} player_name={player_name}/> : null
        }

 

<Modal/> 이 사용된 곳에서 태그 내에

다음과 같이 만들어준다

player_age = {player_age}

에서 좌항은 props를 사용하기 위한 것으로 자유롭게 작명해도 되지만

되도록 우항의 State명과 동일하게 작성한다.

우항 {player_age}는 State명이다.

 

자식 컴포넌트에서의 모양은 어떨까?

 

let Modal = (props) => {
  return(
<div className="modal">
<h4>{props.player_name[0]}</h4>
<p>{props.player_age[0]}</p>
<p>{props.footed[0]}</p>
</div>
)}

 

파라미터에 props를 넣어주고

각각의 배열을 넣고 싶은 요소에

props.player_ blahblah [i] 를 사용하면!

 

 

짜잔 이렇게 입력된다

 

부모요소의 State는 자식 컴포넌트에서 그대로 사용할 수 없으니 꼭

props를 이용하자