리액트 헷갈리는 개념 정리 1 - props (TIL#01)

props가 뭘까?

• props는 'properties'를 줄인 표현으로, 컴포넌트의 속성을 설정할 때 사용합니다.
• 하나의 리액트 컴포넌트에서 다른 리액트 컴포넌트를 사용 시 넘겨줘야 하는 값이 있을 때, JSX 어트리뷰트나 자식 엘리먼트를 단일 객체로 묶어서 넘겨줍니다.
• 클래스형 컴포넌트에서는 this.props으로 가져올 수 있으며, 함수형 컴포넌트에서는 파라미터로 받아 와서 사용할 수 있습니다. (이 글에서는 함수형 컴포넌트만 다뤄보았습니다.)

props 렌더링하기

App 컴포넌트에서 TestComponent 라는 컴포넌트를 사용할 때, TestComponent에 name이라는 어트리뷰트와 하나의 div 엘리먼트를 넘겨줍니다.

// App.js

import React from 'react';
import TestComponent from './components/TestComponent';

const App = () => {
  return (
    <>
      <TestComponent name="Sangsu">
        <div>Hello</div>
        <div>World</div>
      </TestComponent>
    </>
  );
};

export default App;

TestComponent에서는 App 컴포넌트가 넘겨준 props를 렌더링해보겠습니다. props를 렌더링할 때는 JSX 내부에서 {} 기호로 감싸주면 됩니다.

• 자식 엘리먼트의 경우 props.children으로 사용할 수 있습니다.

// components/TestComponent.js
import React from 'react';

const TestComponent = props => {
    return (
        <>
            {props.name}
            {props.children}
        </>
    );
};

export default TestComponent;

props 콘솔로 출력하기

TestComponent 컴포넌트에 다음과 같은 줄을 추가하여 props를 콘솔로 출력해봅니다.

console.log(props);

결과는 다음과 같습니다.

부모 컴포넌트에서 넘겨준 JSX 어트리뷰트와 자식 엘리먼트가 담기고, 자식 엘리먼트의 경우 children이라는 이름의 Array로 담기는 것을 확인할 수 있었습니다.

props를 컴포넌트의 인자로 받아올 때 ES6의 문법인 구조분해 할당(Destructuring assignment) 으로도 받아올 수 있습니다. 이렇게 하면 props를 생략하고 렌더링을 할 수 있습니다.

// components/TestComponent.js
import React from 'react';

const TestComponent = ({name, children}) => {
    return (
        <>
            {name}
            {children}
        </>
    );
};

export default TestComponent;

props 설정

defaultProps

• 부모 컴포넌트에서 별도의 attribute를 정하지 않을 경우의 기본값입니다.

// components/TestComponent.js
import React from 'react';

const TestComponent = ({name}) => {
    return (
        <>
            {name}
        </>
    );
};

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

export default TestComponent;

propTypes

• props의 타입(type)을 지정하여 props를 검증합니다.
• 이를 사용하려면 PropTypes를 prop-types 패키지에서 불러와야 합니다.
• 필수 propTypes를 지정하려면 isRepuired를 붙여줍니다.

// components/TestComponent.js
import React from 'react';
import PropTypes from 'prop-types';

const TestComponent = ({name}) => {
    return (
        <>
            {name}
        </>
    );
};
TestComponent.propTypes = {
	name: PropTypes.string.isRequired
};

export default TestComponent;

props 사용 시 주의사항

• 리액트 컴포넌트가 props를 다룰 때는 순수 함수처럼 행동해야 합니다. 즉 props를 임의로 수정하지 말아야 합니다. 변화하는 값에 대한 대응은 state가 담당합니다.

이 게시물은 초보자로서 개인 공부를 위하여 작성되었습니다!