728x90 리액트6 리덕스 미들웨어를 통한 비동기 작업 처리 리액트에서 API서버를 연동할 때는 API요청에 대한 상태를 잘 관리 해야 한다. 요청 시작 후 로딩 중, 요청 성공 또는 실패했을 때는 로딩이 끝났다는 것을 명시해야 한다. 이런 작업은 리덕스 미들웨어를 사용해서 효율적으로 처리할 수 있다. 리덕스 미들웨어는 액션을 디스패치 한 후 리듀서가 이를 처리하기 전에 지정된 작업을 실행한다. 이때 미들웨어 에서는 전달 받은 액션을 단순히 콘솔에 기록하거나, 전달 받은 액션 정보를 기반으로 액션을 취소하거나, 다른 종류의 액션을 디스패치 하는 등의 일을 할 수 있다. 사실 이미 수 많은 미들웨어가 존재 하기 때문에 미들웨어를 직접 만들 일은 거의 없다. 하지만 배우는 단계 이므로 간단한 미들웨어를 만들어 보자. 1 2 3 4 5 6 7 8 9 10 11 12 1.. 2021. 7. 29. React에서 Redux사용하기 리액트 애플리케이션에서 리덕스를 사용하면, 상태 업데이트에 대한 로직을 모듈로 따로 분리 해서 컴포넌트 파일과 별개로 관리할 수 있기 떄문에 코드 유지보수에 도움이 된다. 여러 컴포넌트에서 동일한 상태를 공유 할 때 유용하고, 실제 업데이트가 필요한 컴포넌트만 리렌더링 되게 쉽게 최적화 할 수 있다. 바닐라에서 리덕스를 사용할 거면, dispatch, subscribe를 사용해야 했지만, 리액트에서 리덕스를 사용할 때에는 react-redux라는 라이브러리에서 제공하는 유틸 함수(connect)와 컴포넌트(Provider)를 사용해 리덕스 관련 작업을 한다. 리액트에서 리덕스를 사용할 때에는 통상적으로 presentational component와 container component를 분리하여 사용한다... 2021. 7. 25. 컴포넌트의 합성(composition)과 상속(inheritance) 상속은 extends 키워드를 사용해 부모의 모든 속성과 메서드를 물려받는 방식이다. 상속은 부모와 자식간의 의존성이 강하게 결합되기 때문에 유연성이 부족하다. Facebook에서는 수천 개의 리액트 컴포넌트를 사용하지만 컴포넌트를 상속 계층 구조로 작성을 권장할 만한 사례가 등장하지 않았다. 합성 컴포넌트에서 다른 컴포넌트를 담기 하나의 컴포넌트에 어떤 자식 컴포넌트가 들어올지 알 수 없을때 children prop를 사용해 자식 엘리먼트를 출력에 그대로 전달해야 한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 //FacncyBorder내부의 것들이 props.children으로 전달 된다. function WelcomeDialog() { ret.. 2021. 7. 20. 리덕스 기초 리덕스는 리액트에서 가장 많이 사용하는 상태 관리 라이브러리이며 전역 상태를 관리할 때 효율적이다. 리덕스를 사용하면 다음과 같은 장점이 있다 1. 상태 업데이트 관련 로직을 다른 파일로 분리시켜 더 효율적인 관리가 가능하다 2. 컴포넌트끼리 상태를 공유해야 할때 여러 컴포넌트를 거치지 않아도 된다. 3. 미들웨어를 지원한다. 용어, 개념 정리 액션 상태에 어떤 변화가 필요하면 액션이 발생한다. 액션은 하나의 객체로 표현되며 액션의 이름 정도 되는 type필드를 반드시 가지고 있어야 한다. 1 2 3 4 5 6 7 { type: 'ADD_TODO', data: { id: 1, text: 'reduxs', } } cs 액션 생성 함수(action creator) 말 그대로 액션 객체를 만들어 준다. 필요할.. 2021. 7. 17. 이전 1 2 다음 728x90
