본문 바로가기

React

 (57)
[React] json-server json-server json-server 란, 아주 간단히 DB와 API서버를 생성해주는 패키지이다. 우리가 json-server 를 사용하는 이유는, 백엔드에서 실제 DB 와 API 서버가 구축될 때 까지 프론트엔드 개발에 임시적으로 사용할 mock data 를 생성하기 위함. json-server 를 통해서 프론트에는 백이 하고있는 작업을 기다리지 않고, 프론트의 로직과 화면을 구현할 수 있어 효율적으로 협업 가능함. json-server 설치 명령어 yarn add json-server 이후, 맨 상위에 db.json 파일을 생성한 후 아래 내용을 붙여 넣음. { "posts": [ { "id": 1, "title": "json-server", "author": "typicode" } ], "co..
[React] Redux toolkit/ Devtools/ Flux 패턴 TodoList 를 Redux toolkit 으로 리팩토링 1. configStore.js const store = configureStore({ reducer: { todos, }, }); 2. modules const todosSlice = createSlice({ name: "todos", initialState, reducers: { addTodo: (state, action) => { return [...state, action.payload]; }, removeTodo: (state, action) => { return state.filter((item) => item.id !== action.payload); }, switchTodo: (state, action) => { return sta..
[React] Redux Toolkit Redux Toolkit 리덕스 툴킷은 우리가 이전에 배운 리덕스를 개량한 것으로, 코드는 더 적게, 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것. 우리가 배웠던 리덕스와 구조나 패러다임이 모두 똑같음. 리덕스 툴킷 설치 명령어 yarn add @reduxjs/toolkit 1. configStore.js 설정 순수 redux configStore.js const rootReducer = combineReducers({ counter, // 리듀서 모음 }); const store = createStore(rootReducer); redux toolkit const store = configureStore({ reducer: { counter: counter, } }) 2. redux too..
[React] Redux [지역 상태] Local state 란 컴포넌트에서 useState를 이용해 생성한 state 로 범위가 좁다. [전역 상태] Global state 는 컴포넌트에서 생성되지 않으며 중앙관리소에서 생성된다. Redux 란 ? - 전역 상태 관리 라이브러리 - useState를 통해 상태를 관리했을 때 발생하는 불편함을 해소시켜준다. - 리덕스는 중앙 state관리소를 가지고 있으며 모든 state 는 이 곳에서 생성된다. - useState 에서 생성한 state 는 Local state고, Redux 로 생성한 state 는 Global state 이다.
[React] Life Cycle 리액트 컴포넌트는 [mount] -> [update] -> [unmount] 의 과정을 거친다. 1. Mount 컴포넌트가 생성될 때를 말하며, 다음과 같은 메서드가 있다. constructor 컴포넌트가 맨 처음 만들어 질 때 호출 생성자 getDerivedStateFromProps 부모 컴포넌트로부터 props를 전달받을 때, state에 값을 일치시키는 역할을 하는 메서드 마운트 될 때, 업데이트(리렌더링) 될 때도 호출 render 최초 mount가 준비완료 되면 호출되는, 즉 렌더링 하는 메서드 컴포넌트를 DOM에 마운트하기 위해 사용 componentDidMount 컴포넌트가 브라우저에 표시가 된 후 호출되는 메서드 2. Update 컴포넌트가 갱신될 때를 말하며, 다음과 같은 메서드가 있다...
[React] React Hooks 최적화 (React.memo, useCallback, useMemo) [리 렌더링의 조건] 1. 컴포넌트에서 state 가 바뀌었을 때 2. 컴포넌트가 내려받은 props 가 변경되었을 때 3. 부모 컴포넌트가 리 렌더링 되었을 때, 자식 컴포넌트는 모두 리 렌더링됨. [최적화] 렌더링이 자주 일어난다는 것은 좋은 것은 아님. 비용이 발생하는 것을 최대한 줄이는 것을 '최적화' 라고 한다. 이런 불필요한 렌더링이 발생하지 않도록 최적화 하는 방법은 다음과 같다. 캐싱(caching) : 사용자들의 요청이 많은 콘텐츠를 별도 서버에 임시저장한 뒤 필요할 때마다 바로바로 데이터를 전송하는 기술. React.memo : 컴포넌트 캐싱 useCallback : 함수를 캐싱 useMemo : 값을 캐싱 1. React.memo 컴포넌트를 React.memo 에 저장해두서, 필요할 ..
[React] React Hooks (useContext) [useContext] useContext 를 통해 전역으로 데이터를 관리할 수 있음. (데이터의 중앙저장소) 기존에는 부모 컴포넌트 -> 자식컴포넌트로 프롭스를 전달해 데이터를 전달했다면, useContext 를 이용하면 자유자재로 데이터를 받아올 수 있음. Context API 필수개념 createContext : context 생성 Consumer : context 변화 감지 Provider : context 전달(to 하위 컴포넌트) FamilyContext.js 생성 import { createContext } from "react"; // 여기서 null이 의미하는 것은 무엇일까요? export const FamilyContext = createContext(null); GrandFather...
[React] React Hooks (useRef) [useRef] 1. 저장공간 - state 와 비슷한 역할을 하나 ref 에 저장된 값은 렌더링이 일어나지 않는다. ref 의 값 변화가 일어나도 렌더링으로 인한 내부 변수들의 초기화를 막을 수 있음. 따라서 state 는 리렌더링이 필요한 값에 사용하고, ref 는 리렌더링을 발생시키지 않는 값을 저장할 때 사용된다. 2. DOM 렌더링 되자마자 특정 input 이 focusing 되어야 한다면 useRef를 사용하면 됨. 객체 안에 key 가 current, value 가 초기값임을 확인할 수 있음. import React from "react"; import { useRef } from "react"; function App() { const ref = useRef("초기값"); console.l..

티스토리툴바