[React 개발 기록장][3번째 이야기] 상탯값(state)

1. 상탯값

● 상탯값이란?

- props 처럼 렌더링에 영향을 주는 데이터를 가지고 있는 객체

- UI(Element) 반영을 위해 유지해야할 데이터들의 묶음

- getter, setter 함수를 제공/ 상탯값 직접 변경 X

 

2. 상탯값 사용하기

 

▶ Class형 Component

 

this.state로 상탯값에 접근하고

this.setState로 상탯값을 변경

onClick 함수 내부에서 value라는 변수에 this.state로 값을 받아서 1을 더해주고,

이를 setState로 값을 변경해줌

{} 안에 넣어서 UI에 반영시켜줌

=prevState 형태로도 작성 가능

 

 

3.상탯값 저장

 

- 컴포넌트 내부

 

컴포넌트 객체 단위로 상탯값을 유지, 하위 컴포넌트로 전달

setter 함수로 상탯값 변경( this.setState/ useState 훅)

-> context API 사용 가능(추후에 다룰 예정)

 

-컴포넌트 외부 전역 상태 관리

상탯값 저장소를 global하게 두고, dispatch 함수로 관리(setter x)

-> 하나의 함수에 임의의 객체 전달 받고(event 처럼), state 값에 반영

 

* state를 효율적으로 관리 하는 것이 포인트 *