리액트 props

Props

• properties 의 줄임말
• 자바스크립트의 함수 인자, HTML의 속성과 비슷하다.
• 읽기 전용이기 때문에 값을 바꿀 수는 없다.
• 왜 사용하는가? 보통 메소드를 만들 때 파라미터의 용도와 비슷하다. 컴포넌트를 재사용할 수 있도록 하는 것이다.

사용 방법

ex) APP.js

import React from 'react';
import Welcome from './component/Welcome'

function App(){
  <div>
     <welcome name="summer" />
  </div>
}

• 보통 HTML 태그를 작성할 때, 속성을 부여하는 것과 같은 방식으로 하면 된다.
• 물론 내가 커스텀한 prop을 사용할 수 있는 것은 커스텀 컴포넌트.

ex) Welcome.js

import React from 'react'

export default function Welcome(props){
  retrun (
  	<div>
    	<h1>Hi, {props.name}</h1>
    </div>
  )
}

• props 는 object의 형태로 전달받는다.
• props 를 destrucuring해서 전달받을 수도 있다.
  ex) function Welcome({name,phone,email})