React State

React State란?

React에서 state는 "변경"을 다루는 요소

잠재적으로 Re-rendering을 유발시키는 데이터이다.

Re-Rendering

컴포넌트가 업데이트되어 View를 다시 그리는 것을 의미한다.

React에서는 state, props가 변경이되면 해당 컴포넌트와 하위 컴포넌트가 Re-Rendering이 일어난다.

함수형 컴포넌트는 Re-Rendering이 일어날 때 마다 그 안의 함수나 변수는 새로운 값으로 대체된다.

이는 불필요한 Re-Rendering을 유발하고 성능저하를 일으킨다.

React에서 Re-Rendering을 최적화하는 여러 기법을 제공한다.

• React.memo() → 컴포넌트의 props가 변경되지 않은 경우 리렌더링을 방지한다.

• React.useMemo() → 고비용 계산 로직을 캐싱 하여 이전에 계산된 결과를 재사용 하는식으로 성능을 향상시킨다.

• React.useCallback() → props로 넘기는 콜백 함수가 있다면 함수가 리렌더링 될 때마다 해당 함수는 새로운 값으로 대체되면서 props의 변화로 Re-Rendering을 유발하는 사이드 이펙트를 갖게 된다. 이를 방지하기 위해 사용하는 것이 useCallback

일관성과 효율성을 갖춘 state 만들기

DRY원칙을 따른는 SSOT의 개념을 활용하여 구현하자.

DRY(Don't Repeat Yourself)

중복을 최소화하고 코드를 재사용 가능하도록 만드는 원칙 (가독성, 유지보수성, 확장성 Up)

중복 코드를 모듈, 클래스, 함수 등으로 재사용이 가능한 단위로 추상화하여 구현하는것이 좋다.

추상화된 코드는 수정되면 해당 코드를 사용하는 곳 모두 적용 되므로 변경 시간과 작업부담을 크게 줄일 수 있다.

state에 DRY 원칙을 적용

• 동일한 state를 여러 곳에서 사용한다면 한 곳에서 상태를 정의하여 공유하는 식으로 일관성과 확장성을 증가시킴

• state를 업데이트하는 함수를 컴포넌트 내에 하나의 함수로 구현하고 여러 곳에서 재사용하는 식으로 관리

SSOT(Single Source of Truth)

유일한 진실의 근원

소프트웨어 개발에서 동일한 데이터를 여러 곳에서 관리하게 되면 일관성과 정합성을 지키기 어렵다. 이러한 문제를 해결하기 위해 나온 개념이 SSOT

SSOT는 데이터의 유일한 출처가 되는 원본 데이터 소스를 가리키며, 다른 모든 데이터는 이 원본 데이터를 기반으로 파생된다.

따라서 어떤 데이터가 수정되면 해당 데이터를 참조하는 모든 곳에서 일관성있는 결과를 보장하게 된다.

Flux Arhitecture

React에서 state를 관리하기 위한 아키텍처 중 하나, SSOT와 밀접한 관련이 있다.

React에서 공유되는 state를 관리할 때, 각각의 컴포넌트에서 관리하면 데이터의 일관성을 지키기 어렵고 유지보수성이 낮아진다.

따라서 공유되는 state를 한 곳(Store)에서 관리하고 마찬가지로 state 변경도 한 곳에서 관리함으로써, 여러 컴포넌트에서 직접적으로 해당 state 를 수정하지 않고 요청하는 식으로 관리하여 일관성을 유지할 수 있다.

React State의 조건

1. 변하지 않는 데이터는 state가 아니다.

2. 부모에게서 받은 props는 state가 아니다.

3. 다른 state나 props에 의해 계산되면 state가 아니다.

다른 state에 계산되는 데이터를 state로 두는 잘못된 코드 예시

interface Product {
  id: string;
  label: string;
  price: number;
}

export default Component({products}: {products: Product[]}) {
  const [totalPrice, setTotalPrice] = useState(0);
  
  useEffect(() => {
    const _totalPrice = products.reduce((acc, product) => acc + product.price, 0);
    setTotalPrice(_totalPrice);
  }, 
  [products])
  ...
}

Typescript를 잘 쓰면 직접 관리하는 state의 수를 줄일 수 있다.

관리하는 상태가 많아질수록 복잡해진다.

관련있는 상태끼리 묶어 interface 로 잘 정의 해두면 상태 하나로 관리해도 어색하지 않고 분명해진다.

가령 props를 넘길 때 덩어리 객체 하나를 넘겨도 해당 데이터 타입이 분명하므로 안전하고 깔끔하게 작성할 수 있다.

반면 타입을 사용하지 않는 자바스크립트는 동일하게 객체로 묶을 경우 그 상태를 전달하는 시점에 그 안에 정보가 무엇이 있는지 불분명하므로 상태를 잘게 쪼개 관리하는 편이 안전하다.

state는 누가 관리해야 할까? Lifting State Up

해당 state에 의존하는 컴포넌트들을 모두 포함하는 가장 가까운 부모 컴포넌트가 관리를 하고 자식들에게 props로 state를 전달한다.

이렇게 state를 부모 컴포넌트로 끌어올리는 작업을 Lifting State Up이라고 한다.

Inverse Data Flow

Lifting State Up으로 부모 컴포넌트에 state를 끌어올려 부모가 state를 관리하게 됐지만 자식 컴포넌트가 해당 state를 변경하는 트리거일 수 있다. 이 때 부모에서 상태를 변경하는 함수를 트리거 역할을 하는 자식에게 props로 넘겨 연결해줘야 한다.

자바스크립트는 함수도 값으로 다룰 수 있는 일급 객체이므로 다른 값처럼 props로 전달이 가능하다.

일급 객체(first-class object)란?

프로그래밍 언어에서 값으로 취급할 수 있는 개체를 의미한다.

일급 객체의 특징

• 함수의 인자로 넘길 수 있다.

• 함수의 반환값으로 사용될 수 있다.

• 변수나 데이터 구조(객체, 배열)안에 저장할 수 있다.

• 비교 연산을 수행할 수 있다. (===, !== 등)

자바스크립트는 일급 객체와 일급 객체가 아닌 것들이섞여 있다.

• 일급 객체인 것들 → 값으로 취급되는 모든 것 +함수✨

• 일급 객체가 아닌 것들 → 수식 연산자, 반복문, 조건문, try/catch문

대표적으로 함수가 일급 객체이다. 이를 일급 함수라고도 표현한다.

일급 객체가 아닌 것들을 일급 함수로 바꾸어 문제를 해결하는 방식은 함수형 프로그래밍에서 중요한 기술이다.

어떤 문법이든 일급함수로 만들 수 있다.

// '+' 연산자는 변수에 할당할 수 없지만 '+' 연산자와 같은 함수를 만들 수 있다.
const plus = (a, b) => a + b;