리액트 복습 - state 변경

state 변경

리액트에서 state를 변경할 때는 직접 값을 변경하지 않고,
반드시 state 변경 함수를 이용해서 변경시켜야 한다.
직접 값을 변경시킨다면 state값은 변경 되지만,
react는 변경 된것을 인지하지 못해 리 렌더링을 하지 못한다.
그 말은 즉슨 state를 변경할 때 마다 react는 리 렌더링을 해서 view를 바꿔줘야한다.

• state의 값을 직접 변경할때 발생하는 메세지

state를 사용하는 방법은 다소 번거롭기는 하지만 React의 장점 중 하나로 계속해서 데이터를 확인하지 않기 때문에 성능 면에서 다른 프레임워크보다 우수할 수 있습니다."

state 변경 함수를 사용하면, 리액트는 state를 refresh하고 또한 리 랜더링까지 해준다.

• 클래스형 state 변경

import React, {Component} from 'react';
	
class App extends 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;

만약 this.state.count = 1로 state에 직접 할당하면 state는 변경 되지만,
react는 state와 render함수를 호출하지 못한다.

이벤트 핸들러 함수에서 setState함수를 호출하고, 인자로 현재 상태를 가져오기 위해 current 인자를 불러와 state를 변경해준다.

setSate를 호출할 때 마다 react는 새로운 state와 함께 render 함수를 실행한다.
현재 state는 객체이기 때문에 객체 문법을 사용한다.

• 함수형 state 변경

import React, { useState } from 'react';
import './App.css';


function App() {
  
const [count, setCount] = useState(0)

const add = () => {
	setCount(count + 1)
}

const minus = () => {
	setCount(count - 1)
}

  return (<div>
          <h1>The number is : {count}<h1>
    	<button onClick = {add}>Add</button>
		<button onClick = {minus}>Minus</button>
</div>
)
}

export default App;

함수형 컴포넌트는 useState에 구조 분해 할당한 배열의 1번째 인덱스의
state변경 함수를 이용해 state를 변경한다.
클래스 컴포넌트 처럼 객체로 접근하는것이 아니기 때문에 좀더 사용이 간편하다.