Redux의 두 가지 기본 아이디어

Redux 라이브러리를 학습하기 전에, 먼저 그 두 가지 기본 아이디어에 대해 알아보겠습니다. 상태 관리와 관련된 첫 번째 아이디어는 React의 일반적인 상태 기반 카운터 예시를 통해 살펴보겠습니다:

function Counter() {
	// State
	const [count, setCount] = useState(0)

	// Action:
	function clickHandler() {
		setCount(count + 1)
	}

	// View:
	return (
		<div>
			<span>{count}</span>
			<button onClick={clickHandler}>+</button>
		</div>
	)
}

이 코드에서 변수 count를 위한 상태를 볼 수 있습니다. 이는 카운터의 진실의 원천(Source of Truth)입니다. 그 다음으로 액션 (action)이 있습니다. 사용자 클릭 시 발생하는 이벤트로, 상태를 업데이트합니다. 마지막으로 뷰 (view)가 있으며, 이를 통해 사용자 인터페이스를 표시합니다.

따라서 구성은 상당히 단순합니다: 버튼이 클릭되면 -> count 상태(State)가 클릭 액션(Action)에 의해 변경되고, 결과적으로 뷰(View)가 변경됩니다. 이 경우 화면의 숫자가 변경되겠죠.

그러나 동일한 상태를 사용해야 하는 컴포넌트가 여러 개인 경우 모든 것이 더 복잡해집니다. 물론, 예를 들어 상태 끌어올리기를 통해 상위 컴포넌트로 상태를 올릴 수 있지만, 이런 해결책이 항상 문제를 해결해주지는 않습니다. 이 경우 Redux는 우리에게 애플리케이션의 단일 장소에 전역 상태를 보관하고, 해당 상태를 업데이트할 때 특정 패턴을 따르도록 제안합니다. 이것이 바로 첫 번째 기본 아이디어입니다(!).

두 번째 아이디어는 불변성, 즉 데이터의 변경 불가능성과 관련이 있습니다. JavaScript에서 배열과 객체는 변경할 수 있다는 것을 물론 기억하실 것입니다. Redux에서는 다른 프레임워크와 마찬가지로 데이터를 직접 변경하는 것은 좋지 않은 방식으로 간주되며 예측할 수 없는 결과를 초래할 수 있습니다. 따라서 Redux에서 우리의 원본 객체와 배열은 불변성을 유지해야 하며, 변경은 오직 그들의 복사본에 대해서만 할 수 있습니다.

Redux의 첫 번째 기본 아이디어가 무엇인지 설명해보세요.

Redux의 두 번째 기본 아이디어가 무엇인지 설명해보세요.