지금부터는 Redux와 React를 함께 사용하는 방법을 알아보기 전에, Redux와 일반적인 UI를 연동하는 방법에 대해서 알아보도록 하겠습니다.

1. Redux Store 생성
2. Store가 UI 업데이트(재렌더링)를 구독(subscription) 목록에 추가
3. UI 업데이트 과정
   1. 현재 Redux Store의 데이터(state)를 가져옴
   2. 가져온 데이터 중 UI에서 필요로 하는 데이터만 추출
   3. 추출한 데이터를 사용해서 UI 업데이트
4. 필요한 경우 초기 UI 렌더링
5. UI 입력이 발생한 경우 Action을 Dispatch해서 UI 업데이트

여기 나와있는 내용은 Redux와 UI를 연동하는 과정을 순서대로 설명한 것입니다.
순서대로 하나씩 살펴볼까요?

먼저 첫 번째로는 Redux를 사용해서 데이터를 관리하기 위해서 Redux Store를 생성해야 합니다.
Single source of truth를 생성하는 것이죠.

다음으로는 Redux Store가 UI의 업데이트. 즉, 재렌더링을 시킬 수 있도록 Store의 구독 목록에 추가해야 합니다.
이렇게 되어야 Store에 데이터가 변경될 때마다 화면을 다시 렌더링하여 변경된 데이터를 사용자에게 보여줄 수 있겠죠.

세 번째는 UI 업데이트 과정을 자세하게 설명한 것인데, 현재 Redux Store의 데이터를 가져와서 그 중에 UI에서 필요로 하는 데이터만을 추출합니다.
그리고는 추출한 데이터를 사용해서 UI를 업데이트 하게 됩니다.
이러한 일련의 과정이 한 번의 UI 렌더링 과정이라고 보시면 됩니다.

다음 네 번째 단계는 초기 UI를 렌더링 하는 과정입니다.
처음에는 Redux Store에 아무런 변화가 없기 때문에 렌더링이 일어나지 않게 되는데, 그럼 결국 화면에 아무런 데이터도 나오지 않게 됩니다.
그렇기 때문에 초기 UI를 렌더링 해주는 과정이 필요한 것입니다.

그리고 마지막 다섯 번째 단계는 사용자가 UI에 어떤 입력을 한 경우에, 해당 입력에 대해 Action을 Dispatch해서 Store를 업데이트하고 UI까지 업데이트 되도록 하는 과정입니다.

지금까지 살펴본 이 과정이 Redux와 일반적인 UI를 연동하는 과정이라고 보면 됩니다.
이 과정을 실제 코드로 한 번 살펴보도록 하겠습니다.

// 1) createStore 함수를 사용해서 새로운 Redux store 생성
const store = Redux.createStore(counterReducer);

// 2) Store가 UI 업데이트(재렌더링)를 구독(subscription) 목록에 추가
store.subscribe(render);

// 3) UI 업데이트 과정:
function render() {
    // 3.1) 현재 Redux Store의 데이터(state)를 가져옴
    const state = store.getState();
    // 3.2) 가져온 데이터 중 UI에서 필요로 하는 데이터만 추출
    const newValue = state.value.toString();
    // 3.3) 추출한 데이터를 사용해서 UI 업데이트
    const myTextElement = document.getElementById('myText');
    myTextElement.innerHTML = newValue;
}

// 4) 초기 UI 렌더링
render();

// 5) UI 입력이 발생한 경우 action을 dispatch해서 UI 업데이트
document.getElementById('increment').addEventListener('click', function () {
    store.dispatch({ type: 'my-app/counter/INCREASE' });
});

이 코드는 Redux와 UI를 연동하는 예시 코드입니다.
앞에서 살펴본 과정을 실제 코드를 하나씩 보면서 다시 한 번 보도록 하겠습니다.

먼저 첫 번째로 createStore() 함수를 사용해서 새로운 Redux Store를 생성합니다.

그리고 다음으로 생성한 store가 UI 업데이트. 즉, 렌더링 함수를 구독 목록에 추가하도록 합니다.
바꿔말하면, render() 함수가 store의 변경사항을 구독하는 것이죠.
이렇게 해야 Store의 데이터가 변경될 때마다 UI를 업데이트 하게 됩니다.

세 번째는 UI 업데이트 과정인데, 먼저 현재 Redux Store의 데이터를 가져오고 그 중 UI에서 필요로 하는 데이터만을 추출합니다.
이후 추출한 데이터를 사용해서 UI를 업데이트 하게 됩니다.
이러한 일련의 과정이 한 번의 렌더링 과정입니다.

네 번째 단계는 초기 UI를 렌더링 하는 과정입니다.
처음에는 Redux Store에 아무런 변화가 없기 때문에 렌더링이 일어나지 않습니다.
그래서 이렇게 초기 UI를 렌더링 해주는 과정을 넣었습니다.

그리고 마지막 다섯 번째 단계는 UI에 어떤 입력이 발생한 경우에, 해당 입력에 대해 Action을 Dispatch해서 Store를 업데이트 하고 store의 구독 목록에 추가된 render() 함수가 실행되도록 하여 UI까지 업데이트 되도록 하는 과정입니다.

이러한 일련의 과정이 Redux와 일반적인 UI를 연동하는 과정이라고 보면 됩니다.

우리는 이미 앞에 나온 강의들에서 실습을 하면서 만든 Counter 애플리케이션과 TODO 애플리케이션에서 비슷한 형태의 코드를 많이 사용해보았습니다.
이러한 애플리케이션에서도 화면에 보이는 글자나 버튼 등이 존재했었죠.
이러한 것들이 모두 UI에 속하는 것들입니다.
그리고 이전 실습에서는 이러한 UI를 HTML tag만을 사용해서 만들었습니다.

여기서 한 가지 중요한 점은 Redux는 UI의 종류와 상관없이 동일한 방식으로 작동한다는 것입니다.
즉, Redux가 특정 UI나 프레임워크에 종속되지 않는다는 것이죠.
실제 UI 환경이나 프레임워크에 따라서 구현방식이 조금씩 달라질 수는 있지만, 앞에서 설명한 Redux와 UI를 연동하는 각 단계들은 모두 동일하게 적용됩니다.

그리고 참고로 Redux와 React를 연동하는 과정에 대해서는 뒤에서 다시 배울 예정입니다.