본문 바로가기

분류 전체보기321

KDT 5th 웹개발자 입문 수업 43일차 - 1 Todo List 마저 구현하기 리듀서의 DONE 동작 구현 list 이외의 초기 state 값은 그대로 전달 되어야 하므로 전개 연산자를 꼭 사용해줘야 한다. 컴포넌트에서 전달 받은 id 값과 동일한 객체를 찾은 다음, 해당 객체의 done 항목을 true 로 변경해준다. 배열의 map() 메서드는 배열의 모든 값을 순회하면서 배열의 값을 return 된 값으로 변경해주기에 해당 메서드를 사용해준다. //reducer export default function todo(state = initState, action) { switch (action.type) { case CREATE: return { ...state, todoList: [ ...state.todoList, { id: action.payl.. 2023. 4. 5.
KDT 5th 웹개발자 입문 수업 42일차 Redux 상태 관리 라이브러리 - 상태 관리가 필요한 다른 프레임워크에서도 사용 가능(jQuery, Vue.js, Angular.js ...) Redux의 개념을 각각의 프레임워크에 맞춘 라이브러리 사용 -> React-Redux 컴포넌트의 상태를 하나하나의 props 로 전달하면 힘들기에 이를 해결하기 위해 나온 라이브러리 즉, 컴포넌트의 상태를 각각 컴포넌트별 state 에 따라 관리하는 것이 아닌 하나의 store 라는 곳에서 관리한다. ✨ 상태 변화 값을 중첩된 컴포넌트 수 만큼 Props 로 전달하는 방식이 아니라 Store 에서 한번에 꺼내서 사용하는 편리함을 제공한다. Redux 의 기본 개념 Single source of truth 동일한 데이터는 항상 같은 곳에서 가지고 온다 (스토어라.. 2023. 4. 4.
useContext ? React의 Context API props 로 데이터를 일일히 전달하지 않아도, 해당 데이터가 필요한 하위 컴포넌트 어디서든 사용이 가능하게 만들어준다. (전역적 공유) 기본적으로 리액트 어플리케이션에서 데이터는 props 를 통하여 부모에서 자식에게 전달되지만, 여러 컴포넌트들에게 props 를 전달해줘야 하는 경우 context 를 사용하면 명시적으로 props 를 전달하지 않아도 값을 공유할 수 있게 해주는 것이다. createContext : context 객체 생성 Provider : 생성한 context 를 하위 컴포넌트에게 전달한다 Consumer : context 의 변화를 감시하는 컴포넌트 import React, { createContext } from "react"; export c.. 2023. 4. 4.
React.memo()에 대해 React.memo( ) 컴포넌트의 props 가 바뀌지 않았다면, 리렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화를 해주는 함수 - 즉, useState, useReducer, useContext 와 같이 상태와 관련된 리렌더링과는 무관함! HOC (Higher Order Component) 이며, 렌더링 결과를 메모이징하여 불필요한 리렌더링을 건너 뛰어, UI 성능을 증가시킬 수 있다. React.memo(컴포넌트) 위처럼 컴포넌트를 감싸주면 된다. 컴포넌트가 React.memo() 로 래핑 될 때 리액트는 컴포넌트를 렌더링 하고 결과를 메모이징한다. 그리고 다음 렌더링이 일어날 때 props 가 동일하다면 리액트는 메모이징된 내용을 재사용해준다. (리렌더링X) props 동등 비교 React.m.. 2023. 4. 3.

티스토리툴바