안녕, 반가워 안녕, 반가워

Redux Thunk 란? 리덕스 창시자인 댄 아브라모프가 만든 가장 많이 사용되는 비동기 작업 미들웨어다. 이 미들웨어를 사용하면 액션 객체가 아닌 함수를 디스패치 할 수 있다 📌 미들웨어(middleware)란? 리덕스에서 미들웨어는 주로 비동기 작업을 처리 할 때 사용한다. 리듀서에서 발생한 예외를 서버로 전송하는 등의 목적으로 미들웨어를 활용할 수 있다. 미들웨어는 리듀서가 액션을 처리하기 전에 실행되는 함수로 액션과 리듀서 사이의 중간자라고 볼 수 있다. 리덕스 미들웨어 라이브러리 redux-thunk, redux-saga, redux-observable, redux-promise-middleware등을 서치하여 사용할 수 있고, 만들어서 사용할 수도 있다. 실제 프로젝트를 작업 할 때에는, 미..

시작하기 전에.. Hook이란 무엇인가? 번역해보면 "갈고리"라는 뜻을 가지고 있다. 아이스크림을 훅해서 퍼먹는 것처럼 무언가 가져오는 느낌이다. 우리가 React에서 useState라는 Hook을 사용하여 상태를 관리하였다. 마찬가지로 Redux의 상태를 가져와서 사용하려면 react-redux의 Hook을 사용하면 된다. Redux Hook 중 가장 많이 사용하는 useDispatch 와 useSelector 에 대해 알아보자. 📌 리액트 훅이란? 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 사용할 수 있게 하는 기능이다. 📌 훅킹(Hooking)이란? 이미 작성되어 있는 코드의 특정 지점을 가로채서 동작 방식에 변화를 주는 일체의 기술이다. react-redux 패키지 설치하기 먼저 react-..

Redux란? 리덕스는 자바스크립트를 위한 상태 관리 프레임워크이다. 🙋 React를 사용하면 Redux도 같이 사용하는데 그 이유는 뭘까? 결론을 먼저 말씀드리면 Redux로 상태를 관리하기 위해서이다. React는 부모 컴포넌트인 App컴포넌트에서 모든 것(state와 동작)을 관리하고 데이터를 아래로 내려주는 구조로 부모컴포넌트의 데이터를 props로 자식컴포넌트에게 전달해준다. 앱이 커지고 깊은 곳에 있는 자식 컴포넌트에 상태값을 전달할 때 데이터 흐름 파악이 어려워 지고 복잡성으로 관리하기가 어려워지는 문제가 발생한다. 그러나 Redux를 사용하면 state를 중앙에서 상태를 관리하여 상태 관리 코드를 분리하여 사용할 수 있기 때문이다. 공식문서를 읽다보면 Redux는 상태를 관리하기에 좋은 도..

리액트에서 가장 유명한 패턴인이자 가독성과 생산성을 고려한 방법인 프레젠테이션 컴포넌트와 컨테이너 컴포넌트에 대해 알아보려고 한다. 🔎 Presentational Components 와 Container Components 패턴으로 왜 나누는 걸까? 화면을 표현하는 부분(Presentational Components)와 데이터를 다루는 부분(Container Components)으로 나눠서 개발하는 패턴으로 재사용성과 유지보수의 장점이 있다. 📌 Presentational 컴포넌트 데이터 출력, 데이터 처리 능력은 없음, no logic DOM 마크업과 스타일 담당(UI) Redux와 관련 없음 부모 컴포넌트로부터 받은 Props인 데이터와 콜백(callback)을 사용 📌 Container 컴포넌트 데..

React란? React는 UI들을 독립적이고 재사용할 수 있는 부분으로 관심사를 분리하여 각각의 컴포넌트로 만들 때 도움을 주는 라이브러리입니다. 리액트는 재사용이 가능한 컴포넌트를 만들고, 이 컴포넌트들이 모여 웹사이트를 구성하게 됩니다. 이 컴포넌트들은 자바스크립트 함수(또는 객체)로 이루어져 있기 때문에 필요한 사전지식으로 javascript를 알고 있으면 좋습니다. 리액트는 함수형 프로그래밍을 적극적으로 활용한다는 특징을 기억 해두면 좋습니다. 📌 리액트 코드 작성할 때 꼭 기억해야 할 개념 render 함수는 순수 함수로 작성한다. state은 불변 변수로 관리한다. 공식문서 참조 https://ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이..