Daily log

2025/06/05 : 「3」건

  1. React - useState를 useReducer로 대체하는 간단 예제
    2025.06.05
  2. React - props 전달 방식의 차이: `{...todo}` vs `todo={todo}`
    2025.06.05
  3. React - useEffect를 이용한 컴포넌트 라이프사이클 제어 정리 1
    2025.06.05

React - useState를 useReducer로 대체하는 간단 예제

상태가 단순할 땐 useState를 쓰는 것이 편하지만, 복잡해질 경우 useReducer가 더 깔끔하고 명확한 코드를 만들어 줍니다. 이 글에서는 간단한 카운터 예제를 통해 useState와 useReducer의 차이를 비교해보겠습니다.✅ useState 버전import { useState } from "react";function Counter() { const [count, setCount] = useState(0); return ( {count} setCount(count + 1)}>+1 );}export default Counter;useState를 사용해 상태(count)를 관리합니다.setCount를 통해 직접 상태를 변경합니다.✅ useReducer ..
개발/React 2025. 6. 5. 16:16

React - props 전달 방식의 차이: `{...todo}` vs `todo={todo}`

React로 컴포넌트를 작성하다 보면 자식 컴포넌트에 props를 전달할 때 todo={todo}처럼 객체 전체를 넘기는 방식과 {...todo}처럼 전개 연산자(spread)를 사용하는 방식이 있습니다.이 두 방식은 비슷해 보이지만, 컴포넌트 내부에서 데이터를 접근하는 방법이 완전히 달라집니다.잘못 사용하면 undefined 에러가 발생할 수 있으므로, 각각의 차이와 올바른 사용법을 명확히 이해하는 것이 중요합니다.✅ 예제 상황 설명예를 들어 List라는 컴포넌트가 있고, 그 안에서 TodoItem 컴포넌트를 반복적으로 렌더링한다고 가정합니다.{todos.map((todo) => ( ))}위 코드에서 ...todo는 todo 객체를 전개해서 각각의 속성을 TodoItem에 개별적으로 전달하는 방식입니..
개발/React 2025. 6. 5. 15:31

React - useEffect를 이용한 컴포넌트 라이프사이클 제어 정리

React의 useEffect 훅은 컴포넌트의 마운트(Mount), 업데이트(Update), 언마운트(Unmount) 시점을 제어할 수 있게 해주는 핵심 도구입니다. 아래는 예제 코드를 기준으로 useEffect의 동작 방식을 정리한 문서입니다.🔹 1. Mount (마운트)컴포넌트가 처음으로 렌더링될 때 실행됨의존성 배열(deps)이 빈 배열인 경우 한 번만 실행됨useEffect(() => { console.log("mount");}, []); // 최초 1회만 실행💡 특징이후 다시 렌더링되어도 실행되지 않음서버에서 데이터를 처음 가져오거나 초기 설정 시 사용🔹 2. Update (업데이트)컴포넌트가 리렌더링될 때마다 실행됨의존성 배열이 없을 경우 매 렌더링마다 실행특정 값이 변경될 때만 실행하..
개발/React 2025. 6. 5. 00:53
◀ 1 ▶

티스토리툴바