전역상태관리3 Flux와 MVC (단방향 데이터 흐름) (1) 리덕스는 기본적으로 "단방향 데이터 흐름"을 갖고 있다. (혹은 Flux 아키텍쳐를 채택한다고도 한다.) 이 흐름을 이해하기 위해서는 소프트웨어 개발이 어떤 구조에 기반하는지부터 시작해야 한다. 다음은 소프트웨어 개발에서부터 단방향 데이터 흐름 vs 양방향 데이터 흐름까지 본 글을 목차화한 것이다. 1. 소프트웨어 개발에서의 아키텍쳐(architecture) 2. 웹 소프트웨어 개발에서의 Model과 View 3. Flux 아키텍쳐 (단방향 데이터 흐름) 4. MVC 아키텍쳐 (양방향 데이터 흐름) 5. 단방향 데이터 흐름 vs 양방향 데이터 흐름 유의할 점은 본인이 상당히 컴퓨터 공학에 대한 지식이 부족하다는 점(🤣)과 함께 각 개념들이 대립되는 개념이라기보다는 상황에 맞게 선택되어야 하는 개념이라는.. 2023. 4. 10. 상태 관리 라이브러리 : Redux "상태관리 라이브러리의 핵심은! 여러 상태를 한 개의 창고에 넣어서 보관하고 사용하는 것!" 상태 관리 Toolkit Redux Redux는 Toolkit이라는 이름에서 알 수 있듯, 상태를 관리하기 위한 여러 컴포넌트 및 메서드가 포함된 라이브러리를 의미한다. 기본적으로 Redux는 트리 형식으로 props를 하위 컴포넌트로 전달하는 방식이며, state를 통해 상태를 업데이트하며 관리하기 때문에, 중간에 컴포넌트에서 변경된 state가 쓸데없이 다른 컴포넌트에 전달되며 불필요한 자원소모 및 렌더링을 필연적으로 유발한다.(props drilling) 이를 관리하기 위해 중간에 위치한 컴포넌트의 변경사항을 즉시 최상위 컴포넌트에 적용하기 위한 Toolkit인 Redux, Recoil 등이 필요해졌다. R.. 2023. 2. 24. React 상태 관리 " React는 Component를 기반으로 하는 상태관리 라이브러리다. " 사용자가 애플리케이션에서 상호작용을 하게되면, React는 상위 컴포넌트가 갖고 있는 상태를 props(속성)의 형태로 하위 컴포넌트에 전달하게 된다. 따라서 여러 컴포넌트가 상호작용하는 React에서는 변화하는 값이 어떤 컴포넌트에서 왔는지 알아야 핢에도 모든 컴포넌트가 부모자식 관계로 묶여있지 않은 이상, 현재의 props가 어디서부터 왔는지 파악하는 것은 프로젝트의 규모가 커짐에 따라 상당히 어려운 문제가 된다. props를 전달하는 규모에 따라서 상태를 크게 3가지로 나눌 수 있는데, 이는 아래와 같다. 1. Local State : props가 컴포넌트 간의 교환이 아닌 한 컴포넌트 안에서 교환이 일어나는 상태이다. 2.. 2023. 2. 23. 이전 1 다음
