지난번 스터디 당시 자바스크립트의 객체 타입을 설명하다가 리액트의 지역 상태관리 방법 중 하나인 useState에 관해 잠깐 소개했는데 좀 더 구체적인 설명 및 예시를 소개하고자 한다.

자, 다시 처음부터 가보자.

1. 상태란 무엇인가 → 화면 구성에 필요한 / 변화가 있는 데이터이다.
2. 리액트에서 사용자와 웹 사이 상호작용의 결과로 [화면의 내용을 변경]하는 데이터가 있을 경우 useState를 사용한다.

👋1. 만약 리액트에서 변화가 있는 데이터를

일반 변수로 사용한다면 어떻게 될까? → UI 변하지 않음

[예시] 옷 카테고리 토글 버튼

export default function Filter() {

	let colorOpen = false; // 일반 변수 사용
	
	return (
		<div>
			<button
	       type="button"
	       onClick={() => {colorOpen = !colorOpen; console.log(`colorOpen: ${colorOpen}`)}}
	    >색상
	    </button>
	      {colorOpen && (
	        <button type="button">블랙</button>
	        <button type="button">화이트</button>
	        <button type="button">블루</button>
	        <button type="button">기타</button>
	      )
		</div>
		...
	)
}

• colorOpen의 값은 변경 된다.
• 하지만 필터를 클릭해도 열리지 않는다.

<aside> 💡

컴포넌트를 새로운 데이터로 업데이트 후 화면을 변경하기 위해서 조건이 있다!

• 렌더링을 할 때마다 데이터를 유지해야한다.
• 새로운 데이터가 적용되기 위해 컴포넌트를 리랜더링해야 한다. </aside>