react 공부 day 3(컴포넌트(프로퍼티))

컴포넌트의 구성요소 3가지
1. 프로퍼티
2. state
3. 컨텍스트

프로퍼티

프로퍼티는 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다. 이때 프로퍼티값은 수정할 수 없다는 특징이 있다.

흠.. 단순하게 생각하면 큰친구가 안고 있는 작은 친구한테 사탕주는 것과 같은 느낌인가.. 허허

프로퍼티의 다양한 사용 방법 알아보기

프로퍼티에서는 자바스크립트의 자료형을 모두 사용할 수 있다. 이때 프로퍼티의 자료형은 미리 선언해주는 것이 좋다.

왜?

프로퍼티의 자료형을 미리 선언하면 리액트 엔진이 프로퍼티로 전달하는 값의 변화를 효율적으로 감지할 수 있고, 개발자가 실수로 지정되지 않은 자료형을 프로퍼티에 전달하려고 할 때 경고 메세지로 알려주기 때문이다.

문자열형 프로퍼티 사용하기

import React from 'react';
import PropTypes from 'prop-types';    // 1

class PropsComponent extends React.Component {
  render() {
    return <div className="message-container">{this.props.name}</div>; // 2
  }
}

PropsComponent.propTypes = {  // 3
  name: PropTypes.string,  // 4
};

export default PropsComponent;

1. prop-types라는 라이브러리를 PropTypes라는 이름으로 임포트.
2. name 프로퍼티로 받은 문자열을 출력한다.
3. PropsComponent의 propTypes라는 특수 변수(prop-types 라이브러리 임포트 이름 PropTypes와 다름!!!!)를 사용하여 프로퍼티의 자료형을 정의한다.
4. 프로퍼티의 자료형을 객체 형태로 지정하여 PropsComponent.propTypes에 저장했다.

prop-types를 이용해서 자료형을 선언해주는거 같다.
그러니까 prop-types를 사용해야만 propTypes를 통해 프로퍼티의 자료형을 정해주는 것.

그러면 이제 이 컴포넌트를 사용해보자.

import React from 'react';
import PropComponent from './03/PropComponent';

class App extends React.Component {
  render() {
    return (
      <div>
        <PropComponent name = "두잇 리액트" />
      </div>
    );
  }
}

export default App;

태그에 컴포넌트 명과 함께 그 해당 컴포넌트의 프로퍼티인 name에 값을 넣어주면서 출력이 되었다.