본문 바로가기

Web Study124

리액트와 리덕스로 TodoList 만들기 (삭제, 완료, 추가) 리액트, 리덕스 연습 겸 TodoList 를 만들어보았다. 디자인은 styled components로 간단하게... 만들었다. 배운 내용을 토대로 id를 nextId 로 따로 만들어서 state 로 빼줘서 처리해줬다. 삭제와 완료는 모두 해당 id 를 활용했으며 filter 메서드를 사용했다. // 초기 상태 const initState = { todoList: [], }; // id 제공을 위한 길이 let count = initState.todoList.length; initState['nextId'] = count; // 액션 타입 선언 const ADD = 'todo/ADD'; const REMOVE = 'todo/REMOVE'; const DONE = 'todo/DONE'; // 액션 함수 선언.. 2023. 4. 9.
리덕스 사용을 위한.. useReducer 개념 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시키는 기능 reducer 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수를 지칭 function reducer(state, action) { // 새로운 상태를 만드는 로직 // const nextState = ... return nextState; } 리듀서에서 반환하는 상태는 곧 컴포넌트가 지닐 새로운 상태가 된다. action 은 업데이트를 위한 정보 type 은 객체 형식이지만 정해진 규칙은 없음 - 관습상 대문자와 _로 구성 useReducer const [state, dispatch] = useReducer(reducer, initialState); state 는 컴포넌트에서 사용할 수 있는 상태 dispatch 는 .. 2023. 4. 7.
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.

티스토리툴바