40. React 기초(3)

props, children

props

지난 포스트에 이어서, 이제 항목들의 이름을 클릭하면 모달에서 상세정보가 노출되도록 해볼텐데,
먼저 props에 대해 알아보자.

props란 properties의 약자로, 하나의 컴포넌트에서 다른 컴포넌트로 데이터를 전달할 때 사용하는 객체이다.
함수에서의 매개변수와 비슷한 느낌이라고 생각하면 될 듯 하다.

다음의 코드를 보자.

<MyComponent val1 = "a" val2 = "b"></MyComponent>

이 때, val1과 val2를 props라고 부른다.

props가 있는 함수형 컴포넌트를 만드려면 다음과 같이 생성한다.

const MyComponent = ({val1, val2} : {val1 : string , val2 : string}) => {
  return(
    <div>
      MyComponent
    </div>
  )
}

export default MyComponent ;

위의 방법 외에도, interface나, type으로 사용자 정의 타입을 만든 후에,
React.FC<T> 를 MyComponent 의 return 데이터타입으로 설정할 수도 있지만,
의도치 않게 부모 컴포넌트의 props가 전달될 수도 있다는 문제가 있어서,
최근 추세는 이 방법은 지양된다고 한다.

children

우리가 생성한 컴포넌트를 불러서 사용할 때는, 메인 컴포넌트에 다음과 같이 불러서 사용했다.

import MyComponent from "./MyComponent" ;

function App() {
  return (
    <div >
      <MyComponent val1 = "a" val2 = "b"> 내부 공간 </MyComponent>
    </div>
  )
}

이 때, MyComponent를 부모 컴포넌트, 내부 공간 을 children이라고 부른다.

그리고, 위의 코드는 정상적으로 동작할 것 같지만, 오류가 발생한다.
함수형 컴포넌트를 정의할 때, children에 대한 props도 설정해줘야 하기 때문이다.

그에 맞춰서 부모 컴포넌트를 다시 작성해보자.

type MyProps = {
  val1 : string ;
  val2 : string ;
  children : React.ReactNode ; // children에 대한 props 설정
}

const MyComponent = ({val1, val2, children} : MyProps ) => {
  return(
    <div>
      MyComponent
      {children}
    </div>
  )
}

export default MyComponent ;

children은 React.ReactNode 타입을 갖는다. 컴포넌트의 자식요소라는 의미이다.
위 코드처럼, 불러온 자식 컴포넌트는 부모 컴포넌트가 사용할 수 있다.

위 코드와 동일하게, 구조분해할당을 이용하여 아래처럼도 작성할 수 있다.

const MyComponent = (props : MyProps ) => {
  const {val1, val2, children} = props
  return(
    <div>
      MyComponent
      {children}
    </div>
  )
}

export default MyComponent ;