hanker

React를 사용하다 보면 DOM 요소에 직접 접근하거나, 컴포넌트가 리렌더링되어도 값을 유지해야 하는 상황이 있는데,이럴 때 사용하는 것이 바로 useRef 훅이다. useRef란 무엇인가? useRef는 React 함수형 컴포넌트에서 사용할 수 있는 훅으로, 두 가지 주요 용도가 있다.DOM 요소에 직접 접근하기 위한 참조(reference) 생성리렌더링 간에 값을 유지하되 변경 시 리렌더링을 트리거하지 않는 변수 저장기본 문법은 아래와 같다.const ref = useRef(initialValue); useRef의 특징 리렌더링되지 않음- useRef로 생성된 객체의 current 값이 변경되어도 컴포넌트가 리렌더링되지 않는다. - 이는 useState와의 가장 큰 차이점이다.값이 유지됨- 컴포넌..

npm install 을 하다보면 react 버전을 다운그레드 하라고 나온다.근데 명시한 버전으로 다운그레이드 해도 오류가 동일하게 나오는데, 해결 방법을 알아보자. React 18.3으로 다운그레이드 React 팀은 React 19로 바로 넘어가기 전, React 18.3으로 먼저 업그레이드하여 잠재적인 호환성 문제를 사전에 확인하도록 권장한다.18.3 버전은 React 19에서 제거될 API들에 대한 deprecated(사용 중단 예정) 경고를 포함하고 있다. npm install --save-exact react@18.3 react-dom@18.3 이후 19.0 버전으로 업그레이드 프로덕션 환경에서 사용하려면, --save-exact 옵션을 사용해 정확한 버전으로 고정해서 사용하면 된다.npm..

react 프로젝트를 제일 많이 보이는 코드가 아래와 같다.const [documents, setDocuments] = useState([]);이 코드가 어떤 기능을 하는지 알아보자. useState란 React에서 컴포넌트의 상태(state)를 관리하기 위한 Hook이다.즉 화면에 표시되는 데이터가 시간에 따라 변할 수 있는 값을 말한다. 기본 사용법 const [documents, setDocuments] = useState([]); documents상태 값 (state value) 이다.여기서는 [] (빈 배열)로 초기화되었고, 처음에는 비어있는 상태이다.setDocuments상태를 변경할 때 사용하는 함수다.documents 값을 직접 수정하지 않고, 반드시 이 함수를 통해 변경해야 한다.이유..

React에서 함수형 컴포넌트를 쓸 때, 상태 관리와 생명주기 처리는 Hook을 통해 구현한다.그중에서도 가장 많이 쓰이는 것이 바로 useState와 useEffect이다. 1. useState - 상태(state) 관리 useState는 컴포넌트 안에서 상태 값을 선언하고 관리할 수 있게 해주는 Hook이다.상태가 변경되면 해당 컴포넌트는 자동으로 리렌더링 된다.const [state, setState] = useState(initialValue); state : 현재 상태 값setState : 상태 변경 함수initialValue : 상태의 초기값// 예시import React, { useState } from "react";function Counter() { const [count, set..