10. props

 

props는 상위(부모) 컴포넌트에서 하위(자식) 컴포넌트로 데이터를 전달해주는 객체이다.

---

 

(예시) props를 사용해야 하는 이유

 

예시 상황 : title이 3개인 컴포넌트 3개를 생성하고, 그 title을 클릭하면 모달 띄울 수 있도록 구현.

 

그런데 모달에 클릭한 title이 나오도록 구현하고 싶어서

fucntion Modal에 { title[0] } 이렇게 불러왔지만 

 

function App() {
  let [title, setTitle] = useState(['첫번째 제목', '두번째 제목', '세번째 제목']);
  let [modal, setModal] = useState(false);

  return (
    <div className="App">
      {
        title.map(function(a, i){
          return (
            <div className="list" key={i}>
              <h4 onClick={()=> { 
                  modal == false ? setModal(true) : setModal(false); }}>{ a }
              </h4>
            </div>
          )
        })
      }
      
      {modal == true ? <Modal/> : null}

    </div>
  );
}

function Modal(){
  return (
      <div className="modal">
        <h4>{ title[0] }</h4>
      </div>
  )
}

 

에러가 뜬다.

 

이럴 때는 props를 사용해야한다!

---

 

**props 사용하는 방법**

 

 1. 자식 컴포넌트에 state 를 하나 만든다. 

 

예시 상황에서 자식 컴포넌트는  function App() 함수 안에 있는 <Modal /> 이므로 이 안에  작명 = { 전달할 객체 }  를 작성한다.

  작명은 아무거나 하면 되는데 보통 오른쪽에 있는 전달할 객체와 같은 이름을 쓴다.  

{modal == true ? <Modal title={title} /> : null}

 

 

 2. 자식 컴포넌트를 만드는 함수에서 파라미터를 추가해준다. 

 

자식 컴포넌트를 만드는 함수는 function Modal() 이므로

function Modal(props){
  return (
      <div className="modal">
        <h4>{ title[0] }</h4>
      </div>
  )
}

 

위처럼 파라미터 props 를 추가하였다.

 작명은 자유롭게 가능하지만 보통 props 라고 많이 사용한다. 

 

 

 3. 원하는 곳에 props.작명 을 넣어준다. 

function Modal(props){
  return (
      <div className="modal">
        <h4>{ props.title[0] }</h4>
      </div>
  )
}

 

---

 

만약 각각의 컴포넌트의 title을 눌렀을 때 해당 title이 담긴 모달을 띄우고 싶다면?

 

 

아래 참고글

8. 모달

 

1. html 과 css 로 미리 디자인 완성

-> 따로 더 할 필요는 없음.

 

2. UI의 현재 상태를 state로 저장

let [changeTitle, setChangeTitle] = useState(0);

 

0이면 title[0]

1이면 title[1]

2라면 title[2]

 

3. state 에 따라 UI가 어떻게 보일지 조건 작성

 

<h4 onClick={()=> { 
    modal == false
    ? setModal(true) : setModal(false); 
    setChangeTitle(i) 
}}>

 

 

{
    modal == true 
    ? <Modal title={title} 
    changeTitle={changeTitle} />
    : null
}

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