React, 부모의 state를 가져다 쓰고 싶을때 props로 전송

Props

자식 컴포넌트가 부모 컴포넌트에 있던 state를 쓰고 싶다면 props로 전송해서 써야함

 

function App (){
  let [글제목, 음식변경] = useState([
    "바지락 칼국수 먹고 싶다",
    "대창 먹고 싶다",
    "초콜릿 먹고 싶다",
  ]);
  return (
    <div>
      <Modal></Modal>
    </div>
  )
}

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

 

실행해보면 '글제목'이라는 변수가 define 되지 않았다고 에러가 발생

왜냐하면 글제목이라는 state 변수는 function App()에 있는 것이지 function Modal()에 없기때문

JS에선 다른 함수에 있는 변수를 마음대로 가져다쓸 수 없음

 

하지만 컴포넌트 2개가 부모, 자식 관계인 경우에는 가능함

즉 컴포넌트(부모)안에 또다른 컴포넌트(자식)가 있으면 가능한 것

 

부모 컴포넌트의 state를 자식 컴포넌트로 전송해줄 수 있음

전송시엔 props라는 문법을 사용함

 

★props로 부모에서 자식으로 state 전송하는 법

1. 자식 컴포넌트 사용하는 곳에 <자식컴포넌트 작명={state이름} />
   1. <자식컴포넌트 작명={변수명}> 일반 변수, 함수 전송 가능
   2.  일반 문자전송은 중괄호 없이 <자식컴포넌트 작명="내용">로 해도 됨
2. 자식컴포넌트 만드는 function으로 가서 props라는 파라미터 등록 후 props.작명 사용

- 단 자식에서 부모 방향으로 전송은 불가능하며 같은 부모의 자식들 사이 서로간 전송도 불가능함

 

props 응용

props는 함수 파라미터 문법이랑 똑같음

파라미터 문법은 함수 하나로 다양한 기능을 사용하기 위해서 사용하는 것

props도 파라미터랑 똑같은 문법

 

function App (){
  let [글제목, 음식변경] = useState([
    "바지락 칼국수 먹고 싶다",
    "대창 먹고 싶다",
    "초콜릿 먹고 싶다",
  ]);
  return (
    <div>
      <Modal 글제목={글제목} color={"skyblue"}></Modal>
    </div>
  )
}

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

 

예시로 props를 이용하여 여러가지 색깔의 모달창을 만들어 낼 수도 있음

이러면 색깔을 위해 여러가지 모달창을 바꿀 필요가 없어 비슷한 컴포넌트를 만들 필요가 없어짐