컴포넌트 1 -component,import, props(prototype)

import React from "react";

const MyComponent = (props) => {
  return <div>안녕하세요 제 이름은 {props.name}입니다</div>;
};
// MyComponent.defaultProps = {
//   name: "기본이름",
// };
export default MyComponent;

1.클래스형 컴포넌트

함수형컴포넌트 와의 차이점 : state, 라이프사이클 API기능, 임의 메서드 정의, render함수 필요

 

	함수형컴포넌트	클래스형컴포넌트
장점	선언이 쉽다, 메모리가 적다, 배포시 파일 크기가 작다.	state,라이프사이클api 사용가능, 임의메서드정의가능
단점	state,라이프사이클api 사용불가  >>16.8v 이후 HOOKS 등장	함수형컴포넌트에 비해 선언하기 어렵다

//함수형 component
import React from "react";
import "./App.css";

function App() {
  const name = "리액트";
  return (
    <div>
      <h1 className="react">{name}는 재밌!어</h1> <br />
    </div>
  );
}

export default App;

//class형 component
import React,{Component} from 'react';
import "./App.css";

class App extends Component{
  render(){
    const name = "리액트"
    return <div><h1 className = "react">{name}는 재밌어 !</h1></div>
  }
}

export default App;

2.화살표함수로 컴퍼넌트 작성하기

화살표함수의 경우 this 값이 일반 함수와 다르기 때문에 주의해서 사용

import React from "react";

const MyComponent = () => {
  return <div>나의 멋진 컴포넌트</div>;
};

export default MyComponent;

3.모듈 내보내기 및 불러오기 

export 는 다른 파일에서 이 파일을 import할 수 있도록 클래스를 불러오는 역할

 

4.props

export 되는 component 파일에서 props를 지정 가능하며, defalutProps로 디폴트값 지정가능

//App.js
import React from "react";
import MyComponent from "./MyComponent";

const App = () => {
  return <MyComponent name="React">리액트</MyComponent>;
  //return <MyComponent />
};
export default App;

-------------------------------------------------
//MyComponent.js
import React from "react";

const MyComponent = (props) => {
  return (
    <div>
      안녕하세요 제 이름은 {props.name}입니다 children값은 {props.children}
      입니다
    </div>
  );
};
// MyComponent.defaultProps = {
//   name: "기본이름",
// };
export default MyComponent;

 

4-1.props값 비구조화 할당, 파라미터로 사용

(export되는 component에서 )

//props 비구조화할당하기
import React from "react";

const MyComponent = props => {
  const {name, children} = props;
  return (
    <div>
      안녕하세요 제 이름은 {name}입니다 children값은 {children}
      입니다
    </div>
  );
};
// MyComponent.defaultProps = {
//   name: "기본이름",
// };
export default MyComponent;
-----------------------------------------------
//props 파라미터로 사용
import React from "react";

const MyComponent = ({name, children}) => {
  return (
    <div>
      안녕하세요 제 이름은 {name}입니다 children값은 {children}
      입니다
    </div>
  );
};
// MyComponent.defaultProps = {
//   name: "기본이름",
// };
export default MyComponent;

4-2.Proptype 설정

1)필수 props 타입 설정시 import 구문으로 prototype을 불러온다.

2)해당 컴퍼넌트 protoTypes 매서드를 활용하여 defaultProps 처럼 객체 형태로 묶어준다.

3)isRequired 추가시 console에 경고문 뜬다.

//App.js
import React from "react";
import MyComponent from "./MyComponent";

const App = () => {
  return (
    <MyComponent name="react" favoriteNumber={1}>
      리액트
    </MyComponent>
  );
  //return <MyComponent />
};
export default App;

//MyComponent.js
import React from "react";
import PropTypes from "prop-types";

const MyComponent = ({ name, children, favoriteNumber }) => {
  return (
    <div>
      안녕하세요 제 이름은 {name}입니다 children값은 {children}
      입니다
      <br />
      좋아하는 숫자는 {favoriteNumber}입니다.
    </div>
  );
};
// MyComponent.defaultProps = {
//   name: "기본이름",
// };
MyComponent.propTypes = {
  name: PropTypes.string,
  favoriteNumber: PropTypes.number.isRequired,
};
export default MyComponent;

4) prototype 종류 : array, arrayOf, bool, func, number, object, string, symbol, node(숫자,문자열,jsx코드,children..),

instanceOf(클래스), oneOf([array]),oneOfType,objectof..

참고 : github.com/facebook/prop-types

5) class 컴포넌트 + Prototypes

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

class MyComponent extends Component {
  render() {
    const { name, favoriteNum, children } = this.props; //비구조화 할당
    return (
      <div>
        안녕하세요 제 이름은 {name}입니다 <br />
        children값은 {children}입니다
        <br />
        가장 좋아하는 숫자는{favoriteNum}입니다.
      </div>
    );
  }
}
MyComponent.defaultProps = {
  name: "기본이름",
};
MyComponent.propTypes = {
  name: PropTypes.string,
  favoriteNum: PropTypes.number.isRequired,
};
export default MyComponent;