개요

사내 학습회를 위해서.
React 자료를 만들었습니다.
저도 잘 모르겠어요.
같이 공부하자!!

사전 준비

https://codesandbox.io/?from-app=1

Component

어셈블리는 상태 값을 사용하여 사용자 인터페이스를 나타냅니다.
구성 요소 간에 데이터를 단방향으로 송수신하는props
구성 요소 내부에서 사용하는state입니다.

어셈블리 생성

구성 요소는 클래스와 함수형 구성 요소를 포함한다.
먼저 함수형 구성 요소를 만드는 것부터 시작합니다.
MyComponent.js

import React from "react";

const MyComponent = () => {
  return <div> This is new Component. </div>
}
export default MyComponent;

MyComponent.js

import React from "react";

function MyComponent() {
  return <div> This is new Component. </div>;
}
export default MyComponent;

App.js

import React from "react";
import MyComponent from './MyComponent';

const App = () => {
  return <MyComponent />
}

export default App;

결과

클래스 구성 요소
MyComponent.js

import React from "react";

class MyComponent extends React.Component {
  render() {
    return <div> This is new Component. </div>;
  }
}
export default MyComponent;

props 사용!

props(properties)
구성 요소에 사용되는 데이터를 처리하는 데 사용되는 변경되지 않은 데이터입니다.
상위 어셈블리에 데이터를 전송하는 서브어셈블리입니다.
props는 변경할 수 없습니다.
MyComponent.js

import React from "react";

const MyComponent = props => {
  return <div> My name is {props.name}.</div>;
};

export default MyComponent;

App.js

import React from "react";
import MyComponent from './MyComponent';

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

export default App;

결과

defaultProps
MyComponent.js

import React from "react";

const MyComponent = props => {
  return <div> My name is {props.name}.</div>;
};

MyComponent.defaultProps = {
  name: "NULL"
};

export default MyComponent;

propsTypes
MyComponent.js

import React from "react";
import PropsType from "prop-types";

const MyComponent = ({ name }) => {
  return <div> My name is {name}.</div>;
};

MyComponent.defaultProps = {
  name: "NULL"
};

MyComponent.propsType = {
  name: PropsType.string
};

export default MyComponent;

클래스 구성 요소
MyComponent.js

import React, { Component } from "react";
import PropsType from "prop-types";

class MyComponent extends Component {
  static defaultProps = {
    name: "NULL"
  };

  static propsType = {
    name: PropsType.string
  };

  render(){
    const {name} = this.props;
    return <div> My name is {name}.</div>;
  }
}

export default MyComponent;