[React] 3 - Component > property

goal

• Component의 모든 것

컴포넌트 개념

• 기존 웹 프레임워크는 MVC 방식으로 (모델 (=>정보) / 뷰 (=>화면) / 컨트롤러 (=> 구동) ) 3가지로 코드를 분리하여 관리했다.
• 코드를 효율적으로 관리할 수 있지만, 3가지 각 요소들의 의존성이 너무 높아서 조금만 수정하려고 해도 연결되어 있는 부분을 모두 바꾸는 것이 매우 까다로워 코드의 재사용성이 어려웠다.
• 웹 사이트의 화면은 알다시피, 특정 부분만 업데이트되며, 많은 요소들이 반복적으로 사용되고 보여진다.
• 여기서 컴포넌트의 개념이 착안되었다.
• 리액트의 화면은 컴포넌트만으로 구성되어 있으며, 기존의 MVC 뷰(view)를 "독립적"으로 구성하여 재사용이 용이해졌고, 컴포넌트를 통해서 또다른 컴포넌트를 만들기도 매우 편리해졌다.
• 아래는 매우 간단한 TodaysPlan이라는 컴포넌트를 만들어서 import해준 예시

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
-------------------------------------------
  
// App.js
import React, { Component } from 'react';
import TodaysPlan from "./03/TodaysPlan"; // 작성된 컴포넌트(TodaysPlan Component) 불러오기(import하기)

class App extends Component {
  render() {
    return (
      <div>
        <div className = "body">
          <TodaysPlan/> // 컴포넌트를 JSX 안에 마크업 형식으로 추가
        </div>
        <img src = "https://cdn.ftoday.co.kr/news/photo/201302/13868_15545_3126.jpg"/>
      </div>
    );
  }
}

export default App;
-------------------------------------------

// TodaysPlan.jsx
import React, { Component } from 'react';

class TodaysPlan extends Component { // 컴포넌트명은 대문자로
    render() {
        return (
            <div className = "message-container">
                <ol>
                    <li>윌리와 산책하기</li>
                    <li>리액트 공부하기</li>
                    <li>운동하기</li>
                </ol>
            </div>
        );
    }
}

export default TodaysPlan;

컴포넌트 구성요소

1. property : 상위 컴포넌트에서 하위 컴포넌트로 전달되는 읽기 전용 데이터

2. state : 컴포넌트의 상태를 저장하고 변경할 수 있는 데이터

3. context : 부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에 전달하는 데이터

1. property 프로퍼티

- 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다.
- property 값은 수정할 수 없다.

• property에서는 js의 자료형을 모두 사용할 수 있다.
• 자료형은 미리 선언해 주는 것이 추천된다.
  • 정의되지 않은 자료형을 property에 전달시, 경고 메시지를 전달함
  • 리액트 엔진이 property로 전달하는 값의 변화를 효율적으로 감지함
• property의 자료형을 선언하는 방법은 prop-types(리액트에서 제공)를 이용한다.
• 문자열 전달시 : " " (따옴표) 이용
• 문자열 이외의 자료형 전달시 : { } (중괄호) 이용

// App.js

<PropsComponent name = "Before Sunset is ..." />
  // render() 내부에
  // 다음과 같은 형식으로 속성을 가져온다. 
  // name 속성으로 받은 문자열을 출력한다.
----------------------------

// PropsComponent.jsx

import React from "react";
import PropTypes from "prop-types"; // prop-types 라이브러리를 import

class PropsComponent extends React.Component {
    // in this PropsComponent 컴포넌트에서는 
    // name 이라는 이름의 프로퍼티로 전달받은 "Before Sunset ..." 이라는 문자열 값을 
    // render() 함수에서 참조할 수 있다.
    // render() 함수에서 this.props.name 으로 property값을 참조하고 있다.
    render() {
        return (
            <div className = "message-container">
                {this.props.name} 
            </div>
        );
    }
}

// 자료형을 선언하는 예제
PropsComponent.propTypes = {name : PropTypes.string,} 
  // PropsComponent의 propTypes라는 특수한 변수를 사용해서 프로퍼티의 자료형을 정의함
  // 프로퍼티의 자료형을 객체 형태로 지정해서, PropsComponent.propTypes에 저장함

export default PropsComponent;