useState 공식문서 스터디(3)

객체 및 배열 state 업데이트

 

state에는 객체와 배열도 넣을 수 있다. 리액트에서 state는 읽기 전용으로 간주되기 때문에 기존 객체를 바꾸지 않고 교체를 해야한다. state에 form객체가 있는 경우에는 바꾸지마라.

 

대신 새로운 객체를 생성하여 전체 객채를 교체하면 된다.

 

 

초기 state 다시 생성하지 않기

리액트는 초기 state를 한번 저장하고 다음 렌더링부터는 이를 무시한다.

createInitialTodos()의 결과는 초기 렌더링에만 사용되지만, 여전히 모든 렌더링에서 이 함수를 호출한다. 이는 큰 배열을 생성하거나 복잡한 계산을 수행하는 경우 낭비가 될 수 있다.

 

이 문제를 해결하려면 useState에 초기화 함수로 전달하면 된다.

 

함수를 호출한 결과인 createInitialTodos()가 아니라 함수자체인 createInitialTodos를 전달하고 있다는 것이 중요하다. 함수를 useState에 전달하면 리액트는 초기화 중에만 함수를 호출한다.

 

초기화 함수를 전달하는 것과 초기 state를 직접 전달하는 것의 차이점

 

-초기화 함수 전달하기 예시

 

이 예시에서는 초기화 함수를 전달하므로, createInitialTodos 함수는 초기화 중에만 실행된다. 컴포넌트가 리렌더링 될 때 ( input에 타이핑 될 때 등)에는 실행되지 않는다.

 

-초기 state 직접 전달하기 예시

 

이 예시에서는 초기화 함수를 전달하지 않으므로, input을 입력할 때와 같이 모든 렌더링에서 createInitialTodos 함수가 실행된다.

눈에 띄는 차이는 없지만 이 코드는 효율성이 떨어진다.

 

key로 state 재설정하기

 

컴포넌트에 다른 key를 전달하여 컴포넌트의 state를 재설정할 수 있다. 이 예제에서는 Reset버튼이 version state 변수를 변경하고, 이를 Form에 key로 전달한다. key가 변경되면 리액트는 Form 컴포넌트(및 그 모든 자식)를 처음부터ㅓ 다시 생성하므로 state가 초기화된다.

 

이전 렌더링에서 얻은 정보 저장하기

 

보통은 이벤트 핸들러에서 state를 업데이트 하지만 드물게 렌더링에 대한 응답으로 state를 조장해야 하는 경우도 있다.

예를 들어, props가 변경될 때 state 변수를 변경하고 싶을 수 있다.

 

필요한 값을 현재 props나 다른 state에서 모두 계산할 수 있는 경우, 중복되는 state를 모두 제거해야한다. 

 

전체 컴포넌트 트리의 state를 재설정하려면 컴포넌트에 다른 key를 전달해라.

가능다면 이벤트 핸들러의 모든 관련 state를 업데이트 해라.

 

이 중 어느 것에도 해당하지 않는 희귀한 경우에는, 컴포넌트가 렌더링되는 동안 set함수를 호출하여 지금까지 렌더링된 값으로 state를 업데이트하는 데 사용할 수 있는 패턴이 있다.

 

CountLabel 컴포넌트는 전달된 count props를 표시한다.

 

카운터가 마지막 변경 이후 증가 혹은 감소했는지를 표시하고 싶다고 가정해 보았을 때, count prop은 이를 알려주지 않으므로 이전 값을 추적해야한다. 이를 추적하기 위해 prevCount와 count를 비교해서, 같지 않은 경우 prevCount와 trend를 모두 업데이트한다. 이제 현재 count props와 마지막 렌더링 이후 count가 어떻게 변경되었는지 표시할 수 있다.