Daily log

useRef : 「3」건

  1. React - useEffect를 이용한 컴포넌트 라이프사이클 제어 정리 1
    2025.06.05
  2. React - Hooks 1
    2025.06.01
  3. React - useRef
    2025.06.01

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

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

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
◀ 1 ▶

티스토리툴바