이번 시간엔 flux라는 개념을 배워보자.
flux는 flow에서 유래된 말로 자기 스스로는 반응하지 않으며 다른 물질의 반응을 촉진 시켜 주는 촉매와 같은 역할을 한다. 프로그램에선 flux를 다양하게 사용 할 수 있다.
즉 flux는 어떤 흐름이고 이 흐름 속에서 다른 요청에 의해 반응 할 수 있음.
기본적으로 유저 이름이랑 사진이 있고 게시글 내용들이 있다, 그리고 연관 된 데이터들이 밑에 더 있다고 가정하자.
RestContoller 기준으로 보면 자바스크립트에서 보면 유저 데이터와 게시글 데이터가 필요하다. 여기서 MVC패턴으로 보면 user데이터는 user컨트롤러에 있고 게시글 데이터는 Board컨트롤에 있을 것이다.
그럼 각각 fetch를 통해 user의 데이터를 부르고 board의 데이터를 부르는데 둘이 url이 다를 것이다. 예를들면 user는 /user라던지 board는 /board라던지. 이렇게 데이터들을 다운 받았다 가정하자.
두번째는 유저 이름을 kim을 lee로 바꾼다고 가정하자. 그럼 이제 fetch로 post를 통해 /user/1/lee 이런식으로 url을 통해 바꾸고 이름을 kim에서 lee로 바꾼다. 그럼 여기서 저 게시글에 있는 kim도 전부 lee로 바꿔야한다. 그럼 기존 방식은 위에 user부분을 바꿔야하고 게시글부분도 전부 lee로 바꿔야한다. 그렇게 되면 작업이 굉장히 복잡해 질 수도 있고 너무 많으면 어떤 부분은 작업 하는 것을 잊어버릴 수도 있다.
여기서 기존 MVC패턴 말고 MVVM패턴이라는것도 있다. 이건 뷰모델을 하나 만들어놓고, 내가 요청할 때 한 페이지를 따로따로 쪼개서 요청하는 것이 아니라 (/user,/board 이런식으로) 뭐.. /feed이런식으로 저 둘을 합쳐 한방에 받는 방식이다.(안드로이드에서 많이 쓴다고 한다.)
이걸 flux로 하면 내가 어딘가에서 요청을해서 kim을 lee로 바꾸면
이런식으로 이 변경한 것을 바라보게 해놓으면 (이런 연결된 선으로) 지속적으로 응답을 해주게 할 수 있다.
이렇게 변경된 데이터를 구독하고 있으면,한번의 요청에의해 그 데이터를 바라보고 있는 애들이 다 바뀌게 되는것.
화면에서 보면 이런식으로 flux가 되는것이다.
리액트에선 redux라는 것을 사용하여 flux를 할 수 있다.
이건 사용자가 요청을 하면 -> DisPatcher가 받는다 -> 그리고 디스패쳐는 이 요청을 분류하여 어느 스토어로 갈지 결정을 한다.
이런 flow가 있고 실제로 어떤 데이터의 상태를 1번에서 들고 있고 이 상태를 리액트는 데이터를 위에서부터 내려가는식으로 flow를 들고 있어서 데이터 전달을 2번으로 밖에 못한다.
그리고 오른쪽에 버튼을 누르는 순간 lee로 바꾸고 싶은데 이건 1번에서 저 버튼쪽으로 상태를 전달하는게 불가능하기에 할 수 없다. 그래서 상태 보관을 1번에서 하는게 아니라 store라는걸 따로 만들어서 username을 저기에서 관리를 할 것이다. 그 다음 이 데이터를 구독하여 바라보게 할 것이다.
이런식으로 store에 있는 kim이 lee로 바뀌면 구독하고 있는 데이터들이 반응하여 데이터가 변경이 되는것.
이번 게시글은 여기까지.
이 글은 유튜브 메타코딩 채널의 영상을 보며 공부한 내용을 기록한 게시글입니다.
