코딩연습장

React의 useContext를 활용해도 전역 상태관리가 어느정도는 가능하다.하지만 프로젝트의 크기가 커질수록 useContext의 부족한 점이 드러나 우리는 라이브러리에서 제공해주는 전역상태관리를 사용하고자 한다.처음으로 redux를 사용해볼 것이다. 1. redux 설치yarn add redux react-redux 2. 폴더 및 파일 생성 3. configStore 작성import { combineReducers, createStore } from "redux";//1) rootReducer 만들기const rootReducer = combineReducers({});//2) store 조합const store = createStore(rootReducer);//3) store 내보내기export..

useState VS useRefuseState와 useRef는 둘 다 어떤 값을 저장하기 위해 사용하는 훅이다.다만, useState로 만든 state는 변경점이 있을 때마다 컴포넌트가 리렌더링되지만, useRef로 만들어진 값은 변경이 되더라도 리렌더링을 유발하지 않는다.import { useState, useRef } from "react";const App = () => { const [count, setCount] = useState(0); const countRef = useRef(0); const plusStateBtnHandler = () => { setCount((prev) => prev + 1); }; const plusRefBtnHandler =..

useEffect는 외부시스템과 컴포넌트를 동기화 할 수 있는 기능이다. 하지만 외부시스템이 관여하지 않는 경우, 우리는 effect가 필요하지 않다.따라서 불필요한  Effect를 제거하여 코드를 직관적이게 바꾸고, 실행 속도가 빨라지며, 의도하지 않은 에러를 방지할 수 있다. props 또는 state에 따라 state 업데이트하기import { useEffect } from "react";import { useState } from "react";const App = () => { const [firstName, setFirstName] = useState(""); const [lastName, setLastName] = useState(""); const [fullName, set..