선언 방식과 props 받는 방식의 차이

App.js

import "./App.css";
import Class from "./component/Class";
import Function from "./component/Function";

function App() {
  return (
    <div className="App">
      <Class name="class" favoriteNumber="3" />
      <hr/>
      <Function name="function" favoriteNumber="7" />
    </div>
  );
}

export default App;

함수형 컴포넌트

import React from "react";

function Function({ name, favoriteNumber }) {
  return (
    <div className="react">
      Hi, I'm {name}.<br /> My favorite number is {favoriteNumber}
    </div>
  );
}
export default Function;

클래스형 컴포넌트

클래스형은 컴포넌트 Component로부터 상속을 받고 render() 메소드를 사용해야 한다.

부모로부터 props를 받을 때는 this.props 사용.

import React, { Component } from "react";

class Class extends Component { // 컴포넌트로부터 상속을 받는다.
  render() {  // render 메소드가 있어야 한다.
    const { name, favoriteNumber } = this.props;  
    // 부모 컴포넌트가 넣어준 props 가지고 오기

    return (
      <div className="react">
        Hi, I'm {name}.<br /> My favorite number is {favoriteNumber}
      </div>
    );
  }
}

export default Class;

state를 사용할 때는?

클래스형

constructor 메서드를 활용해야 한다.

super는 이 객체의 부모 객체(상속받은 객체) 자체를 의미한다.

super()를 사용하면 한 객체가 상속받은 부모 객체의 생성자 함수를 가져온다는 뜻이다. super(props)는 이 클래스의 부모 클래스 Component 클래스가 가지고 있는 생성자 함수를 가지고 온다.

• 왜 super(props)를 사용하는 거지(참고)

export class Class_Counter extends Component {
  constructor(props) {
    super(props);  // 얠 써 줘야 생성자에서 this 호출이 가능하다.

    this.state = { number: 0, fixedNumber: 0 };  // state의 초기값 설정
  }
  render() {
    const { number, fixedNumber } = this.state;  // state를 조회한다. 가져온다.
    return (
      <div>
        <h1>Changing Number : {number}<br/>Fixed Number : {fixedNumber}</h1>
        <button
          onClick={() => {
            this.setState({ number: number + 1 });
          }}
        >
        +1
        </button>
      </div>
    );
  }
}