Redux(리덕스)란 JavaScript(자바스트립트) 상태관리 라이브러리이다.상태를 예측 가능하게 만든다. (순수함수를 사용하기 때문)유지보수 (복잡한 상태 관리와 비교)디버깅에 유리 (action과 state log 기록 시) → redux dev tool (크롬

리액트 18버전 이상부터는 automatic batch 라는 기능이 생겼습니다.setTimeout 변경함수들이 연달아서 여러개 처리되어야한다면 state 변경함수를 다 처리하고 마지막에 한 번만 재렌더링됩니다. 그래서 'end' 로 변경하는거랑 ' ' 이걸로 변경하는거

운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용Promise(ES6) API 사용요청과 응답 데이터의 변형HTTP 요청 취소HTTP 요청과 응답을 JSON 형태로 자동 변경간단하게 사용할때는 fetch를 쓰고, 이

Router Dom이란 URL의 링크에 따라 Component를 생성해주는 겁니다.React는 SPA(single page application)입니다.물론 하나의 URL 링크로 사용자에게 페이지를 보여줄 수 있습니다.하지만 사용자가 특정 페이지로 이동하고 싶지만, 그

React.js 에서 image의 경로를 잡을 때 경로를 못잡아주는 경우가 있습니다. 이에 대비해 프로젝트의 root 경로에서 이미지의 경로를 잡아주는 방식을 소개하도록 하겠습니다.

Switch를 사용합니다.exact로 복수의 라우팅을 막습니다.component={} 내에 arrow function을 사용하여 component를 전달합니다.exact 는 더이상 사용하지 않고 여러 라우팅을 매칭하고 싶은 경우 URL 뒤에 \* 을 사용합니다.comp

이번에는 CSS Module 이라는 기술에 대해서 알아봅시다. 리액트 프로젝트에서 컴포넌트를 스타일링 할 때 CSS Module 이라는 기술을 사용하면, CSS 클래스가 중첩되는 것을 완벽히 방지할 수 있습니다.CRA 로 만든 프로젝트에서 CSS Module 를 사용

두 개의 자바스크립트 함수에서 같은 로직을 공유하고자 할 때는 또 다른 함수로 분리합니다. 컴포넌트와 Hook 또한 함수이기 때문에 같은 방법을 사용할 수 있습니다!사용자 정의 Hook은 이름이 use로 시작하는 자바스크립트 함수입니다. 사용자 Hook은 다른 Hook

컴포넌트의 state(상태)를 관리 할 수 있다.상태에 따라, 다른 화면 출력React에서 사용자의 반응에 따라, 화면을 바꿔주기(렌더링) 위해 사용되는 트리거역할을 하는 변수React가 state를 감시하고, 바뀐 정보에 따른 화면을 표시해준다.( state와 set

VSCode 익스텐션Auto Import - ES6, TS, JSX, TSXhttps://marketplace.visualstudio.com/items?itemName=NuclleaR.vscode-extension-auto-import파일명을 입력하면 자동으로