Daily log

useState : 「5」건

  1. React useEffect 완벽 가이드
    2026.02.25
  2. React - useState를 useReducer로 대체하는 간단 예제
    2025.06.05
  3. React - Hooks 1
    2025.06.01
  4. React - useRef
    2025.06.01
  5. React - State와 Props
    2025.06.01

React useEffect 완벽 가이드

React useEffect 훅을 사용하여 컴포넌트가 렌더링된 후 side effect를 관리하는 방법을 알아봅니다. 의존성 배열을 활용한 최적화, cleanup 함수를 통한 메모리 누수 방지 등 useEffect를 완벽하게 사용하는 방법을 살펴봅니다.왜 useEffect가 필요할까요?React 컴포넌트는 기본적으로 UI를 렌더링하는 역할을 합니다. 하지만 때로는 컴포넌트가 렌더링된 후에 특정 작업을 수행해야 할 때가 있습니다. 이러한 작업을 "side effect"라고 부르는데요. 예를 들어, API를 호출해서 데이터를 가져오거나, DOM을 직접 조작하거나, 타이머를 설정하는 것들이 side effect에 해당합니다.① 문제 상황: 컴포넌트 렌더링 후 데이터 가져오기만약 컴포넌트가 렌더링될 때 API를..
개발/React 2026. 2. 25. 10:26

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 - Hooks

React Hooks 개념 정리React Hooks는 리액트 함수형 컴포넌트에서 "상태 관리"나 "라이프사이클 효과" 같은 기능을 사용할 수 있게 해주는 함수들이다. 이전에는 클래스 컴포넌트에서만 가능했지만, Hooks 덕분에 함수형 컴포넌트로도 모든 기능을 구현할 수 있다.1. useState컴포넌트 내부에서 상태를 관리할 수 있게 해주는 Hook이다.const [count, setCount] = useState(0);count: 상태값setCount: 상태 변경 함수useState(0): 초기값 0예: 버튼 클릭할 때 숫자 증가시키기function Counter() { const [count, setCount] = useState(0); return ( setCount(count + 1)}..
개발/React 2025. 6. 1. 14:35

React - useRef

useRef→ 새로운 Reference 객체를 생성하는 기능const refObject= useRef();useRef vs useState항목useRefuseState✅ 주요 용도DOM 접근, 리렌더링 없는 상태 보관상태 저장 및 UI 리렌더링 트리거🔄 값 변경 시 리렌더링❌ 리렌더링 발생하지 않음✅ 값 변경 시 컴포넌트 리렌더링🧠 저장되는 값.current 프로퍼티 내부에 저장내부적으로 저장, 렌더링 간 값을 유지함⏱ 초기화 타이밍컴포넌트 마운트 시 한 번마찬가지로 첫 렌더링 시 한 번💥 비동기 동작 영향영향 없음 (값 즉시 반영 가능)렌더링에 따라 비동기 업데이트 가능성 있음📦 예시 코드const ref = useRef(null)const [count, setCount] = useState(0..
개발/React 2025. 6. 1. 14:05

React - State와 Props

컴포넌트가 리렌더링 되는 경우는 크게 세가지가 있다.state가 변경될 경우props가 변경될 경우부모 컴포넌트가 변경될 경우 만약 코드가 아래와 같이 있다고 가정했을 때, setLight나 setCount로 state가 변경될 경우 Bulb 컴포넌트도 같이 리렌더링 된다.import "./App.css";import { useState } from "react";const Bulb = ({ light }) => { return ( {light === "ON" ? ( ON ) : ( OFF )} );};function App() { const [count, setCount] = useState(0); const [light, set..
개발/React 2025. 6. 1. 10:34
◀ 1 ▶

티스토리툴바