[React] 클래스 기반의 컴포넌트, 상태관리, setState

01 클래스 기반의 컴포넌트

• 원래 리액트 컴포넌트는 클래스 기반만 있었음.
• 이유는 함수형 컴포넌트에 상태관릴, 생명주기 함수 등이 지원되지 않아서.
• 그러나 2019년 리액트 훅 등장 이후 대세가 완전히 기울었음.
• 클래스 컴포넌트 배우는 목적: 과거 코드 유지보수 및 올듷한 팀에 적응하기 위함.

 

 

01-1  기본 코딩

 

src

• src/App.js

import React from 'react'

class App extends React.Component{
  
  render(){
    return <h1>처음 만난 클래스 기반 컴포넌트</h1>
  }

}

export default App

 

 

src

• src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

 

 

 

 

index.js

App.js

 

 

 

01-2  클래스 컴포넌트의 상태관리

• 클래스 내부 속성 state 는 상태 역할을 함.
• React.Components 의 setState 메소드는 상탯값 변경 메소드.
• setState 메소드를 사용하면 스프레드 연산 등의 기법을 쓰지 않아도 키가 훼손되지 않음.

 

 

Error

 

 

src

• src/App.js

import React from 'react'

class App extends React.Component{
  
  // 클래스 내부 속성 state 는 상태 역할을 함.
  // 멤버 변수 = {속성}
  state = {
    number: 0
  }

  render(){
    return <h1>{number}</h1>
  }

}

export default App

※ number 는 App 상탯값이 맞지만, state 라고 하는 상탯값 객체 멤버이다.  {state.number}

※ 메소드는 멤버 함수. 자기의 멤버 변수를 구분해줘야한다.  {this.state.number}

 

 

 

 

Solution

 

 

src

• src/App.js

import React from 'react'

class App extends React.Component{
  
  // 클래스 내부 속성 state 는 상태 역할을 함.
  // 멤버 변수 = {속성}
  state = {
    number: 0
  }

  render(){
    return <h1>{this.state.number}</h1>
  }

}

export default App

 

 

 

 

01-3  setState

 

src

• src/App.js

import React from 'react'

class App extends React.Component{
  
  // 클래스 내부 속성 state 는 상태 역할을 함.
  // 멤버 변수 = {속성}
  state = {
    number: 0
  }

  handleD = () => this.setState({ number: this.state.number - 1 })
  handleI = () => this.setState({ number: this.state.number + 1 })

  render(){
    return <>
    <h1>{this.state.number}</h1>
    <button onClick={ this.handleD }>감소</button>
    <button onClick={ this.handleI }>증가</button>
  </>
  }

}

export default App

 

 

 

 

App.js

 

 

 

01-4  상태 관리 예제 코딩

 

src

• src/Bass.js

import React from 'react'

class Bass extends React.Component{
    
    constructor(props){
        super(props)
        // 멤버 함수 안에서 멤버 변수 쓸때 this!
        this.state = { myColor: "black" }
    }

    render(){
        // 구조분해
        const { myColor } = this.state
        return<>
            <input onChange = {e => this.setState({ myColor: e.target.value })}
            type="text" placeholder="COLOR..." /><br />
            <div style={{ width: 200, height: 200, backgroundColor: myColor }}></div>
        </>
    }
}

export default Bass

 

 

src

• src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Bass from './Bass';

ReactDOM.render(
  <React.StrictMode>
    <Bass />
  </React.StrictMode>,
  document.getElementById('root')
);

 

 

 

 

Bass.js

index.js