React Hooks: useState

State

State 란?

컴포넌트 내부의 변화하는 값을 말하고 특정 상황이나 시점에 따라 달라질 수 있는 값은 state를 만들어 처리해줘야 합니다.

• ex) Counter 수, Input 태그의 value 값

useState 란?

컴포넌트에서 State를 다룰 때 사용하는 함수를 말합니다.

const [<상태 값 저장 변수>, <상태 값 갱신 함수>] = useState(<상태 초기 값>);

• useState 함수의 인자에는 state의 초기값으로 세팅해줄 값을 넣어줌
• useState 함수는 배열을 반환
  0번 째 인텍스에는 state 값 > count
  1번 째 인덱스에는 state를 업데이트할 때 사용하는 함수(setter) > setCount

-useState 함수를 호출하고 바로 반환하는 state 변수(count)와 해당 변수를 갱신하는 함수 (setCount)

규칙

• state 값은 반드시 setter 함수로만 변경할 수 있다.
• setter 함수는 state 이름 앞에 "set"을 붙여서 작성하는 것이 일반적

---

활용예제

import React, { useState } from 'react';

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

	return (
	<div>
		<p> {count} times</p>
		<button onClick={() => setCount(count + 1)}>
		Click
		</button>
	</div>
	);
}  

---

import React, { useState } from 'react';

useState React에서 Hook을 가져옵니다.

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

구성 요소 내부에서 Hook Example을 호출하여 새 상태 변수를 선언합니다. useState은 한 쌍의 값을 반환합니다. count버튼 클릭 수를 보유하고 있기 때문에 변수를 호출하고 있습니다.
useState(0) : 유일한 인수로 전달하여 0으로 초기화합니다.
setCount : 두 번째로 반환되는 항목은 그 자체로 함수입니다. 이를 통해 count를 업데이트할 수 있습니다.

<button onClick={() => setCount(count + 1)}>
		Click
		</button>

사용자가 클릭하면 setCount새 값으로 호출합니다. 그 다음 React는 구성 요소를 다시 렌더링하여 Example새 count값을 전달합니다.

왜 일반 변수가 아닌 State를 써야하는데?

State가 아닌 일반 변수는 렌더링을 일으킬 수 없기 때문!

'렌더링'이 뭔데?

가장 최신 버전의 컴포넌트 상황을 가져오기 위해 컴포넌트를 실행하는 것
컴포넌트는 함수이기 때문에 렌더링이 발생했다는 것은 함수가 호출됐다는 뜻과 같은 이야기 !
함수 호출은 컴포넌트 내부에 있는 코드들이 전부 재실행되었다는 말이다.