React - props

리액트를 사용하는 이유 중 데이터바인딩이 쉽다는 것이 있었습니다. 특히 state를 활용하여 데이터 바인딩을 하면 재렌더링도 자동으로 수월하게 되기 때문에 무척 편리했습니다.

 

그런데 state를 이용하여 데이터바인딩을 할 때 주의할 점이 하나 있습니다. 바로 부모 컴포넌트의 state는 바로 자식 컴포넌트에서 사용할 수 없다는 것입니다.

 

부모 컴포넌트와 자식 컴포넌트의 관계는 다음과 같습니다.

 

부모 컴포넌트와 자식 컴포넌트의 관계

 

쉽게 말해서 큰 컴포넌트 안에 작은 컴포넌트를 집어넣으면 부모-자식 관계가 되는 것입니다. 이런 관계에서 자식 컴포넌트가 부모 컴포넌트의 state를 사용하기 위해서는 props를 이용해야합니다.

 

---

 

⭐️ props 사용법

 

props를 사용하기 위해서는 어떻게 해야될까요. 이것을 공부하기 위해 간단한 예제 코드를 보겠습니다.

 

function App() {
    let [title, setTitle] = useState(['강남 우동 맛집', '강남 햄버거 맛집', '수원 갈비 맛집']);
    
    return (
      <div>
      ...
      <Modal title={title}></Modal>
    </div>
  )
}  
  
function Modal(props) {
  return (
    <div className="modal">
      <h2>{ props.title[0] }</h2>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
   )
}

 

부모 컴포넌트는 App이 되고 자식 컴포넌트는 Modal이 됩니다. 이 때 부모 컴포넌트의 title 이라는 state를 자식 컴포넌트에서 사용하고 싶습니다. 

 

props를 사용하는 단계는 세 단계가 있습니다.

 

1. <Modal title={title}></Modal> 

 

사용하려고 하는 자식 컴포넌트 안에 전송할 이름 = { state 이름 } 을 적어줘야 합니다. props를 전달하는 것이죠. 보통 전송할 이름은 state 이름과 동일하게 합니다. 자식 컴포넌트 안에 props는 여러 개 전송할 수 있습니다.

 

2. function Modal(props)

 

만들어둔 자식 컴포넌트에 파라미터를 줘야합니다. 통상 props라는 이름으로 많이 줍니다. 파라미터 안에는 state들이 object 자료형 형식으로 담겨져 있습니다.

 

3. props.title[0]

 

사용하고 싶은 곳에 파라미터이름.state이름 이렇게 써주면 됩니다. 이 코드에서 title[0]을 해준 이유는 title state가 array자료형이기 때문에 그 중에서 첫번째 자료만 담겠다는 의미입니다. state의 모양에 따라 적절하게 쓰면 됩니다.