02. 지역 상태와 전역 상태 사용하기
1. 기술 요구사항
2. 언제 지역 상태를 사용할까?
상태는 인수 외부의 값을 말하며 상태에 의존하는 함수는 순수하지 않게 된다. 리액트 컴포넌트도 마찬가지로 자바스크립트 함수이기 때문에 순수할 수 있지만 컴포넌트 내에서 상태를 사용할 경우 순수하지 않게 된다. 그러나 상태가 컴포넌트 내에서만 사용된다면 다른 컴포넌트에 영향을 미치지 않는다. 이런 특성을 가리켜 억제됨(contained)이라고 표현한다.
2-1. 함수와 인수
const addOne = n => n + 1;
let base = 1;
const addBase = n => n + base;
특정 시점에서 base 를 2로 변경하면 addOne 함수와 다르게 작동한다. 이런 식의 사용법은 무조건 나쁜 것은 아니며 외부에서 함수 작동 방식을 변경할 수 있으므로 강력한 기능이라고 볼 수 있다. 단점은 addBase 함수가 외부 변수에 의존한다는 사실을 모르고 다른 곳에 사용될 수 있다는 점이다. 필요에 따라 선택할 수 있는 트레이드오프라고 할 수 있다.
base 가 싱글턴인 경우 코드 재사용성이 떨어지기 때문에 선호하는 패턴은 아니다. 싱글턴을 사용하는 대신 재사용성을 높이기 위해 다음과 같이 컨테이너 객체를 만드는 것이 더 모듈화된 접근 방식이다.
const createContainer = () => {
let base = 1;
const addBase = n => n + base;
const changeBase = b => {
base = b;
};
return { addBase, changeBase };
};
이제 싱글턴이 아니며 필요한 만큼 컨테이너를 만들 수 있다. base 전역 변수를 싱글턴으로 사용하는 것과는 다르게 컨테이너는 격리돼 있으므로 재사용하기가 더 쉽다. 각 컨테이너를 다른 컨테이너에 영향을 주지 않고 사용할 수 있다.
2-2. 리액트 컴포넌트와 props
리액트는 개념적으로 상태를 사용자 인터페이스(UI)로 변환하는 함수다.
JSX 는 리액트 요소를 생성하기 위한 꺾쇠 괄호가 있는 구문이다. 리액트 요소가 JSX 구문에 들어 있는 경우 리액트 요소를 JSX 요소로 참조할 수 있다.
2-3. 지역 상태에 대한 useState 이해하기
const AddBase({ number }: { number: number }) => {
const [base, changeBase] = useState<number>(1);
return <div>{number + base}</div>;
}
AddBase 함수는 멱등성을 지닌다.
2-4. 지역 상태의 한계
전역 상태는 컴포넌트 외부에서 리액트 컴포넌트의 동작을 제어할 때 유용하게 사용할 수 있지만 컴포넌트의 동작을 예측하기 어렵다는 장단점이 있다. 지역 상태를 기본으로 사용하고 전역 상태는 보조 수단으로 사용하는 것이 좋다.