리액트

리덕스 개념 모식도

이전 포스팅에서 리액트에서 리덕스를 세팅했던 방식은, 하나의 리듀서를 만들고, 하나의 리듀서에서 action값에따라 모든 state를 관리했었다.Store의 state값이 다양해지게 되고, 컴포넌트가 많아질수록, 이를 구분할 필요가 있다. 아주 간단한 예를들면.. A컴

비동기 코드는 리덕스 함수에서 바로 처리하면 안되고, redux-thunk를 통해 action creator 함수에서 처리해주어야한다. 까먹지 않게 구현부분만 기록해 놓자.App.js다룰 부분은, cart store가 변했을때, App이 리렌더링 되면서, dispatc

로그인/회원가입 모듈을 개발하다가 문득 위와같은 문제에 부딪혔다.로그인/회원가입 실패시 모달을 띄워주고, 성공시 페이지 리다이렉트를 하는 모듈을 만들어야한다.예를들어 로그인페이지(/login)에서, 로그인실패시에는 모달을 띄워주고, 성공시 홈('/')으로 간다고 가정해

Nextjs 에 대해 공부할수록, 개발진이 대단하다는 것을 느낌과 동시에 너무나 큰 벽이 느껴진다..이번에는 getStaticProps() 함수에 대해서 알아보자.data를 fetch해서 화면에 뿌려주는 경우를 생각해보자.보통 위와같이 useState를 사용하여 use

API에 사용되는 KEY 값 혹은 계정정보는 항상 숨김처리가 되어야한다.주로 노드나 자바스크립트를 사용하면 dotenv 를 사용하는데 nextjs를 사용하면,따로 import 할 필요없이 env파일에 접근할 수 있다.env파일은 상황에따라 세가지로 두고 사용한다. .e

검색을 해보면 이미 사용 예시와 설명이 자세히 나와있다.이벤트를 제어(제한)하는 방법으로,과도한 이벤트 횟수의 실행으로 이벤트 핸들러가 무거운 계산 및 기타 DOM 조작과 같은 작업을 수없이 많이 수행하는 경우 성능 문제가 발생하고 이는 사용자 경험자 경험을 망가뜨릴

스로틀을 사용하였다. useCallback 을이용해서 스로틀함수를 생성하였으며, dependecy를 추가해서,dependency에따라 스로틀함수를 재생성했고,클린업 함수를 통해 과거시점의 스크롤 이벤트는 remove해주고 , 현재시점의 스크롤이벤트를 등록해주었다. 그렇

모달이 Fade In, Fade Out 되는 것을 구현하고자 합니다.기본코드세팅은 아래와 같습니다.App.jsModal.jsBackdrop.jsModal.css.Backdrop.cssApp 컴포넌트에서 버튼을클릭하면, showModal 상태가 바뀌면서, 모달과 백드롭을

직접 API 구현해서 사용하고 싶으신 분들은 Node.js로 빠르게 서버 열고 테스트 해보시면 좋을 것 같습니다!노드는 노드서버로, 리액트는 CRA를 통해서 리액트 서버로 따로 돌리는 방법입니다.(노드 서버로 리액트를 돌리고 싶다면 다음 포스팅에 따로 작성하겠습니다.)

기존에 만든 포트폴리오를 보니, 불필요하게 Redux를 쓰고있지 않았나 생각이 들었습니다. Fetch 데이터들을 전역으로 관리하고 싶어서 Redux를 사용하긴했지만, 그러다보면 Redux가 어느새 data Fetch 셔틀로 변하는 것 같다는 생각이 들었죠. 언제나 효율