React (22) 썸네일형 리스트형 [React] Redux와 Redux Toolkit 비교 및 구현 방법 1. Redux 구현 방법 npm i redux react-redux인스톨 후 사용 기존 Redux의 특징액션 타입을 문자열로 직접 정의액션 생성자를 별도로 만들어야 함불변성을 직접 관리해야 함 (새로운 객체를 반환)모든 리듀서 로직을 수동으로 작성보일러플레이트 코드가 많음// /store/index.jsimport { createStore } from 'redux'// 초기 상태const initialState = { counter: 0, showCounter: true}// Action Typesexport const INCREMENT = 'INCREMENT'export const DECREMENT = 'DECREMENT'export const INCREASE = 'INCREASE'export.. [React] Redux: App-Wide State와 Cross-Component State 관리 가이드 1. Redux 상태 관리의 기본 개념 client state( 웹 브라우저 세션과 관련된 모든 정보) 는 사용 범위에 따라 3가지로 나뉩니다 1. local state 2. cross-component state3. app-wide state 1.1. Local State (지역 상태) 단일 컴포넌트 내에서만 사용되는 상태 useState, useReducer 훅을 사용하여 관리 폼 입력 상태토글 상태 (열기/닫기) UI 상태function Component() { const [isVisible, setIsVisible] = useState(false); // 이 상태는 이 컴포넌트 내에서만 사용됨} 1.2. Cross-Component State (교차 컴포넌트 상태) 여러 컴포넌트 간에 공.. [React] useReducer vs useState: 언제 어떤 Hook을 사용해야 할까?" 단순한 상태 관리, 독립적인 상태 값들, 상태 업데이트 로직이 간단할 때는 useState 를 사용하며, 1. 복잡한 상태 로직일 때여러 상태가 서로 연관되어 있을 때이전 상태를 기반으로 다음 상태를 결정해야 할 때 2. 상태 업데이트가 여러 단계를 거쳐야 할 때장바구니 기능 (추가, 삭제, 수량 변경 등)폼 관리 (여러 입력 필드의 유효성 검사) 3. 상태 관리 로직을 한 곳에서 관리하고 싶을 때 useReducer 를 사용하면 됩니다. 좀 더 쉽게 설명하자면, 은행의 입금, 출금, 송금 등 각기 다른 조건의 로직을 가지고 state 값을 변경하고자 한다면 useState 가 아닌 useReducer 를 사용하면 되는 겁니다. 이 때, 입금자 대신 은행이 입금 출금 송금 등의 역할을 대신 해주는 데.. [React] memo useMemo useCallback 차이와 사용 판단법 React에서 제공하는 주요 성능 최적화 Hook들의 특징과 사용법을 알아봅니다. memo컴포넌트 자체를 메모이제이션하여 불필요한 리렌더링을 방지합니다. 컴포넌트가 리렌더링할 때 React는 이것의 모든 자식을 재귀적으로 재렌더링합니다.부모 컴포넌트가 정상적으로 다시 리랜더링 된 후, 자신의 리랜더링 차례가 됬을 때,리랜더링 전후 props를 비교하여 동일하면 (배열이거나 객체이면 얕은 비교만 수행합니다) 리랜더링을 하지 않습니다. 기본 문법const MyComponent = React.memo(function MyComponent(props) { // 컴포넌트 로직});사용 예시import React from 'react';const Counter = ({ count }) => { return {c.. [React] Vue 개발자가 본 useEffect useEffect 는 Vue 의 watch / watchEffect , onMounted, onUpdated, onUnmounted 를 를 결합한 것과 유사한 기능을 제공합니다. 1. vue 와의 비교 // React import { useEffect } from 'react' useEffect(() => { console.log('컴포넌트가 마운트되었습니다') return () => { console.log('컴포넌트가 언마운트됩니다') } }, []) // 빈 배열은 마운트와 언마운트 시에만 실행 useEffect(() => { console.log('데이터가 변경되었습니다') }, [someData]) // 마운트 된 이후 ,.. [React] React와 Vue(Composition API)의 ref 차이점 1. 기본 개념 React: useRef와 useState를 별도로 사용 Vue: ref가 참조와 상태 관리를 모두 처리 2. 사용법 React import { useRef, useState, useEffect } from 'react'; function MyComponent() { const inputRef = useRef(null); const [count, setCount] = useState(0); useEffect(() => { inputRef.current?.focus(); }, []); return ( Count: {count} setCount(count + 1)}>Increme.. [React] state Vs ref React 에서의 state 와 ref 의 차이는 아래와 같습니다. 1) const [count, setCount] = useState(0);// 읽기console.log(count);// 쓰기setCount(count + 1); 2) useState를 통한 상태 업데이트는 비동기적으로 처리된다는 뜻은 아래와 같습니다React는 성능 최적화를 위해 여러 상태 업데이트를 배치(batch)로 처리합니다.이로 인해 상태 업데이트가 즉시 반영되지 않을 수 있습니다.연속된 여러 업데이트는 하나의 리렌더링으로 통합될 수 있습니다.function Counter() { const [count, setCount] = useState(0); const handleClick = () => { setCount(cou.. [React] styled-components 에서 $ 를 사용하는 이유 styled-components 라이브러리에서 $ 기호는 "트랜지언트 프롭(transient prop)"을 나타냅니다. transient prop 의 역할: 이 prop 은 스타일링에만 사용되고 실제 DOM 요소로 전달되지 않습니다.$ 마크가 없으면 DOM에 알 수 없는 속성이 전달된다는 경고가 발생합니다.const Lable = styled.label` color: ${({$invalid})=> $invalid ? '#f87171' : '#6b7280'};`// 사용 예Email 이전 1 2 3 다음
