React 를 시작하기 전에 (2)

내가 이해한 React의 도입배경을 간략하게 이야기 했었는데,
아직까지 많은 부분에 대한 설명이 생략되어있다.
그래서 그 부분들에 대해 마저 정리하고 넘어가려한다.
이번엔 단방향 흐름에 대해서 이야기 하려고 한다.
주변 비슷한 경력대 분들이랑 하는 얘기에서는 React 가 아니라 Redux를 이야기 하면서 Flux패턴을 이야기하던데..
나는 애초에 React 자체에서부터 기존의 데이터 흐름에 한계를 느껴서 Flux 패턴을 사용하도록 만들어진 것 이라고 알고 있다.
그렇기에 이미 React도 Flux를 이해하고 있어야만 제대로 사용이 가능하다고 생각한다.

const arr = []; // UI에서 보게 될 변수

const appendArr = (a) => {
    arr.push(a); // arr에 요소를 추가하면서 값 변경
}

가장 쉽게 이해하는 방법은 배열이다.
하나의 배열이 있다고 가정해보자. 이 arr 이라는 배열은 appendArr() 라는 함수를 통해서 요소를 추가할 수 있다.
또한, 저 arr를 보여주고자 하는 위치에 바인딩시켜주면 바로 유저에게 보여줄 수도 있다.
view와 model간 양방향 데이터 흐름이 발생한다는 것이 이 느낌이다.
UI에서 직접 사용하고 있는 변수, 직접 해당 변수에 접근하여 관련 데이터의 업데이트가 이뤄지는 상황.
이게 한 두개면 상관없지만 실제 프로젝트가 이뤄지듯 무수히 많다고 가정하면 큰 문제가 생긴다.
데이터 흐름의 유추가 불확실해지는 순간이 오기 때문이다.
때문에 이런 문제를 생각하면서 개발을 해야하다보니 확장성이 상당히 안좋아질 것이며,
데이터를 명확히 핸들링 할 수 없다는건 프로그램 상으로 예상치 못한 문제가 발생할 수 있다는 의미가 되고,
이런 문제를 개선하고자 나온게 Flux 인 것이다.
그럼 이제 우리가 익숙하게 알고 있는 React의 코드로 바꿔보자.

const [arr, setArr] = useState([]); // UI에서 보게 될 상태값(변수)

const appendArr = (a) => {
    const sampleArr = arr;
    sampleArr.push(a); // arr를 바탕으로 요소 추가
    setArr(sampleArr); // 실제 arr를 변경시켜줄 수 있는 Action
}

이렇게 바뀐다.
코드가 한 두어줄 더 생겼지만 Action이라는 요소가 생기면서 데이터는 한방향으로 순환하게 된다.
이게 가장 간단한 모습으로 설명할 수 있는 Flux 패턴이다.
이 패턴을 사용하게 된다면, 데이터의 단방향 Flow를 보장할 수 있고,
개발자가 데이터의 Flow를 명확하게 유추할 수 있으니 확장성 역시 용이해진다.