| React | props (자식이 부모의 state 가져다쓰고 싶을 때)

먼저 이 코드를 보자 

<Modal>안에 글제목 state 가 필요한데?

하지만 제대로 실행되지 않는다.

'글제목'이라는 변수가 define 되지 않았다고 에러뜸..

function App() {

let [글제목, 제목변경] = useState(["남자코트 추천", "강남우동 맛집", "파이썬독학",]);

return(
     <div>
      (생략)
       <Modal 글제목={글제목}/>
     </div>

)
}
function Modal() {
    return (
      <div className="modal">
        <h4>{글제목[0]}</h4>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
    );
}

그 이유는?

  당연히 글제목이라는 state 변수는 function App()에 있지 function Modal()에 없으니까!

  그럼 어떻게 하면 저 위에있는 state을 쓸 수 있을까!!?

 

정답: props 

---

 

props 란?

 - 프로퍼티, props(properties의 줄임말)
 - 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다.(단방향 데이터 흐름) 
 - 프로퍼티는 수정할 수 없다는 특징이 있다.(자식입장에선 읽기 전용인 데이터)

 

자식이 부모의 state 가져다쓰고 싶을 때 props

 

< state 전송하는 법>

1. < 자식 컴포넌트 작명 = { State 이름 } >

2. 자식컴포넌트 만드는 function으로 가서

props라는 파라미터 등록 후 →  function 안에서 props.작명 사용

• (참고1) props는 < Modal 이런거={이런거}  저런거={저런거} > 몇개든 무한히 전송이 가능
• (참고2) 꼭 state만 전송할 수 있는건 아니다.
• <Modal 글제목="강남우동맛집"> 일반 문자전송은 중괄호 없이 이렇게 해도 됩니다.
• <Modal 글제목={변수명}> 일반 변수, 함수 전송도 가능하고

 

function App (){
  let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  return (
    <div>
      <Modal 글제목={글제목}></Modal>
    </div>
  )
}

function Modal(props){
  return (
    <div className="modal">
      <h4>{ props.글제목[0] }</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

이렇게 하면 글제목을 불러올 수 있다.!!

1.  <Modal 글제목={글제목}/>

보통 작명은 state이름과 동일하게 하면 편하다.

 

2.  <h4>{props.글제목[0]}</h4>

 

---

# 응용문제 : 지금 누른 글제목이 모달창안에 뜨게 하고 싶으면 어떻게 코드를 짜야할까요?

function App() {

let [글제목, 제목변경] = useState(["남자코트 추천", "강남우동 맛집", "파이썬독학",]);
let [title, setTitle] = useState(0);

return(
	(생략)
     <div>
      <button onClick={()=>{ setTitle(0) }}> 0번글 </button>
      <button onClick={()=>{ setTitle(1) }}> 1번글 </button>
      <button onClick={()=>{ setTitle(2) }}> 2번글 </button>
       <Modal title={title} 글제목={글제목}/>
    </div>

)
}
function Modal(props) {
  return (
    <div className="modal">
      <h4>{props.글제목[props.title]}</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  );
}

이렇게 하면 글제목별로 다 불러올 수 있다.!!

1.  <Modal title={title} 글제목={글제목}/>

 

2.  <h4>{props.글제목[props.title]}</h4>

이렇게 하면 title 이 0,1,2로 전달되어 나타나는 것. 

 

 

❗ 주의할 점 : props 전송은 부모 → 자식 만 가능하다!!

▶  자식 → 부모 패륜방향 전송은 불가능

▶ 옆집 컴포넌트로의 불륜전송도 불가능

---

< 궁금증 >

Q. state를 자식컴포넌트에 만들어버리면 props 전송안해도 되지않나요?

A. 맞음!  title같은 state도 자식컴포넌트 안에 만들어보면 편할듯! 

 

하지만 지금 title이라는 state는 App도 쓰고 Modal도 쓰고 있다.

그렇게 다양한 컴포넌트에서 쓰이는 state는 컴포넌트들 중 최고로 높은 부모에게 만들어놔야한다!

 그 이유는 갑자기 부모가 필요해지면 어떻게 할 방법 없음!! (부모->자식만 되니깐)

 

 

[참고]

- 코딩애플