[ 원숭이의 React ] 택배회사 props 와 부모 물건 뺏는 불효자

 

 

 

이상하게 이해함

 

 

 

 

 

App이라는 컴포넌트안에 <Modal> 이라는 컴포넌트를 만들어보았습니다.

(이걸 전문용어로 부모 자식관계라고 합니다. App은 부모 컴포넌트고 Modal은 자식 컴포넌트입니다.)

근데 자식 컴포넌트가 부모 컴포넌트 안에 있던 state를 갖다 쓰고싶을 때가 가끔 있습니다.

그럴 땐 대충 { 부모에 있던 state이름 } 이렇게 쓰시면 안되고

props라는 문법으로 state를 전송한 뒤에 { props.state이름 } 이렇게 쓰셔야합니다.

뭔소린지 알아봅시다.

 

 

 

 

 

<Modal>에 실제 제목 데이터바인딩을 해봅시다

 

저번에 만든 <Modal> 내부의 제목에 실제 데이터를 집어넣고 싶으면 어떻게 하죠?

실제데이터는 글제목이라는 state변수가 있으니 그걸 그대로 집어넣으면 되지 않을까요?

 

 

예를 들면 이렇게 하면 될 것 같지 않습니까

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

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

▲ 하지만 제대로 실행되지 않습니다.

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

왜냐면 글제목이라는 state 변수는 App()에 있지 Modal()에 없으니까요.

 

 

그럴 때 props라는 문법을 이용해서 Modal까지 state를 전송해주어야합니다.

 

 

 

 

props를 알기쉽게 그림으로 표현하자면

 

저번시간에 컴포넌트라는걸 쓸 수 있다고 배워봤습니다.

컴포넌트안에 컴포넌트를 집어넣어서 사용할 수 있고요.

그럴 때 안에 들어간 컴포넌트를 자식컴포넌트라고 부릅니다.

 

 

▲ 우리가 지금까지 만들었던 사이트를 그림으로 표현하면 이렇게 됩니다.

App이라는건 부모, <Modal>이라는건 자식 컴포넌트입니다.

이 때 <Modal>이라는 자식컴포넌트가 부모인 App이 가진 state를 사용하고 싶다면

그냥 쓰시면 안되고 꼭 전송을 해주어야합니다.

 

 

 

전송해주는 문법이 바로 props입니다. (컴포넌트간의 자료 전달법입니다)

 

 

 

 

 

props를 어떻게 사용하냐면 

 

2개의 step을 따라주시면 됩니다. props 많이 쓰니 꼭 외우십시오.

1. <자식컴포넌트 전송할이름={state명}> 이렇게 사용해주신 후

2. 자식컴포넌트 선언하는 function 안에 파라미터를 하나 만들어주시면 됩니다. 

하지만 이론만 설명하면 이해가 되지 않으니 예시를 보아야합니다.

 

 

 

글제목이라는 부모 컴포넌트의 state를 자식 컴포넌트에 전송해봅시다.

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

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

▲ 두가지 스텝을 밟아주시면 props로 원하는 state를 전송가능합니다.

1. <Modal 전송할이름={state명}> 이렇게 원하는 state를 적어주시면 전송됩니다.

2. 그리고 function Modal(props){} 이렇게 Modal 함수 소괄호 내에 파라미터를 하나 추가해줍니다.

 

3. 그럼 이제 props.전송할이름 이렇게 쓰시면 전송된 props를 사용가능합니다.

 

 

 

참고1) props는 <Modal 이런거={이런거}  저런거={저런거}> 이렇게 10개 100개 1000개 무한히 전송이 가능합니다.

참고2) props라는 파라미터엔 전송한 모든 props 데이터가 들어가있습니다. props.글제목 이런 식으로 원하는 것만 꺼내쓰시면 됩니다.

참고3) props 전송할 땐 꼭 {} 중괄호로 전송해야하는건 아닙니다.

<Modal 글제목={변수명}> 이렇게 변수명을 넣고싶으면 중괄호를 쓰시고

<Modal 글제목="강남우동맛집"> 이렇게 일반 텍스트를 전송하고 싶으면 따옴표 써도 됩니다.

 

 

 

 

 

내가 생각한 쉽게 이해하는 방법

 

 

솔직히 글로만 읽어서는 나도 이해가 안된다. 왜냐 머리가 원숭이기 때문이지

 

쉽게 설명해 보자면 funciton家 의 App 이라는 부모 가 있고 funciton家의 Modal 이라는 자식이 있다 치자

 

function App (){  //부모
  let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  return (
  
  <Modal />   //자식
  
 
  
  function Modal(props){
  return (
    <div className="modal">
      <h2>제목 { props.글제목[0] }</h2>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

 

App 이라는 부모는 부산에 살고 Modal 이라는 자식은 서울에 살아서 직접 가지러 못 간다 왜냐 차가 없기 때문이지

 

Modal 이라는 자식은 부모님이 가지고 있는 물건들(state)를 필요해서 가져야 됨

 

그래서 일단 props 라는 택배 회사에 신청을 넣게 되는데

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

택배 회사에 글제목(무슨 이름으로 받을지)={글제목}(받을 물건 이름) 이렇게 양식을 써서 제출하게 되고

 function Modal(props){
  return (

Modal 이라는 자식한테 props 라는 택배회사가 오게 되고{ funciton Modal(props) }

 

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

택배가 왔으면 어떻게 해야겠냐면 잘 받았다고 서명을 해야함

그래서 props 에서(.)글제목[0] 을 받았다고 서명을 하게 된다

 

 

나는 이렇게 이해 했는데 잘 이해했는지 모르겠다 일단 

이렇게 이해 해 보니 쉬웠따 👍