4. React (State)

내가 생각하는 핵심 키워드

: import { useState }, State, setState

추가 키워드

: Spread Syntax (https://wildcard.tistory.com/entry/JavaScript-전개-구문Spread-Syntax)

 

 

1. State

- Component 내에서 유동적으로 변할 수 있는 값을 저장하여 관리하기 위해 사용

- 개발자가 의도한 동작에 의해 변할 수도, 사용자의 입력에 따라 새로운 값으로 변경될 수 있다

- State 값이 변경되고 재렌더링이 필요한 경우, React가 자동으로 계산하여 변경점을 렌더링

 

 

2. State 사용시 유의사항

- State 값을 직접 변경하게 되면 React는 이를 인지하지 못하고 재렌더링 또한 수행하지 않는다

- State를 변경하고 싶다면 setState 함수를 사용

  (setState 호출 시 React에게 재렌더링이 요구되어진다)

setState 내에 변경할 값을 직접 넣는 방법

setState에 함수를 넣는 방법

setState 함수에는 변경할 값을 직접 넣는 방법이 있고, 함수를 넣는 방법이 있다

함수를 넣는 경우 함수가 반환(return)하는 값으로 State가 변경

위와 같이 현재 값을 기반으로 State를 변경하고자 하는 경우 함수를 넣는 방법을 권장

 

 

3. Object를 갖는 State를 만들 때 유의사항

Object를 값으로 갖는 State도 생성 가능

이때, Object의 값을 직접적으로 변경해주어도 State의 변경을 감지할 수 없다

current.grade = 2; 의 경우 object의 값은 변경되지만 object 자체는 변경되지 않는다

 

비유적으로 표현했을 때, 박스의 모양만 인식하고 결과를 판단하는 장치가 있다고 가정

박스 안에 내용물을 바꾸었지만 박스의 겉 모양은 여전히 내용물을 바꾸기 전과 동일하다

그렇다면 해당 장치는 변화를 인지하지 못하고 아무런 조치도 취하지 않을 것이다

바로 React가 이같은 경우에 속하며, 결과적으로 재렌더링이 일어나지 않는 것이다

 

위와 같은 상황에서 변화를 인지하기 위해서는 데이터를 담는 object 자체를 변경해야 한다

(기존의 데이터를 새로운 객체 안으로 넣어주는 것을 의미)

newUser를 선언하여 기존의 데이터를 Spread Syntax를 이용해 전개

위 과정을 통해 데이터의 복제가 이루어지고, 데이터를 변경 후 리턴 시 재렌더링을 수행

 

 

4. State 재렌더링

useState를 사용하기 위해서는 React 패키지로부터 useState를 import 해야한다

 

test시 중요한 점은 절대로 State의 값을 임의로 변경해서는 안된다는 것, setState 이용

(위 테스트는 onClick 이벤트를 이용, 버튼 클릭 시 count가 2씩 증가하는 코드)

 

 

5. State 재렌더링 - Object

State는 object나 array도 값으로 할당할 수 있다

이때, 문제는 object, array 내부의 값만 변경할 경우 React는 내부 변경점 인지 불가 상태

 

const newPerson = {...current}; 와 같이 새로운 Object에 변경될 값을 담아주는 선행과정이 필요

(Spread Sytax를 이용해 데이터를 전개하여 담아준다)

 

새로 만든 Object에 데이터 할당 후 접근, 데이터 변경 후 리턴 시 정상적으로 재렌더링 수행

박스 안의 내용물이 아닌, 박스 그 자체가 변경되었음을 React가 인지함을 알아볼 수 있다

 

 

6. State 재렌더링 - State를 전달받는 Component

State를 Component 내부에서만 사용하는 것이 아닌,

부모 → 자식으로 데이터 전달 후 실시간으로 렌더링을 수행하는 것 또한 가능하다

해당 함수에서 부모는 App(), 자식은 Greeting()이며, 전달받는 State는 username이 된다

(props인 username과 state인 username은 서로 다르다, state는 input의 value)

 

[App.js]

const [username, setUsername] = useState("");

username이란 이름을 가진 state 생성, setUsername(setState), useState(""); 사용할 state를 정의

 

<Greeting username={username} />

Greeting (Greeting.js) 함수 호출, username property에 {username} state를 할당

 

[Greeting.js]

const Greeting = ({ username }) => { }

App.js에서 <Greeting /> 호출 시 넘겨준 username property를 props로 전달받아 사용

 

return <h1>{username}님 안녕하세요.</h1>

username props에 할당된 {username} state를 통해 실시간으로 변경되는 데이터를 재렌더링 수행

 

 

[State 정리]

- State는 Component 내에서 유동적으로 변할 수 있는 데이터를 저장한다

- 개발자가 의도한 동작에 의해 변할 수도, 사용자의 입력에 따라 새로운 데이터로 변경될 수도 있다

- State 값이 변경되면 자동으로 컴포넌트가 재렌더링 된다

- State를 변경하기 위해서는 setState 함수를 사용한다

- Object, Array state를 변경할 때는 반드시 state를 복제한 후 변경해야 정상적으로 재렌더링 수행

  (박스 안의 내용물의 변화는 인지하지 못하기 때문에 박스 자체를 변경하는 작업 필요)