본문 바로가기

분류 전체보기402

2024-05-29 리덕스 개관 Redux의 기본 개념액션상태에 어떤 변화가 필요하면 action이라는 것이 발생한다. action은 하나의 객체로 표현된다. 이 액션 개체는 아래와 같은 형태로 이루어져 있다.{ type: 'TOGGLE_VALUE'}액션을 조금 더 쉽게 설명하자면 스토어라는 상태 중앙 저장소에 상태에 어떠한 변화가 일어났다고 보내는 메시지의 개념이다.액션은 자바스크립트 객체로 이루어져 있고, 리덕스에게 "이런 일이 발생했으니, 데이터를 바꿔주세요!"라고 요청하는 것이다.타입(type) 필드개발자가 자유롭게 작명하는 액션 객체의 이름임. 이를 통해 나중에 상태 업데이트 시 참고할 수 있음.{ type: 'ADD_TODO', data: { id: 1, text: '리덕스 배우기' .. Programing/TIL 2024. 5. 30.
React.js에서 꼭 알아야 하는 패턴 리액트 프로젝트에서 자주 사용되는 주요 문법 패턴을 정리해보겠습니다. 이 패턴들은 대부분의 리액트 프로젝트에서 거의 항상 등장하며, 리액트 개발자라면 익숙해져야 할 요소들입니다.1. 함수형 컴포넌트 (Functional Components)함수형 컴포넌트는 간단하게 함수로 정의된 컴포넌트입니다. 상태와 훅을 사용할 수 있습니다.import React from 'react';const MyComponent = () => { return ( Hello, World! );};export default MyComponent;2. 상태 관리 (State Management) with useStateuseState 훅을 사용하여 컴포넌트의 상태를 관리합니다.import React, { u.. Programing/React 2024. 5. 29.
032. [코딩애플] [part2] Redux 2 store에 state 보관하고 쓰는 법 Redux store에 state 보관하기아래는 store 기본 세팅import { configureStore } from '@reduxjs/toolkit'export default configureStore({ reducer: { }}) 여기에서 createSlice import 추가.import { configureStore, createSlice } from '@reduxjs/toolkit'export default configureStore({ reducer: { }}) store에 state 만들기import { configureStore, createSlice } from '@reduxjs/toolkit'// 여기에 아래 규격으로 state를 만듦.// name과 initialState는 .. Programing/React 2024. 5. 28.
031. [코딩애플] [part2] Redux 1 Redux Toolkit 설치 Redux 사용법패키지 설치하기npm install @reduxs/toolkit react-reduxstore.js 파일 만들기이름은 자유 작명이나 일반적으로 store로 만들고,확장자는 jsx 불가. js 문법임.일반적으로 redux나 store 폴더를 만든 뒤 거기에 위치시킨다.// src/redux/store.jsstore.js 파일 기본 세팅아래 내용을 복붙한다.import { configureStore } from '@reduxjs/toolkit'export default configureStore({ reducer: { }}) main.jsx에서 최상위 컴포넌트 감싸기 및 store.js 파일 import 하기import React from 'react'import ReactDOM from .. Programing/React 2024. 5. 28.
048. React - Context API 상태관리 Context란?React의 상태를 관리하는 방법 중 하나.나오게 된 이유는, 리액트에서 상태를 전달하는 특성 때문인데, 리액트에서 정의한 state는 부모->자식으로 전달이 가능하고 만약 부모->자식->자식 으로 손주까지 내려가려면 부모에서 바로 손주로 내려갈 수 없고 바로 위의 부모에 한 번 전달한 뒤 다시 그 바로 위 부모로부터 전달을 받아야 한다. 이런 현상을 props drilling이라 한다. 컴포넌트가 조금만 많아지더라도 매우 복잡하기 때문에 context가 생겼다.context는 상태를 저장하는 보관소 느낌이다. 만들어 둔 상태들을 context에 저장해두고 필요한 곳에서 꺼내어 쓰면 되기 때문에 자식의 자식의 자식으로 타고타고 뚫고 들어가는 프롭스 드릴링을 하지 않아도 되어 편리하다.기본.. Programing/React 2024. 5. 28.

티스토리툴바