[ Naver Cloud Camp ]

[ React ] props

김강니 2024. 6. 2. 22:58

Props

💡 props props는 propertied의 줄임말이다. 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용한다.

props

<Message value="안녕하세요" color="blue" />

Message 함수형 컴포넌트를 호출하면서 { value: "안녕하세요", color: "blue" } 형태의 props 값 객체를 Message 함수에 전달한다.

//Message 함수 컴포넌트는 props 값 객체를 파라미터로 받는다.

export type MessageProps = {
      value: string,
    color: string
}

function Message(props: MessageProps) {
  return ...
}

"key" prop

<tr> 태그나 어떤 태그가 반복된 목록의 경우, 그 목록 태그에 "key" prop가 있어야 한다.

그리고 "key" prop의 값은 DB 테이블의 기본키(primary key) 같은 유일한 값이어야 한다.