Redux 용어 및 개념

state 관리

React Counter Component

단방향 데이터 흐름의 예

function Counter() {
  // State: a counter value
  const [counter, setCounter] = useState(0)

  // Action: code that causes an update to the state when something happens
  const increment = () => {
    setCounter(prevCounter => prevCounter + 1)
  }

  // View: the UI definition
  return (
    <div>
      Value: {counter} <button onClick={increment}>Increment</button>
    </div>
  )
}

• state(앱 구동하는 진실의 원천), view(현재 상태를 기준으로 한 UI의 선언적 설명), actions(사용자 입력을 기준으로 앱에서 발생하는 작업, 이벤트 및 상태에서의 업데이트 트리거)

• 기존에는 단방향 데이터 흐름을 통해 데이터가 전달됐다.

• 하지만 요소들이 애플리케이션의 다른 부분에 위치하는 경우, 동일한 상태를 공유하고 사용해야 하는 여러 구성 요소들이 있을 때 단순성이 무너질 수 있다.

• 이를 해결하는 한 가지 방법은 구성 요소에서 공유 상태를 추출하여 구성 요소 트리 외부의 중앙 집중화된 위치에 놓는 것이다.

• state 관리에 관련된 개념을 정의하고 분리함으로써, view와 state 사이의 독립성을 유지하는 규칙을 시행함으로써, 코드에 더 많은 구조와 유지보수를 부여한다.

• 이것이 Redux의 기본 개념이다. 응용 프로그램에 글로벌 상태를 포함할 수 있는 중앙 집중화된 단일 장소와 코드를 예측할 수 있도록 해당 상태를 업데이트할 때 따라야 할 구체적인 패턴이다.