React - 컴포넌트 (1) props

Front-end

React - 컴포넌트 (1) props

자몽포도 2023. 6. 13. 10:32

props

props는 컴포넌트 속성을 설정할 때 사용하는 요소입니다.

MyComponent.js

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

props 값 지정하기

App.js

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

children

리액트 컴포넌트를 사용할 때 컴포넌트 태그 사이의 내용을 보여주는 props가 children입니다.

MyComponent.js

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

App.js

const App = () => {
  return <MyComponent>리액트</MyComponent>;
};

구조 분해 할당을 통해 props 내부 값 추출

찾아보니 구조 분해 할당을 비구조화 할당이라고도 부르는 것 같다. ES6 구조 분해 할당을 이용하면 앞서 했던 작업들을 더 편하게 할 수 있습니다.

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

구조 분해 할당을 함수 파라미터 부에서도 사용할 수 있습니다.

const MyComponent = ({name, children}) => {
    return ...
}

propTypes

propTypes 을 통해서 props 들의 타입 체크를 할 수 있다. 그렇다고 자바처럼 뭐 컴파일 오류를 발생시키는건 아니지만 타입 힌트와 비슷한 개념인 것 같다.

import 구문을 통해 propTypes 를 불러와줍니다.

import PropTypes from 'prop-types';

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

만약 name prop에 number type을 적는다면 아래와 같이 콘솔 에러가 발생합니다.

isRequired를 통해 prop 필수 여부를 체크해줄 수도 있습니다.

클래스형 컴포넌트에서 props

클래스형 컴포넌트에서는 render 함수에서 this.props를 조회하면 됩니다.

class MyComponent extends Component {
    render() {
        const { name, favoriteNumber, children } = this.props;
        return (
            <div>
                안녕하세요 제 이름은 {name}입니다. <br />
                children 값은 {children}
                입니다.
                <br />
                제가 좋아하는 숫자는 {favoriteNumber}입니다.
            </div>
        );
    }
}

티스토리