코딩/React42 Redux - 카운터 프로그램 만들기2 # 리덕스의 흐름 도식화 View 에서 액션이 일어난다. dispatch 에서 action이 일어나게 된다. action에 의한 reducer 함수가 실행되기 전에 middleware가 작동한다. middleware 에서 명령내린 일을 수행하고 난뒤, reducer 함수를 실행한다. (3, 4번은 아직 몰라도 됩니다!) reducer 의 실행결과 store에 새로운 값을 저장한다. store의 state에 subscribe 하고 있던 UI에 변경된 값을 준다. 1. counter.js 모듈의 state 수정 기능 만들기 (+ 1 기능 구현해보기) 1) 어떻게 counter.js 모듈에 있는 state의 값을 변경할 수 있을까? useState()를 사용해서 number에 +1을 할 때는 setNumber.. 2023. 4. 19. Redux 카운터 프로그램 만들기 # 첫 모듈 만들기 첫 모듈은 카운터 프로그램에 필요한 State들이 모여있는 모듈이 된다. 1. modules 폴더에 counter.js 파일을 생성한다. 2. 코드 작성 // src/modules/counter.js // 초기 상태값 const initialState = { number: 0, }; // 리듀서 const counter = (state = initialState, action) => { switch (action.type) { default: return state; } }; // 모듈파일에서는 리듀서를 export default 한다. export default counter; # 모듈의 구성요소 살펴보기 1. initialState === 초기 상태값 // 초기 상태값 const .. 2023. 4. 18. Redux - Redux 설정 # 리덕스 설치 리액트에서 리덕스를 사용하기 위해서는 2개의 패키지를 설치해야 한다. vscode 터미널에서 아래 명령어를 입력해서 2개의 패키지를 설치하면 된다. 참고로 react-redux 라는 패키지는 리덕스를 리액트에서 사용할 수 있도록 서로 연결시켜주는 패키지다. yarn add redux react-redux # 아래와 같은 의미 yarn add redux yarn add react-redux # 폴더 구조 생성하기 좌측의 이미지와 같이 폴더 구조를 생성 src 폴더 안에 redux 폴더를 생성 redux 폴더 안에 config, modules 폴더를 생성 config 폴더 안에 configStore.js파일을 생성 각각의 폴더와 파일은 다음과 같은 역할이 있다. redux : 리덕스와 관련된.. 2023. 4. 18. Redux - Redux 소개 # 리덕스가 필요한 이유 (1) useState의 불편함 어떤 컴포넌트에서 생성한 state를 다른 컴포넌트로 보고자 할 때 Props를 통해서 부모 컴포넌트에서 자식 컴포넌트로 그 값을 보내주었다. 근데 Props로 State를 공유하는 방법에는 불편한 점이 있다. 컴포넌트에서 컴포넌트로 State를 보내기위해서는 반드시 부-모 관계가 되어야 한다. 조부모 컴포넌트에서 손자 컴포넌트로 값을 보내고자 할때도 반드시 부모 컴포넌트를 거쳐야만 한다. 즉, 정작 부모컴포넌트에서는 그 값이 필요가 없어도 단순히 손자 컴포넌트에게 전달하기 위해 불필요하게 거쳐야만 하는 것을 의미한다. (조부모 → 부모 → 손자) 자식 컴포넌트에서 부모 컴포넌트로 값을 보낼 수 없다. 리덕스를 사용하면 State를 공유하고자 할때.. 2023. 4. 18. 이전 1 ··· 3 4 5 6 7 8 9 ··· 11 다음
