[React] React.js 강좌 8. 함수형 컴포넌트 props 정리

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는 값이 숫자가 아니면 콘솔창에 오류가 발생되어 오류를 검출해낼 수가 있습니다.