본문 바로가기

부트캠프교육중/react80

Redux 간단히 정리 # action -> dispatch -> reducer -> store 순서로 데이터가 단방향으로 흐르게 된다. # Store - 정보가 저장되는곳 - state가 저장되어있는공간 # Action - state에 어떤 변화가 필요하면 action이 발생한다. 하나의 객체로 표현되고 액션객체는 type을 무조건 가지고있어야한다. payload는 옵션사항. -type은 action객체가 어떤 동작을 하는지 명시해주는 역할을 한다. 대문자와 Snake Case로 작성한다. 여기에 필요에 따라 payload를 작성해 구체적인 값을 전달한다. -보통 action을 직접 작성하기보다는 action객체를 생성하는 함수를 만들어 사용한다. 이 함수를 액션 생성자(Action Creator)라고 한다. # Dispat.. 2023. 2. 27.
Redux Hook Redux Hooks -React Redux에서 Redux를 사용할때 활용할수있는 Hooks 메서드를 제공한다. -dispatch함수를 반환. -action 객체를 reducer로 전달해주는 dispatch함수를 반환하는 메서드이다. import { useDispatch } from 'react-redux' const dispatch = useDispatch() dispatch( increase() ) console.log(counter) //2 dispatch( setNumber(5) ) console.log(counter) // 5 -컴포넌트와 state를 연결하여 redux의 state에 접근할수있게 해주는 메서드. -redux hooks 메서드는 'redux'가 아니라 'react-redux'에서.. 2023. 2. 24.
Redux 2 -상태가 관리되는 오직 하나뿐인 저장소의 역할 -redux앱의 state가 저장되어있는 공간. -createStore메서드를 활용해 Reducer를 연결해서 Store를 생성할수있다. import { createStore } from 'redux'; const store = createStore(rootReducer); -dispatch에게서 전달받은 action객체의 type값에 따라서 상태를 변경시키는 함수. -이때 reducer는 순수함수여야한다. 외부요인으로 인해 기대한 값이 아닌 엉뚱한 값으로 상태가 변경되는 일이 없어야 하기 때문이다. const count =1 //reducer를 생성할때에는 초기 상태를 인자로 요구합니다. const counterReducer = (state = count,.. 2023. 2. 24.
Redux 1 리액트에서는 상태와 속성(props)을 이용한 컴포넌트 단위 개발 아키텍처를 배웠다면 리덕스에서는 컴포넌트와 상태를 분리하는 패턴을 배웁니다. 리덕스는 리액트의 관련 라이브러리, 혹은 하위 라이브러리라는 대표적인 오해가 있는데 전혀 그렇지 않다 리덕스는 리액트 없이도 사용할수있는 상태 관리 라이브러리이다. 컴포넌트3, 컴포넌트6에서만 사용되는 상태가 있다고 합시다. 저런 상태 배치는 비효율적이다 1. 해당 상태를 직접 사용하지 않는 최상위 컴포넌트, 컴포넌트1, 컴포넌트2도 상태 데이터를 가짐 2. 상태 끌어올리기, Props 내려주기를 여러 번 거쳐야 함 3. 애플리케이션이 복잡해질수록 데이터 흐름도 복잡해짐 4. 컴포넌트 구조가 바뀐다면, 지금의 데이터 흐름을 완전히 바꿔야 할 수도 있음 이러한 문제.. 2023. 2. 24.

티스토리툴바