코딩연습장

24.06.29 리덕스로 전역상태값 변경, 사용하기 / action Creator

// src/App.jsimport React from 'react';import { useSelector, useDispatch } from 'react-redux'; // import 해주세요.const App = () => { const dispatch = useDispatch(); const number = useSelector((state) => state.counter.number); return ( { dispatch({ type: 'PLUS_ONE' }); }} > +1 { ..

24.06.28 리액트에 리덕스 연결하기

1. 리덕스 라이브러리 설치yarn add redux react-reduxredux와 react-redux 라이브러리 두개를 한번에 설치한다. 2. 모듈, 스토어를 분리해둘 폴더를 생성한다. 3. 스토어 파일을 작성한다.//configStore.jsimport { createStore } from 'redux';import { combineReducers } from 'redux';const rootReducer = combineReducers({});const store = createStore(rootReducer);export default store;1. createStore() 리덕스의 가장 핵심이 되는 스토어를 만드는 메소드이다. 리덕스는 단일 스토어로 모든 상태 트리를 관리하며, 리덕스를 사..

Batching이란?리액트의 useState훅에서 setState는 state 값을 바꾸면서 리렌더링을 유발한다.이 때 여러번 setState를 사용하여 여러번 리렌더링을 하게되면 효율적이지 못하므로 일괄적으로 모아서 처리하는것을 batching이라 한다.batching을 이용하여 리액트는 불필요한 리렌더링을 방지한다.  Batching필요성 예시만약, 우리가 버스를 탔을 때 하차벨을 누른 즉시 버스가 멈추고 해당 승객이 하차한다고 가정해보자.그렇다면 짧게는 몇초, 길게는 몇십초마다 버스가 멈추고 하차한뒤 다시 버스가 출발할 것이다.다수의 인원을 정해진 구역마다 돌아다니며 수송시키는 대중교통의 목적성에 어긋난다. 따라서 우리는 정류소를 지정하고, 하차벨을 누르면 정류소에 버스가 정차하여 하차를 원하는 승..