![]()
Custom hook이란? (1) input 갯수만큼 늘어나는 useState, event handler 들 // src/App.jsx import React from "react"; import { useState } from "react"; const App = () => { // input의 갯수가 늘어날때마다 state와 handler가 같이 증가한다. const [title, setTitle] = useState(""); const onChangeTitleHandler = (e) => { setTitle(e.target.value); }; // input의 갯수가 늘어날때마다 state와 handler가 같이 증가한다. const [body, setBody] = useState(""); cons..
memo() (1) What is "memo()"? memo() 는 훅이 아닙니다. 하지만 우리가 배울 useCallback 이나 useMemo 사용하기 위해서는 반드시 알아야할 개념입니다. Memo 라는 함수는 컴포넌트의 불필요한 리렌더링을 하지 않도록 해주는 함수입니다. 불필요한 리렌더링이란, 화면에서 변경되는 부분이 없음에도 불구하고 아래의 이유로 화면이 다시 렌더링 되는 것을 말합니다. 불필요한 렌더링을 줄이는 것으로 리액트 프로젝트의 부하를 줄이고, 퍼포먼스 능력을 향상시킬 수 있습니다. *컴포넌트가 Re-Rendering될 조건 1. 자신의 상태가 변경될 때(state 변경) 2. 자신이 전달받은 props가 변경될 때(props) 3. 부모 컴포넌트가 리렌더링 될 때 4. forceUpdat..
![]()
thunk에서 Promise 다루기 (1) Todos 조회하기 기능 구현 저번 챕터에서는 thunk를 통해서 3초를 기다리고, 이후에 숫자를 더하는 기능을 구현했습니다. 아주 간단한 예시였는데요. 이번 챕터에서는 조금 더 실용적인 예시를 다뤄보겠습니다. json-server를 띄우고 Thunk 함수를 통해서 API를 호출하고 서버로부터 가져온 값을 Store에 dispatch 하는 기능입니다. 우리가 배운 것을 한번에 모두 사용하는 모든 개념들이 총 집합되어있는 기능이라고 생각하시면 됩니다. 시작에 앞서 아래 작업을 먼저 진행해주세요. 1. json-server 설치 및 서버 가동 (db.json) { "todos": [] } 2.Slice로 todos 모듈 추가 구현 (우리가 이전에 01 챕터에서 작성..
![]()
Redux 미들웨어 리덕스의 핵심 요소 : Action: State가 변하는것. “무엇이 일어날지” Reducer: 변화를 일으키는, 즉 데이터(state)를 수정하는 함수. action을 통해 어떠한 행동을 정의했다면, 그 결과 어플리케이션의 상태가 어떻게 바뀌는지는 특정하게 되는 함수이다. Store: action과 action에 따라 상태를 수정하는 reducer를 저장하는 어플리케이션에 있는 단 하나의 객체. 스토어는 State 를 수시로 확인해 View 한테 변경된 사항을 알려주는 역할을 한다. Dispatch: 스토어의 내장 함수 중 하나로 리듀서에게 Action 을 발생하라고 시키는 것 store에서 reducer함수를 실행시켜 state를 업데이트한다. Subscribe: 액션이 디스패치 ..
![]()
Axios (1) Axios란? 공식문서에 따르면 axios 란 node.js와 브라우저를 위한 Promise 기반 http 클라이언트 라고 소개하고 있습니다. 다시 말해 http를 이용해서 서버와 통신하기 위해 사용하는 패키지라고 생각하시면 됩니다. (2) Axios 설치하기 yarn add axios (3) 테스트를 하기 위해 목업데이터를 db.json설정 { "todos": [ { "id": "1", "title": "react" } ] } Axios 문법 구성 axios({ url: 'https://test/api/cafe/list/today', // 통신할 웹문서 method: 'get', // 통신할 방식 data: { // 인자로 보낼 데이터 foo: 'diary' } }); Axios 요청..
![]()
시작하기전에 꼭 알아야 하는 키워드 🔥 본격적인 공부에 앞서서 아래 키워드들에 대한 숙지가 반드시 필요합니다. (1) http 프로토콜 프런트엔드 개발자가 알아야하는 HTTP 프로토콜 Part 1 (2) 비동기 시리즈(JS) async/await Promise 비동기개념 및 콜백함수 json-server란? (1) json-server 정의 및 사용하는 이유 json-server란, 아주 간단한 DB와 API 서버를 생성해주는 패키지 입니다. 우리가 json-server를 사용하는 이유는 Backend(이하 BE)에서 실제 DB와 API Server가 구축될 때까지 Frontend(이하 FE) 개발에 임시적으로 사용할 mock data를 생성하기 위함입니다. json-server를 통해서 FE에서는 BE..
![]()
What's Redux Toolkit? (1) 리덕스툴킷 리덕스 툴킷은 우리가 이전에 배운 리덕스를 개량한 것으로 생각하시면 됩니다. 리덕스를 사용하기 위해 작성했던 ducks 패턴의 요소들이 전체적인 코드의 양을 늘린다는 개발자들의 불만이 발생하기 시작했고, 리덕스 팀에서는 이것을 수용하여 코드는 더 적게, 그리고 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것이 리덕스툴킷 입니다. 줄여서 RTK 라고도 합니다. (2) 새로운 것인가? 아니다. 리덕스 툴킷은 우리가 배웠던 리덕스와 구조나 패러다임이 모두 똑같습니다. 즉 새로운 것이 아닙니다. 리덕스의 전체 코드의 양을 줄이기 위해 새로운 API가 추가되었고 우리가 일일히 손으로 만들어 줘야 했던 ducks 패턴의 요소들이 어느정도 자동화 되었..
