# redux

sangha__ju

컴포넌트 분할 외부 상태에 의존적인, 의존적이지 않은 컴포넌트를 분리한다. 외부 상태는 컴포넌트의 상태와 관련 된 비즈니스 로직을 말한다. 위의 컴포넌트는 props 만 받아 사용하는 비즈니스 로직이 없는 컴포넌트다. 상태가 존재하지 않는 컴포넌트의 경우 compo

ash3767

srccomponentsLogin \- Login.js \- Login.styled.jscontainersUserContainer.jsmodulesindex.jsusers.jspagesLoginPage.jsLoginPage.styled.jsutilsstyles \

gytlr01

mern stack을 이용해 간단한 쇼핑몰을 제작해보면서 웹 제작의 전체적인 흐름을 이해하게 되었다. 원래는 frontend를 목표로 공부를 했지만 기능적인 부분을 만드는 것이 더 재미있고 UI요소를 개발하기 위해 많은 시간과 코드를 할애하는 것이 답답하게 느껴지는 것

ehgks0000

컴포넌트 state 관리component A B C 의 state가 각자 있고A 할아버지 B 아버지 C 아들A가 C의 state를 변경 또는C가 A의 state를 변경하기 쉽게 하기 위해 리덕스사용react-redux의 함수로useSelector는 리더스 스토어의 상태

ehgks0000

일반 함수는 하나의 값만을 반환한다.하지만 제너레이터(generator)를 사용하면 여러 개의 값을 필요에 따라 반환 할 수 있다.next()는 제너레이터의 주요 메서드이다.호출하면 가장 가까운 yield 문을 만날 때까지 실행이 지속된다.제너레이터와 이터러블제너레이터

skyosk123

Redux > 🚨필자는 이전 프로젝트에서 props 지옥을 맛 보았다. 해당 방법으로 무려 3단계를 내려갔다...💦 Redux가 하는 일 멀리 떨어진 컴포넌트끼리 상태값을 교환할 때 복잡해지는 데이터 흐름이 전역 스토어의 개입을 통해 간결하게 만든다. 즉, 컴포

lwoody

개발 참고 자료

sangha__ju

지난 번 작성 한 Redux 코드를 인용하여 다음과 같이 store / reducer를 생성한다.상태의 변경 사항을 알기 위해 subcribe 메서드를 이용하여 변경 사항을 확인한다.subcribe 메서드의 인자인 콜백 함수는 store 의 상태를 반환하는 getSta

yujuck

index.jsredux.jsaction : 상태 변화가필요할 때 객체의 형태로 발생시킴. type 필드는 필수적으로 가지고 있어야하고 추가적으로 다른 필드도 가질 수 있다.action 생성함수: 액션을 만드는 함수. 액션 객체를 만들 때 필요한 데이터를 인자로 받아

yaeji120

5일차 정리

yujuck

우아한 테크러닝 강의 1회차 (2020.09.01) typescript 타입명시 타입 알리어스 타입명을 개발자가 원하는 이름으로 설정할 수 있음. 컴파일 타임에만 작동하는 것과 런타임에 작동하는 것이 따로 있음. 객체 타입도 만들 수 있음 타입 알리아스와 인

cyheum

코드를 짜다보면 컴포넌트안의 컴포넌트안의 컴포넌트 안의... 이렇게 굉장히 깊숙한 관계까지 state나 함수를 전달해야 하는 경우가 있습니다.그럴때 눈물을 머금고 계속해서 전달해 주어야 하죠...또한 컴포넌트가 언마운트가 되고 다시 마운트 되면 초기값으로 돌아가기까지합

sangha__ju

redux-saga 를 사용하여 api 요청을 해 보자.우선 api 를 받아올 공간을 생성하자 src 에 lib 폴더를 생성하고 api.js 를 만든다.modules 디렉터리에 sample.js 생성한다.여기서 GET_POST 액션의 경우에는 api 요청을 할 때 어떤

sangha__ju

redux-saga 는 비동기 작업 관련 미들웨어이다.redux-thunk 같은 미들웨어도 있지만 redux-saga 를 쓰는 이유는 까다로운 상황에 좀 더 유용하기 때문이다.예를 들어 다음과 같은 상황에서는 redux-saga 를 쓰는 것이 더 유리하다.기존 요청을

sangha__ju

리듀서에서 상태를 업데이트 해야 될 때는 불변성을 지켜야 하기 때문에 앞에서는 spread 연산자(...)와 배열의 내장 함수를 활용했다. 그러나 모듈의 상태가 복잡 해 질수록 불변성을 지키기가 까다로워진다.따라서 모듈의 상태를 설계 할 때는 객체의 깊이가 너무 깊어지

sangha__ju

리덕스를 좀 더 편하게 사용하는 법에 대해 알아보자.redux-actions 를 사용하면 액션 생성 함수를 더 짧은 코드로 작성 할 수 있다.그리고 리듀서를 작성 할 때도 swich/case 문이 아닌 handleActions 라는 함수를 사용하여각 액션마다 업데이트

thms200

현재 우아한 테크 러닝 3기를 듣고 있다....!9월 한달 간 총 8번 진행되는 온라인 교육이다.(원래 오프라인이었는데 코로나의 영향으로 온라인 수업으로 바뀌었다고 한다.)(오프라인이었다면 총원이 30명이었다고.. 온라인으로 전환되서 신청된게 아닐까 싶다..ㅎㅎ)이번주

choidy180

React without Redux리덕스는 리액트에 종속되는 라이브러리는 아닙니다. 만든 목적은 리액트에서의 사용이지만 다른 UI 라이브러리/프레임워크와 함께 사용할 수있고 Vue에서는 리덕스와 유사한 vuex를 주로 사용합니다. 리덕스는 바닐라 자바스크립트와 함께 사

maintainker

1.

altmshfkgudtjr

웹페이지를 구현할 때, Modal이라는 개념은 정말 많이 쓰인다. 하지만 단방향으로만 데이터를 바인딩해주는 React 특성상 Modal 만들 때에는 구조적이나 z-index과 같은 뷰쪽에서 깔끔하지않는 문제가 발생한다..🤔 그래서, 혹시 Redux를 이용하여 Mod