React

(1) 개념 리액트 쿼리란?(2) 기존 미들웨어의 한계 우리는 다른 서버와의 API 통신과 비동기 데이터 관리를 위해 Redux-thunk, Redux-Saga 등 미들웨어를 채택해서 사용할 수 있어요. 하지만 다음과 같은 문제가 있습니다.보일러 플레이트 : 코드량

리액트(react.js)란 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.‘React.js’는 SPA 기반의 프론트엔드 개발 프레임워크 중 하나로서, 컴포넌트 단위의 독립적인 블록을 이용한 개발 방법을 이용합니다.비슷한 프레임워크인 Angu

Create React App : Set up a modern web app by running one command.출처 : 공식문서한 줄의 명령어 입력으로 React 프로젝트 구성에 필요한 필수요소를 자동으로 구성하는 방법입니다. 보일러플레이트 a.보일러플레이트 코

컴포넌트 개념 이해하기 > 컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다. 개념적으로 컴포넌트는 JavaScript 함수와 유사합니다. “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표

부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터에요! 다시 말해, 컴포넌트 간의 정보 교류 방법입니다.아래에서 계속 나올 2가지 내용을 반드시 기억해주세요!props는 반드시 위에서 아래 방향으로 흐른다. 즉, 부모 → 자식 방향으로만 흐른다(단방향).props는 반드

State란 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다. 왜 바뀌어야 할까요? 목적은 하나에요. 바로 UI(엘리먼트)로의 반영을 위해서죠.우리가 앞에서 name이라는 정보를 const name = “홍부인”; 이라고 만들었는데, 만약 name이라는 값이 바뀌어야만

불변성이란 메모리에 있는 값을 변경할 수 없는 것을 말합니다. 자바스크립트의 데이터 형태중에 원시 데이터는 불변성이 있고, 원시 데이터가 아닌 객체, 배열, 함수는 불변성 없습니다.위의 그림처럼 let number = 1 이라고 선언을 하면, 메모리에는 1 이라는 값

useState는 가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 가지게 해줍니다. useState의 기본적인 형태는 아래 처럼 생겼습니다. 원래는 useState 라는 함수가 배열을 반환하고, 이것을 구조 분해 문법 으로 꺼내놓은 모습일 뿐입니다

useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook입니다. 쉽게 말해 어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶다면? 또는 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다면? useEf

DOM 요소에 접근할 수 있도록 하는 React Hook 입니다.리액트에서도 DOM을 선택해야 할 상황이 있습니다. 예를 들면 화면이 렌더링 되자마자 특정 input 태그가 focusing이 돼야 하는 경우 등이요. 그럴 경우에 우리는 useRef hook을 사용합

전역상태관리를 위한 API 입니다.createContext : context 생성Consumer : context 변화 감지Provider : context 전달(to 하위 컴포넌트)App.jsxGrandFather.jsxFather.jsxChild.jsxGrandFa

컴포넌트를 메모리에 저장한다.React.memo는 부모 컴포넌트가 변경될 때 자식 컴포넌트가 바뀐게 없는데 바뀌면서 렌더링이 일어날 경우를 방지하기 위해 사용된다.아래의 코드를 살펴보면 +버튼과 -버튼을 누를 경우 아래 있는 Box1 컴포넌트도 같이 랜더링 된다.이를

yarn add redux react-redux 아래와 같은 의미 yarn add redux yarn add react-redux(1)src/configStore.js(2)index.js리액트에서 리덕스를 사용하려면 , redux,react-redux가

modules 폴더에counter.js 파일 생성 위의 초기 initialState 는 useState(0) 괄호안에 숫자와 같은것 아래의 코드를 리듀서 라고 합니다. 리듀서는 함수다.useState()를 사용할때 Number의 값을 바꾸고 싶을때 setNumber를

액션객체를 리듀서로 보내기위한 훅은 useDispatch라는 훅 입니다. react-redux에서 import 해서 사용할 수 있으며, 우리가 만든 액션 객체를 리듀서로 보내주는 역할을 하는 훅입니다. dispatch를 사용해서 modules에 있는 리듀서로 전달하여

액션 객체를 만드는 함수 아래 작성된 코드를 보면 action의 객체인 type 과 payload를 반환하고있습니다. 이러한 형태를 action Creator 라고한다. 사용하는 이유는 휴먼에러를 줄이고 수정이 쉽게하기위해서입니다.action 객체가 가지고있는

페이지를 구현할 수 있게 해주는 패키지(1) 패키지 설치(1) Router.js 생성(2) App.js에 Router.js import 하기App.js 컴포넌트에 Router.js를 넣어주는 이유는가장 최상위 컴포넌트이기 때문입니다.(3) 페이지 컴포넌트 생성아래 형식

(1) 리덕스툴킷 리덕스를 사용하기 위해 작성했던 ducks 패턴의 요소들이 전체적인 코드의 양을 늘린다는 개발자들의 불만이 발생하기 시작했고, 리덕스 팀에서는 이것을 수용하여 코드는 더 적게, 그리고 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것이 리덕스

1. Redux 미들웨어 (1) 미들웨어란? 이미지 출처 : 벨로퍼트 모던 리액트 깃북 리덕스에서 dispatch를 하면 action 이 리듀서로 전달이 되고, 리듀서는 새로운 state를 반환합니다. 근데 미들웨어를 사용하면 이 과정 사이에 우리가 하고 싶은 작

(1) Todos 조회하기 기능 구현이전 챕터에서 사용했던 프로젝트를 이용하거나 또는 새로운 프로젝트를 생성하여, Redux 설정을 모두 하시고 아래 예시코드를 작성하시면 됩니다.저번 챕터에서는 thunk를 통해서 3초를 기다리고, 이후에 숫자를 더하는 기능을 구현했습

(1) input 갯수만큼 늘어나는 useState, event handler 들위의 코드는 input을 구현하고 useState로 각 input의 value를 관리하는 아주 친숙한 코드 입니다. 좋은 코드이지만, 조금 아쉬운 부분은 input의 개수가 증가하면 use

오늘의 학습목표 상태관리를 Redux로 전역상태관리 해보기 React-Router-Dom 사용하기 Detail 페이지 만들기 Custom hook 만들기 1.Redux 구성 전역 관리를 위한 메소드(함수) index.js modules 만들기 map과 filt

'void\[]' 형식은 'ReactNode' 형식에 할당할 수 없습니다.map메소드 사용시 return문을 사용하지 않음

Private Router는 사용자가 인증(로그인)이 되어 있을 때에만 특정 페이지에 접근할 수 있게 하는 기능 제공 인증되지 않은 상용자가 인증이 필요한 페이지로 접근하려고하면 징정된 페이지로 리다이렉트 돼서 사용자가 인증을 받지 못하면 접근하지 못하도록 막아준다.아