[React] Props

Props 란 ? 

컴포넌트(사용자 정의 태그를 만들기 위한 함수)에 속성값을 받는 매개변수

 

 

함수에서의 매개변수(Parameter)와 인수(Argument)

 

 

대부분의 프로그래밍 언어에서는 위 그림처럼 매개변수(Parameter)와 인자(Argument)가 존재한다.

 

 

 

 

 

React에서의 Props 

함수에서와 마찬가지로, React의 컴포넌트(Components)가 함수와 비슷한 목적을 지니고 있다고 했으므로 React props는 컴포넌트(Components)의 매개변수(Parameter)인 셈이다.

function Header(props) {
  return (
    <header>
      <h1><a href="/">{props.title}</a></h1>
    </header>
  );
}


function App() {
  return (
    <div className="App">
      <Header title="REACT"></Header>
    </div >
  );
}

 

 

컴포넌트 이름 뒤에 괄호로 props라는 값이 들어간 것을 확인할 수 있다.

function Header(props)

 

props 말고 다른 이름으로 사용할 수 있지만, 보통 그대로 props라고 사용한다.

 

      <h1><a href="/">{props.title}</a></h1>

 

위 부분에서 props의 값을 사용하고 있다.

 

<Header title="minu"></Header>

 

위처럼 App 컴포넌트 내부에서 Header 컴포넌트를 사용하면서 title 값으로 "minu"를 넘겨주면, props 에 저장된다.

props는 Object, 즉 객체 형태이기 때문에 값을 받아오면 객체 형태로 내부에 저장된다.

props = {
	title : 'minu',
    .
    .
    .
}

 

 

 

 

결론적으로 위 코드를 사용하면 h1태그의 값으로 minu라는 값이 웹페이지에 출력된다.