함수형 컴포넌트 클래스형 컴포넌트 선언 , 사용해보기 (feat.CodeSandbox)

선언 

• 함수형 컴포넌트

export default function App() {
  const name = '리액트';
  return <div>{name}</div>;
}

• 클래스형 컴포넌트

import { Component } from 'react';
export default class App extends Component {
  render() {
    const name = '리액트';
    return <div>{name}</div>;
  }
}

 

클래스형 컴포넌트

import "./styles.css";

import Name from "./Name.js";

import Age from "./Age.js";

import React, { Component } from "react";

import NameAge from "./NameAge";

class App extends Component {

  render() {

    return (

      <div>

        <Name first="S" last="Lee" />

        <Age age="20" />;

      </div>

    );

  }

}

export default App;

 

import React, { Component } from "react";

class Name extends Component {

  render() {

    const { first, last } = this.props;

    return (

      <span>

        이름: {first} {last}

      </span>

    );

  }

}

export default Name;

 

import React, { Component } from "react";

class Age extends Component {

  render() {

    const { age } = this.props;

    return <span>나이 : {age}</span>;

  }

}

export default Age;

 

 

extends Component : Component 기능을 가진 class로 확장한다

 

함수형 컴포넌트

import "./styles.css";

import Name from "./Name.js";

import Age from "./Age.js";

import React, { Component } from "react";

import NameAge from "./NameAge";

class App extends Component {

  render() {

    return (

      <div>

        <Name first="S" last="Lee" />

        <Age age="20" />;

        <NameAge />

      </div>

    );

  }

}

export default App;

import React, { Component } from "react";

export default function NameAge() {

  const 이름="D Kim"

  const 나이="30"

  return <div>이름: {이름}나이: {나이}</div>;

}

 

 

 

 

[리액트] 여러 개의 Component를 export하는 방법

 

Class Component vs Functional Component