on
Redux (react 의 핵심인 상태관리 방법)
Redux (react 의 핵심인 상태관리 방법)
728x90
반응형
react 그러니까 대체 이건 왜쓰는걸까요?
안녕하세요 090.js 개발자 입니다~~
오늘은 react 의 상태관리가 무엇인지 알고 그중 가장유명한 redux를 알아보겠습니다.
사실 이건 코드와 그림과 함께 적어야 이해가 가장좋은데,, 귀찮아서...... 그냥 이게 뭔지 대충 보는 정도라면 글을 끝까지 읽는걸 추천합니다.
자 우선 react를 왜쓰냐? html,css,javascript 쓰면 되지 대체 왜쓰는거야? 라고한다면
저는 무조건 딱 한가지 이유입니다.
바로 상태 관리를 하기 위해 react 를 사용합니다.
상태 관리가 뭐에요??
먼저 리액트 동작방식을 보면 리액트는 virtual dom 이라는 가상트리라는 것을 이용합니다.
이미지 출처 - https://dev.to/iamusj/what-is-the-virtual-dom-2e0a
html 을 사용하신분이라면 잘알텐데 보통 웹사이트들은 트리구조를 통해 화면에 보이는것들을 모두 나타냅니다.
그런데 한번 화면에 나타내진것들은 특별한 조치가 없는이상 값이 바뀌지않아요.
예를들면 변수 x=5 를 화면에 나타내면 화면에 5가 나타납니다. 이때 x의 값을 7로 바꿔도 화면에는 그대로 이전값 5로
나타내어집니다.
이 이유는 당연히 화면에 렌더링 할때 값을 기준으로 나타낸후 그후 어떠한 이벤트도 없기에 바뀌지않는것인데요.
방금 리액트의 핵심이 상태관리라 했잖아요.
리액트를 쓰는 저어엉어엉엉말 핵심이유는 상태관리라고 저는 그렇게 깨달았는데
리액트에서 hook 이라는것을 이용하여 (대표적으로 useState) 변수 x=5 를 나타내고 x의 값이 변경된다면 화면에도 변경된 값이 "다시" 렌더링됩니다. 이러한 방식이 일어나는 이유는 리액트의 virtual dom 즉 가상트리가 진짜 트리와 바뀌었는지를 비교한후 바뀌었다면 상태가 바뀌었다고 인지하고 다시 렌더링 하는것인데 또하나 핵심이
일반적으로 html은 화면 전체를 다시 렌더링 하는 반면
리액트는 바뀐부분만 다시 렌더링 합니다.
뭐 물론 html 에서도 자바스크립트를 이용하여 일일히 상태가 바뀐것을 캐치하여 바꿀순있고 사실상 html + javascript 로 react와 똑같은 혹은 그이상의 효능을 내게 만들순있지만 어려워요.
그래서 간편하고 편하게 상태관리를해주는 react를 이용하는것이 좋다가 react를 사용하는 이유입니다.
자 그러면 react를 사용하는이유와 상태관리의 중요성을 알았는데요.
Redux라는놈을 알아봅시다.
(아쉽게도 이번에 실습이 없기에 redux의 정확한 동작방식은 소개하지않아요. 이번에는
개념만잡는다 생각해보자구요.)
먼저 일반적인 react의 상태 전파 방법입니다.
이러한 웹트리가 있다고 해봅시다.
이때 만약 4번 노드의 상태가 바뀌었다면 근데 만약에 1번에서도 4번 상태와 똑같은걸 공유한다면
4번에서 2번 2번에서 1번을 거쳐 올라가며 값이 전파되어 결과적으로 수행합니다.
지금은 겨우 하나의 상태라 감이안오지만 react에서 사용하는 상태수는 정말많을겁니다.
하나하나 전부 다 부모 자식 트리를 오가며 개발을하다보면 코드가 정말 복잡해지기에 힘들어져요.
redux를 사용해봅시다.
트리의 바깥공간에 redux라는 걸 두고 4번의 값이 바뀐다면
redux에 저장합니다.
1번에서는 redux값이 바뀌었기에 바뀐값을 4->2->1 이 아닌 redux에서 바로 가져옵니다.
(정확한 소개는 아닌데 대충 이렇게 이해하시면 될거에요.)
즉 상태관리를 하는곳이 트리 내부가아닌 전부 redux한곳에서 처리하면되기에 코드의 복잡성이 훨~~~씬 줄어드는것이죠.
redux는 리액트뿐만아니라 html,vue.js 등 다양한곳에서 쓰이기에 알면 좋은기술이라 생각해요.
물론 redux가 없다고해서 개발이 불가능한건 아닙니다.
저같은경우도 복잡한 코드구조 상관없이 그냥 redux없이 개발을 하던 중이었거든용 ㅎㅎ
반응형
from http://090k.tistory.com/174 by ccl(A) rewrite - 2021-10-30 23:26:47