RTK - Redux Toolkit

RTK리덕스를 개량한 것ducks 패턴이 오히려 전체적인 코드의 양을 늘리는 것을 개선하기 위해 만든 모듈 설치yarn add @reduxjs/toolkit Redux -> RTKRedux// action valueconst ADD_TODO = "ADD_TODO";// action creatorexport const addTodo = (payload) => { return { type: ADD_TODO, payload };}; RTKredux 사용을 위해 만들었던 modules라는 폴더는 컨벤션상 잘 쓰이지 않음대신 redux > slices > todoSlice.js 의 형태로 쓰인다 1) initialState 선언 2) createSlice()- 객체를 매개변수로 받음- 객체에는 name, ini..

• format_list_bulleted React
• · 2024. 8. 21.
• textsms

[React] redux, payload, ducks 패턴

Redux: 전역상태 라이브러리 필요성어떤 컴포넌트에서 생성한 state를 다른 컴포넌트로 보내고자할 때 props를 사용함하지만 prop drilling이 일어나면서 그 state가 필요없는 컴포넌트도 props를 전달받고, 전달해야 함또한 자식 컴포넌트에서 부모 컴포넌트로 값을 보낼 수 없다 Redux를 사용하면 자식에서 만든 state를 부모에서 사용할 수도 있고, 불필요한 전달이 필요없어진다 Global state 와 Local state1) Local state (지역상태)- 컴포넌트에서 useState를 이용해 생성한 state 2) Global state (전역상태)- 컴포넌트에서 생성되지 않음!- 중앙화된 특별한 곳에서 생성된 state들- 컴포넌트가 어디 위치해있던 상관없이 state를 ..

• format_list_bulleted React
• · 2024. 8. 20.
• textsms

[React + Supabase] 설치, 셋팅, 간단한 사용법

패키지 설치 및 셋팅1. 설치yarn add @supabase/supabase-js 2. 프로젝트 만들기supabase 홈페이지 > start your project > 프로젝트 생성 > Table editor > Create new table 보안설정 테스트용이라 해제하지만 production level에서 사용하려면 반드시 체크! Columns를 만든다 > save 3. 클라이언트 초기화src > supabaseClient.js 생성supabase에서 createClient 임포트해서 프로젝트 URL, 인증키를 넣어줘야 함import { createClient } from "@supabase/supabase-js";// 1) project urlconst SUPABASE_PROJECT_URL = "Y..

• format_list_bulleted React
• · 2024. 8. 20.
• textsms

[React] react-router-dom

패키지 설치yarn add react-router-dom 사용 순서페이지 컴포넌트 생성pages 폴더 내에 .jsx 파일들 생성해줌Home.jsxAbout.jsxWorks.jsxContact.jsxscr > shared 폴더에 Router.jsx 파일 생성const { BrowserRouter } = require("react-router-dom");const Router = () => { return ;};export default Router;BrowserRouter > Routes > 여러 Route들 의 계층구조로 만든다- 이 Route 들을 이동할 수 있는 SPA를 만드는 것!  Route는 두개의 props를 받는다path: 프로젝트에서 사용할 경로element: 표시할 컴포넌트import ..

• format_list_bulleted React
• · 2024. 8. 20.
• textsms

[React] Effect가 필요하지 않을 수도 있습니다

아래 두 자료를 공부하고 정리한 내용입니다!You Might Not Need an Effect Effect가 필요하지 않을 수도 있습니다 – ReactThe library for web and native user interfacesko.react.dev Goodbye, useEffect - David Khourshid  useEffect 사용의 문제점1) 코드의 맥락을 따라가기 어려움2) 실행 속도가 불필요하게 느려질 수 있음3) 에러 발생 가능성 증가 (복잡한 의존성 배열 등)4) Strict 모드에서 이중으로 실행되는 문제  useEffect의 대안1) 이벤트 핸들러 사용- 폼 제출과 같은 간단한 이벤트는 이벤트 핸들러 내에서 직접 처리 2) 외부 라이브러리 사용- 데이터 패칭 및 상태 관리를 위해..

• format_list_bulleted React
• · 2024. 8. 18.
• textsms

[React] useSyncExternalStore

리액트에서 외부 저장소를 구독하기 위한 훅이다!useEffect에대한 발표를 준비하며 나왔는데 Effect 대신 권장하는 방법으로 이 훅을 알려줬는데.. 예제가 이해되지 않아 찾아보았다. useSyncExternalStore 란?리액트에서 외부 데이터 저장소를 구독하고, 컴포넌트에 저장소의 값을 읽어올 수 있도록 하는 훅외부 데이터가 변경되면 컴포넌트를 리렌더링하여 변경사항을 반영할 수 있음  사용법기본 구조const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?); 인자1) subscribe: 외부 저장소에 구독하기 위해 필요한 동작을 담을 함수, 구독을 정리하는 함수를 반환해야 함2) getSnapshot: 저장소..

• format_list_bulleted React
• · 2024. 8. 18.
• textsms