React.js | 입문 | props

리액트에서는 컴포넌트를 선언할 때, 속성을 전달할 수 있다.

JQuery에서는 페이지 내에서 객체를 선언하고, 다른 페이지로 그 객체를 전달하려면 백엔드를 거쳐야 했지만, 

리액트같은 경우에 보다 편리한 방법으로 객체를 전달할 수 있다.

 

App.js

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello name="react" />
  );
}

export default App;

 

Hello 파일의 컴포넌트를 가져와서 선언하고, return될 때 사용되게끔 했다. 또한 name = "react" 라는 값을 보내주었다.

 

Hello.js

import React from 'react';

function Hello(props) {
  return <div>안녕하세요 {props.name}</div>
}

export default Hello;

 

그럼 이처럼 함수의 인자값으로 props 안에 name이 들어가게되고, 아까 보내주었던 name을 컴포넌트에서

사용할 수 있다.

 

만약 컴포넌트에 props를 지정하지 않았을 경우에 default 값도 설정해줄 수 있는데,

 

import React from 'react';

function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>
}

Hello.defaultProps = {
  name: '이름없음'
}

export default Hello;

이런식으로 사용이 가능하다.

 

컴포넌트끼리 원하는 객체나 변수를 주고 받는 기능은 매우 유용하다고 느꼈다.

 

-참조

https://react.vlpt.us/basic/05-props.html