React 함수형 컴포넌트 props 정리

react에서는 클래스형과 함수형으로 컴포넌트를 작성할 수 있는데,

리엑트 16버전에서는 함수형 컴포넌트가 성능이 조금 더 빠르다고 페이스북 개발자가 언급한 이유가 있어서 이러한 함수형 컴포넌트를 사용하는 것을 권장하는 편입니다.

1. 기본 Props 사용

// src/MyComponent.js
import React from ‘react‘;

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

// 부모 측에서 props를 전달하지 않을 경우 default로 설정되는 이름
MyComponent.defaultProps = {
  name: '기본 이름'
};

export default MyComponent;





// 아래와 같이 표현할 수도 있습니다!
import React from 'react';

function MyComponent(props) {
    return (
        <div>안녕하세요, 제 이름은 {props.name}입니다.</div>
    );
}

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

export default MyComponent;

props는 Propeties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소입니다. props는 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있습니다!

우선 위 코드에서는 name이라는 props를 렌더링 하도록 되어 있는데, Props값은 컴포넌트 함수의 파라미터로 받아와서 사용할 수 있습니다!

위와 같이 props를 정의해두고 컴포넌트가 필요로 하는 props 값을 부모 컴포넌트(App.js)에서 지정해주면 됩니다.

여기서 defaultProps는 부모 측에서 props값을 지정하지 않았을 경우 default로 지정되는 초기 값을 의미합니다!

// App.js
import React from 'react';
import MyComponent from './MyComponent';
 
const App = () => {
  return <MyComponent name="React" />;
};
 
export default App;

보통은 부모(AppComponent)가 자식(MyComponent)로 데이터를 전달하고 싶을때 자주 사용됩니다.

2. props.children

children 속성은 부모 컴포넌트에서 사용된, 컴포넌트 태그 사이의 내용을 보여주는 props입니다.

// App.js
import React from 'react';
import MyComponent from './MyComponent';
 
const App = () => {
  return <MyComponent>리액트</MyComponent>;
};
 
export default App;




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

여기서 props.children은 App.js에서 태그 사이로 작성된 ‘리액트’가 됩니다!

3. 비구조화 할당 문법을 사용한 props 내부 값 추출

비구조화 할당 문법은 객체에서 값을 추출해 내는 것인데, props라는 객체에서 값을 추출해서 아래와 같이 코드를 간단하게 만들 수 있는 것을 말합니다.

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

// App.js
import React from 'react';
import MyComponent from './MyComponent';
 
const App = () => {
  return <MyComponent name="React" children="Hello" />;
};
 
export default App;

부모에서 전달해주는 것까지는 모두 동일하지만, 자식에서 전달받을 때 props로 받거나 { name, children }으로 받거나 둘 중에 하나를 선택할 수 있는데, 결과는 동일합니다!

props.name으로 사용할 것이냐, 그냥 name으로 사용할 것이냐의 차이입니다.

4. propTypes

컴포넌트를 사용할 때 필수적인 props을 지정하거나, props의 타입을 지정할 때는 propTypes를 사용합니다.

import React from ‘react‘;
import PropTypes from ‘prop-types‘;

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

MyComponent.propTypes = {
  name: PropTypes.string.isRequired,
  children: PropTypes.number
};

export default MyComponent;

코드 하단에 propTypes로 name과 children의 타입을 지정한 것을 확인할 수가 있는데,

PropTypes.string.isRequired는 문자열이 아니거나 혹은 값이 지정되지 않았을 때,

PropTypes.numer는 값이 숫자가 아니면 콘솔창에 오류가 발생되어 오류를 검출해낼 수가 있습니다.

저작자표시 변경금지 (새창열림)