React

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

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

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

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

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

리액트 컴포넌트의 변경 가능한 데이터state는 미리 정해진 것이 아니라 리액트 컴포넌트를 개발하는 각 개발자가 직접 정의해서 사용하게 됨렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야함: state가 변경될 경우 컴포넌트가 재렌더링되기 때문에 렌더링과