[React] props로 부모 컴포넌트에 state를 사용해보자

App이라는 컴포넌트안에 예를들어 <Modal> 이라는 컴포넌트를 만들었다고 가정하자.

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

 

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

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

 

props라는 문법으로 state를 전송한 뒤에 { props.state이름 } 이런식으로 사용해야한다.

뭔소린지 알아보자.

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

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

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

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

 

 

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

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

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

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

 

 

전달 해주는 구문이 바로 props이다. (컴포넌트간의 부품 전달법이다)

props 사용법 

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

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

하지만 실제 코드를 보지않고 사용법만 보면 이해가 되지 않으니 예시를 보아야한다.

 

 

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 함수 소괄호 내에 Parameter를 하나 추가 해준다.

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

 

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

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

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

 

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

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