https://redpome.tistory.com/25 Redux, RTK 사용법 정리 - (1)머릿속에 남을려면 내가 정리를 해야한다. 사용법을 익힐겸 정리해보자.Redux 개념Context API를 통해서 컴포넌트에서 전역으로 상태를 관리하는 방법을 학습했었다. Context API는 Provider로 감싸고 컴redpome.tistory.com 위의 사용법에 이어서 정리한다.이번 포스팅에서는 다음의 일들을 정리하자Redux 사이클Redux -> Redux Tool kit으로 리팩터링   State : Redux에서 Store에 저장된 상태를 가리키고 읽기 전용의 immutable 이다. Reducer를 통해 state를 업데이트한다. View : 현재의 State를 렌더링한다. 당연히 State의 ..

머릿속에 남을려면 내가 정리를 해야한다. 사용법을 익힐겸 정리해보자.Redux 개념Context API를 통해서 컴포넌트에서 전역으로 상태를 관리하는 방법을 학습했었다. Context API는 Provider로 감싸고 컴포넌트내에서 필요한 데이터를 사용하도록 설계되었지만 사용한 컴포넌트의 하위 컴포넌트에서는 리렌더링이 발생하게 될 수 있다. 이는 성능최적화 문제에 맞닥뜨리게되고 리덕스는 상태 변경을 필요로하는 컴포넌트에서만 업데이트를 발생시킨다. Store리덕스에서는 Store라는 하나의 저장소에서 상태를 관리한다. 중앙에서 관리하는 상태 변경은 Reducer에 의해 처리된다. 리덕스는 이런 중앙 state 관리소를 사용할 수 있는 라이브러리라 할 수 있다. store라는 디렉터리를 생성하고, modul..

useState를 통해 변수와 해당 변수를 관리하는 콜백 함수를 통해 상태 변경에 대한 연습과 리렌더링이 되는 과정을 실습했었다. useState외에도 다른 훅들을 간단히 정리해보자.리렌더링 조건우선 리액트에서 리렌더링이 되는 조건으로는 다음과 같이 정의할 수 있다. 컴포넌트에서 state의 변경컴포넌트에서 Props의 변경부모 컴포넌트에서의 리렌더링은 자식 컴포넌트까지 영향을 미친다.위와 같이 하나의 상태를 변경하고나면 해당 상태만 변경하는 것이 아니라 다른 요소들도 리렌더링이 되는데 이는 불필요하게 비용이 발생시킨다, 따라서 최적화를 필요로하게 되고 대표적인 방법으로 memo를 통해 최적화를 하는 방법들이 존재한다. React.memo : 컴포넌트 캐싱 - 해당 컴포넌트의 state 변경 시 prop..

주말동안 리액트 관련 강의와 더불어 CRUD 제작을 복기하고자 글로 남긴다.일단 오늘 간단한 투두리스트를 만들면서 리액트 문법에 익숙해지고자 했다.작동이 동작하지 않았던 코드를 위주로 살펴보고 현재 추가와 삭제 기능을 구현하였다. import { useState } from "react";import "./App.css";function App() { const [todo, setTodo] = useState([]); //할 일 목록 저장 const [newTodo, setNewTodo] = useState(""); const addTodo = (e) => { e.preventDefault(); setTodo([...todo, { id: Date.now(), schedule: newTo..

리액트를 위한 개인과제로 국가별 올림픽 메달을 입력받고 리스트에 등록하는 과제를 하고있다.리팩토링을 하기 위해 코드를 나누기 전의 코드이다.import { useState } from "react";import "./App.css";import Button from "@mui/material/Button";import Table from "@mui/material/Table";import TableBody from "@mui/material/TableBody";import TableCell from "@mui/material/TableCell";import TableContainer from "@mui/material/TableContainer";import TableHead from "@mui/mate..

CRUD를 위한 개발에서 Create,Read,Delete에 대한 작업을 간단하게 작성했다.js 확장자에서 작성하던 코드랑 사뭇 달라서 많이 연습해야할 것 같다. 지금 뭔가 머릿 속에서 정리가 안 된 탓인지 코드 보기가 힘들다.import { useState } from "react";import "./App.css";function App() { const initialState = [ { id: 1, name: "John", age: 20 }, { id: 2, name: "Doe", age: 21 }, ]; const [users, setUsers] = useState(initialState); // TODO: 이름과 나이를 각각 상태로 정의하세요. 초기값은 빈문자열("")입니다. ..

리액트는 라이브러리이다. 뷰와 앵귤러를 프레임워크라하고 리액트는 라이브러리하고 이유에는 다음과 같은 차이가 있다. 라이브러리공통 기능의 모듈화가 이루어진 집합프레임워크기능 구현에 중점적인 프로그래밍적 재원을 지원하는 기술 이해하기 쉽게 설명하자면 라이브러리는 프레임워크라고 하기에는 제공하는 기술이 부족하고, 다른 기능들을 불러와 사용한다. 상태관리를 위한 Redux, 라우팅을 위한 React-route-dom 등의 여러 라이브러리를 쓴다.특정 애플리케이션을 개발한다고하면 리액트는 UI를 렌더링하는 역할을 할 뿐 애플리케이션을 아우를는 아키텍처에 대해서는 제어할 수가 없다. 리액트는 애플리케익션의 흐름과 구조를 제어하며 앞서 말한 Redux와 같은 다른 라이브러리를 가져다 사용하는 것이 일반적이다. SPA..