[React] - 5) props

Props

props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소입니다.

XML의 attribute와 대응한다고 보면 어느정도 맞는 말이라고 할 수 있겠네요.

물론 당연히 리액트에서 그 활용성은 훨씬 다릅니다.

props 값은 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있습니다.

 

props 렌더링

 

이전 포스팅에 만들었던 MyComponent.js를 조금 수정해 봅시다.

MyComponent.js

import React from "react";
const MyComponent = props => {
  return (
    <div>
      안녕하세요, 제 이름은 {props.name} 입니다.
    </div>
  );
};

export default MyComponent;

 

이제 부모 컴포넌트인 App.js에서 props 값을 지정해 봅시다.

 

App.js

import React from "react";
import "./App.css";
import MyComponent from "./MyComponent";

const App = () => {
  return <MyComponent name="React" />;
};

export default App;

 

이렇게 한다면 App.js(부모 컴포넌트)에서 MyComponent.js의 props을 불러와 사용할 수 있습니다.

 

출력 결과

안녕하세요, 제 이름은 React 입니다.

defaultProps 지정하기

방금 같은 경우 App.js에서 props 값을 지정해 주었으나, 때때로 이 props 값이 전달이 되지 않는 경우가 발생할 수 있습니다.

이럴때를 대비하여, defaultProps을 지정하여 아무것도 전달되지 않았을 때 대신 전달할 기본값을 설정할 수 있습니다.

 

그러기 위해서 MyComponent.js에 해당 코드를 추가해 줍시다.

MyComponent.js

...

MyComponent.defaultProps = {
  name: '기본 이름'
}

 

이렇게 한다면 App.js에서 name을 전달하는 부분을 삭제하고 진행하더라도,

(<MyComponent name ='React') => (<MyComponent />)로 변경

대신 name에 '기본 이름'값이 설정되어 전달되게 됩니다.

출력 결과

안녕하세요, 제 이름은 기본 이름 입니다.

비구조화 할당

현재 MyComponent에서 props 값을 조회할 때 마다, props키워드를 일일이 붙여주고 있습니다. 이러한 작업을 편하게 하기 위해 ES6에서 추가된 비구조화 할당 문법을 사용하여 props 값을 바로 추출하는 방법을 알아보겠습니다.

 

MyComponent.js를 수정해봅시다.

MyComponent.js

import React from "react";
const MyComponent = ({ name, children }) => {
  return (
    <div>
      안녕하세요, 제 이름은 {name} 입니다.
      <br />
      children 값은 {children}
      입니다.
    </div>
  );
};


export default MyComponent;

 

이러한 방법을 '비구조화 할당'이라고 합니다. 이를 리액트에 적용시키면 다음과 같이 되겠습니다.