react/redux
-
저번 게시글에 리덕스에 관하여 올렸습니다! 이론적으로만 보면 이해가 잘 안될것 같아 리덕스의 흐름에 대해 더 자세한 예시를 가져왔습니다. Redux Flow 초기 상태 - store에서 reducer를 호출하고 리턴 값을 초기로 상태로 저장한다. - UI가 최초 렌더링 될 때, UI 컴포넌트는 store의 state에 접근하여 렌더링에 활용한다. 그리고 그 state가 업데이트되는 것을 subscribe 한다. 흐름 순서 Deposit $10 버튼을 클릭 -> dispatch 함수를 실행시켜 action을 일으킴 -> store에선 이전 state와 현재의 action으로 reducer함수를 실행, 리턴된 값을 새로운 state로 저장한다. -> store에서 store를 subscribe하고 있던 UI..
[React] Redux 흐름저번 게시글에 리덕스에 관하여 올렸습니다! 이론적으로만 보면 이해가 잘 안될것 같아 리덕스의 흐름에 대해 더 자세한 예시를 가져왔습니다. Redux Flow 초기 상태 - store에서 reducer를 호출하고 리턴 값을 초기로 상태로 저장한다. - UI가 최초 렌더링 될 때, UI 컴포넌트는 store의 state에 접근하여 렌더링에 활용한다. 그리고 그 state가 업데이트되는 것을 subscribe 한다. 흐름 순서 Deposit $10 버튼을 클릭 -> dispatch 함수를 실행시켜 action을 일으킴 -> store에선 이전 state와 현재의 action으로 reducer함수를 실행, 리턴된 값을 새로운 state로 저장한다. -> store에서 store를 subscribe하고 있던 UI..
2023.01.30 -
리액트 공부를 하다 리덕스를 사용하게 되었는데 리덕스...? 리덕스 이론은 알겠는데 어떻게 적용해야할지 막막해져서 블로그 쓰면서 정리해보겠습니다! 🤔Redux(리덕스)란? 자바스크립트 상태관리 라이브러리로 ,자바스크립트 앱을 위한 예측가능한 상태 컨테이너입니다. 리덕스를 사용하면 컴포넌트들의 상태 관련 로직들을 다른 파일로 분리시켜 더욱 효율적으로 관리할 수 있습니다. 리덕스를 사용하는 이유 리덕스가 등장하기 전 MVC 패턴 방식으로 데이터 흐름을 관리하였습니다. 그림과 같이 State가 변화하게 되면 MVC에 이벤트가 발생하고 양방향의 데이터 흐름때문에 파악하기 힘든 구조로 되어있습니다. 위와 같이 양방향 데이터의 흐름이라는 문제점을 해결하기 위해 단방향 데이터 흐름이라는 라이브러리로 리덕스를 사용합니..
[React] Redux란?리액트 공부를 하다 리덕스를 사용하게 되었는데 리덕스...? 리덕스 이론은 알겠는데 어떻게 적용해야할지 막막해져서 블로그 쓰면서 정리해보겠습니다! 🤔Redux(리덕스)란? 자바스크립트 상태관리 라이브러리로 ,자바스크립트 앱을 위한 예측가능한 상태 컨테이너입니다. 리덕스를 사용하면 컴포넌트들의 상태 관련 로직들을 다른 파일로 분리시켜 더욱 효율적으로 관리할 수 있습니다. 리덕스를 사용하는 이유 리덕스가 등장하기 전 MVC 패턴 방식으로 데이터 흐름을 관리하였습니다. 그림과 같이 State가 변화하게 되면 MVC에 이벤트가 발생하고 양방향의 데이터 흐름때문에 파악하기 힘든 구조로 되어있습니다. 위와 같이 양방향 데이터의 흐름이라는 문제점을 해결하기 위해 단방향 데이터 흐름이라는 라이브러리로 리덕스를 사용합니..
2023.01.30