[React] 리액트 State와 Hooks란 무엇인가?

React에서 state란?

리액트에서 state는 이벤트에 의해 변경되는 값이다. state는 컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하거나 화면에 변경사항을 표시하기 위해 사용한다. 이는 개발자가 의도한 동작에 의해서 변경될 수도 있고, 사용자에 의해 변경될 수도 있다. state가 변경되면 리액트가 자동으로 변화를 감지하여 변경된 부분을 리랜더링한다.

 

state 값을 바꾸기 위해서 우리는 set함수를 통해 값을 변경한다.

이때 반드시 set함수를 통해서만 변경을 해야하고 일반 변수의 업데이트 방식으로는 재할당이 불가하다. 만약 일반 변수처럼 값을 직접 변경하게 되면 React가 Component를 다시 랜더링 할 타이밍을 알아차리지 못하게 되니 꼭! set함수를 통해서 변경하도록 하자.

const [state, setState] = useState(1);
// state값을 5로 바꾸어보자
console.log(state); // 1

// 틀린 접근법
state = 5;	    // error
console.log(state); // 1

// 올바른 접근법
setState(5);
console.log(state); // 5

그럼 이제 state가 뭔지 알았고 hook이 뭔지 알아보자. (useState도 hook이다.)

---

Hooks

Hooks는 React 16.8버전에 추가된 기능으로 state, component에 대한 것들을 바꿔놓았다. 예를 들면 클래스형 컴포넌트에서만 가능했던 컴포넌트 내부에 상태 저장과 컴포넌트 생명주기가 함수형 컴포넌트에서도 가능하게 되었다. 참고로 hook은 클래스형 컴포넌트 안에서 동작하지 않는다.

// 클래스형일때
import React, { Component } from 'react';

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

	countUpdate(n) {
  	 	this.setState({
  	 	count: n,
 	  	});
	}

	render() {
   		const { count } = this.state;
   		return (
  			 <div>
     	  		<div>
       	     		<h1>{count}</h1>
        	    	<button
               	 		onClick={() => {
              	  		this.countUpdate(count + 1);
              	  	}}
          	  		>
          	      	증가
          	  		</button>
          	  	</div>
   			</div>
   	 	);
	}
}

export default App;

// 함수형일 때
import React, { useState } from 'react';

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

    return (
        <>
        	{count}
        	<button onClick={() => setCount(count + 1)}>증가</button>
        </>
    );
};

export default App;

---

Hook은 기본적으로 컴포넌트 상태 관리할 수 있는 useState, 컴포넌트 생명주기에 개입할 수 있는 useEffect, 컴포넌트 간의 전역 상태를 관리하는 useContext를 기본 hook으로 제공하고있고 이외의 hook함수들은 기본 hook의 동작원리를 모방해서 만들어졌다. 

---

Hook 사용 규칙
1. 함수의 최상위(at the top level)에서만 Hook을 호출해야 한다.
    반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 예상대로 동작하지 않을 수 있다.
2. 오직 React 함수 컴포넌트 내에서만 Hook을 호출해야 한다.
    일반 JavaScript 함수에서는 Hook을 호출해서는 안된다.

---

참고

[React] 리액트 State란?

React Hooks 이해하기 (1)