[React] 함수형 컴포넌트와 클래스 컴포넌트

React에서는 컴포넌트를 사용하는데 있어서 두 가지로 분류

 

1. 함수형 컴포넌트

 

2. 클래스 컴포넌트

 

---

 

함수형 컴포넌트

 

함수형으로 생겼으며 아래와 같이 참조

 

function App() {
  return (
      <>
        <div>Function Component</div>
      </>
);
export default App;

함수 형태 => Return 한 것을 스크린에 표시

---

 

클래스 컴포넌트 형태

 

class App extends React.Component {
    render() {
        return(
            <>
                <div>Class Component</div>
            </>
        );
    }
}
export default App;

 

리엑트 컴포넌트를 확장시켜 가져와 사용

 

클래스 리엑트 컴포넌트는 return을 가지고 있지 않고 render 메서드를 가지고 있음

 

render 메서드 안에서 return을 사용하여 스크린에 표시

 

해당 부분은 Class 컴포넌트가 render 메서드를 자동으로 실행한다고 함

---

클리스 컴포넌트를 사용하는 이유

 

State

 

컴포넌트에서 데이터 공간을 주고 변화시기키 위한 것으로

 

State라고 불리는 이름은 Object 이고 아래와 같이 사용 가능함

 

class App extends React.Component {
    
    state ={
        
    };
    
    render() {
        return(
            <>
                <div>Class Component</div>
            </>
        );
    }
}
export default App;

 

---

테스트

 

 - 버튼을 누르면 숫자가 1씩 또는 2씩 늘어나는 것을 화면에 표시하기

 

데이터가 필요하기 때문에 state 안에 변수와 값을 넣어주기

 

state = {
        number: 0,
};

 

- 버튼 생성

 

render() {
        return(
            <>
                <div>Your count is: {this.state.number}</div>
                <button>Count me</button>
                <button>Count me for the multiple</button>
            </>
        );
    }

 

- 1또는 2씩 숫자가 늘어나는 함수 생성

 

add = () => {
        console.log("Add");
    };

multiple = () => {
        console.log("multiple");
    };

 

- 함수를 이벤트 핸들러에 전달

 

  render() {
        return(
            <>
                <div>Your count is: {this.state.number}</div>
                <button onClick={this.add}>Count me</button>
                <button onClick={this.multiple}>Count me for the multiple</button>
            </>
        );
    }

 

만약 this.add 를 this.add() 로 하게 되면 즉시 실행되면서 한번만 실행됩니다.

 

- 버튼이 실행될 때, 함수가 실행되면서 render가 재실행 되도록 하기

 

  add = () => {
        this.setState({number: this.state.number + 1});
    };

   multiple = () =>{
        return this.setState(current=>({number: current.number+2}));
    };

 

setState를 이용하여 state 값을 변경

 

add에서 사용한 방식보다 

 

multiple 함수에 사용한 방식을 추천합니다.

 

 

class App extends React.Component {

    state ={
        number: 0,
    };

    add = () => {
        this.setState({number: this.state.number + 1});
    };

   multiple = () =>{
        return this.setState(current=>({number: current.number+2}));
    };

    render() {
        return(
            <>
                <div>Your count is: {this.state.number}</div>
                <button onClick={this.add}>Count me</button>
                <button onClick={this.multiple}>Count me for the multiple</button>
            </>
        );
    }
}
export default App;