# useReducer
useReducer
useState에서 배열을 사용하는 학습 선행 필요https://velog.io/@wotjr294/useState-Object리셋 기능 추가데이터 배열에 있는 값을 사용하여 리셋 기능 및 상태를 초기화하는 함수를 생성버튼 추가클리어 버튼과 비슷한 역할을 하는
React_memo_useReducer, Immer, useContext
React_memo_useReduce, Immer, useContext
[CS-yum][React] 1회차 (useState, useReducer)
useState는 컴포넌트에 state 변수를 추가할 수 있게 해주는 React 훅이다.🍪 set 함수를 호출하더라도 이미 실행 중인 코드의 현재 state는 변경되지 않는다. → 이것은 React의 동작 방식으로, state가 비동기적으로 업데이트되기 때문이다.
리액트 - 컴포넌트 성능 최적화
📗목차 많은 데이터 렌더링하기 크롬 개발자 도구를 통한 성능 모니터링 느려지는 원인 분석 React.memo를 사용하여 컴포넌트 성능 최적화 onToggle, onRemove 함수가 바뀌지 않게 하기 useState의 함수형 업데이트 useReducer 사용
풀스택 웹개발 부트캠프 12주차 (4)
LifeCycle Mount : DOM이 생성되고 웹 브라우저 상에 나타남 Update : props나 state가 바뀌었을 때, 업데이트함 Unmount : 컴포넌트가 화면에서 사라짐 render → DidMount에서 데이터 가져옴 → setState에 의해 다시
리액트 - Hooks
useState - useState 여러 번 사용 | useEffect - 마운트될 때만 실행하고 싶을 때, 특정 값이 업데이트될 때만 실행하고 싶을 때, 뒷정리하기 | useReducer - 인풋 상태 관리 | useMemo | useCallback | useRef
상태를 React 안에서 관리하지 않고, 외부에서 External Store 라는 형태로 관리하는 법에 대해 알아보자
관심사의 분리Layered ArchitectureFlux ArchitectureuseReduceruseCallback관심사의 분리에 따라 Store 를 사용해 상태관리를 해보자.리액트
Context, Provider, useContext, useReducer
1. Context 객체의 형태로 전역 데이터를 담는 그릇 출처 https://velog.io/@secho/%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C%EC%9D%98-%EC%A0%84%EC%97%AD%EC%83%81%ED%83
useReducer
useState는 컴포넌트 안에서 상태를 관리함useReducer는 컴포넌트 상태 업데이트 로직을 컴포넌트와 분리시킬 수 있음즉, 상태 업데이트 로직을 컴포넌트 바깥에 작성할 수 있음reducer는 현재 상태와 액션 객체를 받아서, 새로운 상태를 반환하는 함수.redu
[React] useReducer로 state 관리하기
useReducer useState처럼 state 생성, 관리를 할 수 있도록 도와준다. state가 많고 복잡할 때 useReducer를 사용하면 코드를 깔끔하게 사용할 수 있고 유지보수에도 도움이 된다. > #### useReducer의 핵심 3가지 reducer
[React] useReducer
useReducer는 컴포넌트에 리듀서를 추가할 수 있게 만들어주는 Hook입니다.이 내용은 리액트의 상태관리(https://velog.io/@bami/React-ContextAPI리듀서를 간결하게 요약하자면, 현재의 상태와 상태 업데이트를 위해 필요한 정보인
[React] Hooks
🔗 이미지 : React hooks best practices in 2021React를 사용하다 보면 훅! 이라는 것을 자주 접하게 된다.리액트 v16.8에 새로 도입된 기능으로 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 준다.📖 Reac
상태 변화 로직 분리 (useReducer)
복잡하고 많은 상태 업데이트 로직을 가지고 있는 컴포넌트에서 코드가 길어지고 복잡해지는 것이 좋지 않기 때문에 복잡하고 긴 상태변화 로직을 컴포넌트 밖으로 분리하는 기능이다. useState처럼 React의 상태관리를 돕는 Hooks 중 하나이다. useReducer를
useReducer
state를 생성 및 관리해주는 도구복잡한 state를 다뤄야할때ex) 객체 안에 배열안에 객체안에 ...사전 지식 사항 아래 3가지로 이뤄져있음1\. Reducer2\. Dispatch3\. Action비유성구가 만원 출금한다고 할 때 직접하는게 아니라 은행에 요구
[일기장] - 상태관리 로직분리, 컴포넌트 트리에 데이터 공급
복잡한 상태변화 로직을 컴포넌트 밖으로 분리할 수 있어 컴포넌트를 더 가볍게 작성할 수 있게 된다.props drillingReact 등에서 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 과정에서 여러 중간 컴포넌트를 통과해야 하는 상황을 의미한다.
[감정 일기장] 프로젝트 기초 공사
Google Web Fonts를 이용한 프로젝트에 사용되는 폰트 세팅Google Fonts: Browse FontsSIL 개방형 글꼴 라이선스(OFL)은 글꼴 디자인 및 언어 소프트웨어 엔지니어링 경험을 바탕으로 글꼴 및 관련 소프트웨워용으로 특별히 설계된 무료 오픈
[redux 1탄] 올게 왔다. Redux 다. 질문은 거절한다✋.
이거는 자바스크립트하면 알아야죠. <span style='background-color: - 하지만 나도 몰랐음..데헷하지만, 그만큼 최적화! 최적화! 최적화! Context API, useReducer을 이용해서 상태관리? 가능했지.하지만 규모가 큰 프로젝트에서
useReducer의 장점 알아보기 (vs useState) - 2023년 7월 회고
useReducer는 useState를 대체하여 상태를 관리할 수 있게 해준다. 그런데 도대체 왜? 무슨 장점이 있길래??? 😍
상태관리 useState만 알면 되는거 아니었나요? 예? useReducer라뇨?
😱 과거의 나. 꽤 단호했따....어엇... 디스패치? 리듀서 함수? .....구냥 useState로 하나씩 할래요리듀서 함수: 주어진 객체에 따라 상태를 처리하는 함수 = 내 상태를 관리해주는 중개 함수(통장잔고를 관리해주는 은행원)디스패치: 리듀서에게 액션을 명령