[TIL] 210808 - React 클론코딩

State와 클래스형 컴포넌트

클론코딩 3, 4장을 통해 클래스와 props 개념에 대해 학습하였다.
그리고 props와 state는 react에서 가장 중요한 개념이라고도 말할 수 있기 때문에 따로 정리하고 넘어갈 예정이다.

state와 props 모두 데이터를 다룰 때 사용되는 개념이지만 큰 차이는 아래와 같이 볼 수 있다.

• props : 변하지 않는 데이터 (immutable data).
• state : 동적 데이터를 다룰 때 사용.

01. state로 숫자 증감 기능 만들기

./src/App.js에서 

import React from 'react';

class App extends React.Component{

	}

export default App;

클래스형 컴포넌트가 되려면 'App 클래스가 리액트가 제공하는 Component 클래스를 반드시 상속받아야 한다.'

함수가 아닌 클래스 형태의 App 컴포넌트에서는 return 문을 사용할 수 없고, 함수 형태의 App 컴포넌트처럼 JSX를 반환할 수가 없다.

클래스형 컴포넌트에서는 JSX를 반환하기 위해 render() 함수를 사용한다.

./src/App.js에서 

import React from 'react';

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

export default App;

함수형 컴포넌트는 return 문이 JSX를 반환하고, 클래스형 컴포넌트는 render() 함수가 JSX를 반환한다. 그리고 리액트는 클래스형 컴포넌트의 render()함수를 자동으로 실행시켜준다. 이 때, 클래스형 컴포넌트를 사용하는 이유는 결국 'state를 사용하기 위함'이라는 것을 잊지 말자.

★ state를 사용하려면 반드시 클래스형 컴포넌트 안에서, 소문자를 이용하여 state라고 적자. **

import React from 'react';

class App extends React.Component {
    state = {
        count:0,
    };

    add=()=>{
        console.log('add'); // count state는 아직 변경하지 않았으므로 함수 동작만 확인할 수 있다. 
    };

    minus=()=>{
        console.log('minus');
    };

    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

1. 클래스형 컴포넌트 작성하기
2. render() 함수 사용하기
3. state 정의하기
4. state 에 count값 추가하고 사용하기
5. 버튼을 눌러서 count state 값 변경하기
6. add()와 minus() 함수 작성하기
7. 버튼을 누르면 동작하도록 onClick 속성 추가하기

숫자 증감 기능 만들기

원래 리액트는 state가 변경되면 render() 함수를 다시 실행하여 변경된 state를 화면에 출력한다. 하지만 state를 직접 변경하는 경우에는 render() 함수를 다시 실행하지 않는다.

따라서 자바스크립트에서와 다르게 this.state.count = this.state.count + 1 또는 this.state.count++ 등의 코드는 사용하면 안되고, state를 간접적으로 변경하는 방법을 사용해야한다.

stetState( ) 함수 사용하기

class App extends React.Component {
    state = {
        count:0,
    };

    add=()=>{
        this.setState({count:1});
    };

    render(){
        return(
            <div>
                <h1> The number is : {this.state.count} </h1>
                <button onClick={this.add}>ADD</button>
            </div>
        )
    }
}

[ The number is : 0 ]
1. setState( ) 함수에 새 state가 전달되면
2. state가 업데이트 된 다음
3. render( ) 함수가 자동으로 실행되면서
[ The number is : 1 ]
4. 화면이 업데이트 된다.

import React from 'react';

class App extends React.Component {
    state = {
        count:0,
    };

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

    minus=()=>{
        this.setState(current=>({
            count:current.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

state는 동적 데이터를 사용할 떄 반드시 도입해야 할 요소이다.

setState( ) 함수는 바뀐 state의 데이터만 업데이트한다.

클래스형 컴포넌트의 일생 알아보기