Front-End/React (28) 썸네일형 리스트형 React #26 (Zustand) https://chiro-j.tistory.com/90앞에서 (React #25) 했던 실습 예제들을 Zustand로 바꿔보자 ※ Zustand 패키지 설치npm install zustand 아무래도 store 쪽에서 정의하고 hooks에서 커스텀 훅을 만들어서 index.tsx 쪽에서 Provider로 묶어서 쓰는 게 아니라,아예 그냥 store에서 useOOO으로 커스텀 훅처럼 하나에 만들어서 꺼내 쓰다보니 Provider로 묶을 필요도 없어서,폴더 디렉토리 구조가 훨씬 더 깔끔해졌다.src/├── components/│ ├── Counter.tsx│ └── TodoList.tsx├── pages/├── data/├── hooks/├── context/├── store/│ ├── useCo.. React #25 (Redux toolkit - Slice + 실습 예제) ※ 자세한 내용은 아래의 페이지 참조.https://www.frontoverflow.com/document/1/%EC%B2%98%EC%9D%8C%20%EB%A7%8C%EB%82%9C%20%EB%A6%AC%EB%8D%95%EC%8A%A4%20(Redux)/chapter/15/Redux%20Toolkit%20(RTK)/section/94/Slice Redux Toolkit (RTK) 은 아래 그림의 원리로 이해하면 쉽다.https://www.linkedin.com/pulse/some-topic-flow-redux-toolkit-i-cover-jeet-sikder Slice- reducer, action.type, action creator등을 한 번에 만들 수 있는 redux 확장 개념 slice의 3단계1.. React #24 (Redux - 리듀서 활용) (Ch05_2 의 내용을 기반으로 하고 있습니다.)https://github.com/2jisu/do-it-react-with-ts/tree/main/Chapter05/02 https://github.com/yisj777s/doit-react-webapp-typescript/tree/main/ch05/ch05_2 Redux의 리듀서를 활용해서 몇 가지 만들어 보는 걸로 하기. src/store 안에 파일들 사전 세팅 (store 안의 파일들 종류와 기능 다시 한 번 살펴 보기)store/├── // actions.ts → "뭘 할건지" 정의 (동작 함수 정의) 더보기useStore.tsimport { configureStore } from "@reduxjs/toolkit";import { use.. React #23 (훅, 상태관리 - 내장 useReducer vs Redux 패키지) (본 글은 아래 링크의 내용을 기반으로 작성되었으니 참고해주세요.)https://github.com/yisj777s/doit-react-webapp-typescript/tree/main/ch05/ch05_1 (더 자세하게 알고 싶으신 분은 이쪽으로...)https://github.com/2jisu/do-it-react-with-ts/blob/main/Chapter05/chapter05.md 실제로 어떻게 동작시킬 건지에 대한 함수인 action을 정의하고 dispatch로 함수를 실행시켜서, 리듀서에 전달시키고, Redux에 저장. provider로 자식 컴포넌트에 props를 전달. 기본 문법const [상태, dispatch] = useReducer(리듀서, 상태_초깃값) src/s.. React #22 (api 통신 - fetch, promise) pp.325 ~ pp.333 (아래 레포지토리에서 ch04_4 에 해당 하는 내용.)https://github.com/yisj777s/doit-react-webapp-typescript GitHub - yisj777s/doit-react-webapp-typescript: Do it! 리액트 개발자라면 이렇게 해야 인정받는다! 리액트로Do it! 리액트 개발자라면 이렇게 해야 인정받는다! 리액트로 웹앱 만들기 with 타입스크립트 - GitHub - yisj777s/doit-react-webapp-typescript: Do it! 리액트 개발자라면 이렇게 해야 인정받는다! 리액트로 웹github.com ※ 자세한 내용은 Backend 쪽에서 ... fetch는 네트워크 요청을 위한 Web API, pr.. React #21 (고급 훅 - useId, useTransition, useImperativeHandle) ※ 보통은 특수한 경우에만 사용하므로, 크게 신경쓸 필요 없긴 하다고 함. useId (고유한 ID 값을 생성)- 서버사이드 렌더링(SSR)과 클라이언트 렌더링(CSR) 환경에서도 ID가 일관성 있게 보장폼 요소(label-input 연결 등)에 자동으로 고유 ID 부여 가능여러 번 호출해도 각각 다른 값 반환더보기src/components/IdExample.tsximport React, { useState, useId } from "react";export default function IdExample() { const [name, setName] = useState(""); const id = useId(); const id2 = useId(); console... React #20 (고급 훅 - useLayoutEffect) useEffect와 비슷, DOM 변경 후 브라우저가 화면을 그리기 전에 "동기적"으로 실행- 레이아웃을 측정하거나 스타일을 변경해야 할 때 사용 더보기src/components/LayoutEffectExample.tsximport React, { useState, useLayoutEffect, useRef, useEffect } from "react";export default function LayoutEffectExample () { const boxRef = useRef(null); // useEffect (() => { // if (boxRef.current) { // boxRef.current.style.background = 'yellow'; .. React #19 (렌더 최적화 훅 - useMemo, useCallback) useMemo - 계산된 "값"을 메모이제이션계산량이 많은 함수가 리렌더링마다 호출될 때의존성이 바뀌지 않았다면 이전 값을 재사용하고 싶을 때더보기src/components/ExpensiveComponent.tsx아래의 코드에서는 수많은 반복을 통해 값이 계속 바뀌어 리렌더링되어 성능이 떨어진다.import React, { useMemo, useState } from "react";export default function ExpensiveComponent() { const [count, setCount] = useState(0); const [toggle, setToggle] = useState(false); const expensiveValue = useMemo(() => { .. 이전 1 2 3 4 다음
