Components

  • function components
  • class components

Function 컴포넌트는 함수고 무언가를 리턴하고 그것이 스크린에 표시가 된다.

Class 컴포넌트는 리액트 컴포넌트로부터 확장되고 스크린에 표시된다.
그리고 render이라는 메서드 안에 소스를 집어 넣어야한다.

리액트는 자동적으로 모든 Class 컴포넌트render 메소드를 실행하한다.

클래스 컴포넌트

Function components가 아니기 때문에 return이 없다.
대신 render이라는 메소드를 가지고 있다.
그리고 render()안에 JSX문법을 사용할 수 있다.

import React from "react";

class App extends React.Component{
    render(){
        return <h1>I'm a class Component</h1>;
    }
}

export default App;

image.png

스테이트

Class 컴포넌트를 사용해야하는 이유는 Class 컴포넌트가 가진 state라고 불리는 녀석 때문이다.

변하는 데이터를 우리는 state로 표현할 수 있다.

import React from "react";

class App extends React.Component{
    state = {
        count: 0
    };
    add = () => {
        this.state.count = 1;
    };
    minus = () => {
        this.state.count = -1;
    };
    render(){
        return (
            <div>
                <h1>The number is: {this.state.count}</h1>
                <button onClick={this.add}>Add</button>
                <button onClick={this.minus}>Minus</button>
            </div>
        );
    }
}

export default App;

image.png

절대 state를 변경하지 마시오.
새로고침하고 minus를 누르면 동작하지 않아.
그리고 직접 변경하지말고 stateset해라 라고 설명하고 있어.

왜 동작하지 않을까?

답을 하자면, 리액트는 render을 리프레쉬하지 않기 때문이야.
이 말의 의미는 매번 state의 상태를 변경할 때 리액트가 render을 호출해서 바꿔주길 원한다는 말이다.

setState를 쓰면?

setState메소드를 호출하면, 리액트는 내가 언제 setState를 호출할 지를 알고 또한 내가 뷰페이지를 리프레쉬하길 원하는 것도 알아서 render을 리프레쉬해죠.

즉, setState를 쓰면 리액트는 새로운 state와 함께 render을 호출할거야.

그럼 소스를 변경해보자.

import React from "react";

class App extends React.Component{
    state = {
        count: 0
    };
    add = () => {
        this.setState({ count: this.state.count + 1 });
    };
    minus = () => {
        this.setState({ count: this.state.count - 1 });
    };
    render(){
        return (
            <div>
                <h1>The number is: {this.state.count}</h1>
                <button onClick={this.add}>Add</button>
                <button onClick={this.minus}>Minus</button>
            </div>
        );
    }
}

export default App;

setState를 통해 1을 가감하는 더 좋은 방법이 있다.

add = () => {
    this.setState(current => ({ count: current + 1 }));
};
minus = () => {
    this.setState(current => ({ count: current - 1 }));
};

state를 set할 때, 리액트에서 외부의 상태에 의존하지 않는 가장 좋은 방법이다.