Class component와 Function component차이, Props와 State 차이

클래스형 컴포넌트와 함수형 컴포넌트

클래스형 컴포넌트

import {Component} from "react";

class App extends Component {
  render() {
    return (
      <div>
      </div>
    );
  }
}

export default App;

클래스형 컴포넌트는 리액트의 모든 기능을 활용할 수 있다.

함수형 컴포넌트

function App() {
  return (
    <div>
    </div>
  );
}

export default App;

함수형 컴포넌트는 기능이 부족했었다. state를 컴포넌트 내부에 만들 수 없다는 것과 라이프사이클 API도 사용할 수 없었다. 그래서 함수형 컴포넌트는 상위 컴포넌트가 전달하는 일만 단순하게 처리하는 역할이었다.

하지만, Hook이라는 개념이 도입되면서 함수형 컴포넌트에서도 state를 다룰 수 있고, 라이프사이클에 따라서 해야할 작업도 정의할 수 있게 되었다.

Props와 State의 차이

Props

간단히 하면 리액트에서 속성값을 나타내는 키워드이다.

App.js

import Content from "./components/Content";

function App() {
  return (
    );
}

export default App;

 

components/Content.js

function Content(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <img src={props.img} alt=""/>
      <p>{props.year}</p>
    </div>
  )
}

export default Content;

props를 사용한 간단한 예시로 부모 컴포넌트인 App.js로부터 props를 받고 자식 컴포넌트인 Content.js에서 사용한다. 다만 이 props는 상속받은 자식 컴포넌트 내에서 수정이 불가능하다. 이를 일방향성 상속이라고 한다.

State

State는 컴포넌트의 내부에서 선언되었으며 컴포넌트의 상태를 나타낸다.

App.js

import {Component} from "react";
import Content from "./components/Content";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
	      movie: {
        title: "클로저",
        img: "<https://the-take.com/images/uploads/screenprism/_constrain-480w/closer-3.jpg>",
        year: "2004"
      }
    }
  }

  render() {
    return (
    );
  }
}

export default App;

 

components/Content.js

function Content(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <img src={props.img} alt=""/>
      <p>{props.year}</p>
    </div>
  )
}

export default Content;

이는 state의 예제이다. App.js는 클래스형 컴포넌트로 작성되었다.

State와 Props 차이

State와 Props의 가장 큰 차이점은 props는 읽기 전용으로 수정이 불가하지만 State는 수정이 가능하다는 점이다.

또한 props는 함수형 컴포넌트, 클래스형 컴포넌트 모두 사용가능하지만 State는 클래스형 컴포넌트에서만 사용할 수 있었는데 리액트 16.8 버전부터 훅을 통해 구현이 가능하다.