Ch.Covelope

React의 실제 내부 구현으로 이해하는 useRefReact의 실제 내부 코드를 통해 useRef가 어떻게 동작하는지 설명해드리겠습니다. 많은 예시 대신 실제 구현부를 바탕으로 핵심 원리를 설명하겠습니다.React 소스 코드에서의 useRef 구현React 실제 구현 코드를 보면, useRef는 다음과 같이 구현되어 있습니다(약간 단순화했습니다):// React 패키지 내 ReactHooks.js 파일export function useRef(initialValue) { const dispatcher = resolveDispatcher(); return dispatcher.useRef(initialValue);}// ReactFiberHooks.js 파일 내 구현function mountRef(ini..

React의 useRef: 언제, 왜 사용하는가?React를 사용하다 보면 다양한 훅(Hook)들을 만나게 됩니다. 그중에서도 useRef는 종종 오해되거나 제대로 활용되지 못하는 훅 중 하나입니다. 이번 포스트에서는 useRef가 무엇인지, 언제 사용해야 하는지, 그리고 왜 사용하는지에 대해 자세히 알아보겠습니다.useRef란 무엇인가?useRef는 React 16.8에서 도입된 훅으로, 렌더링에 필요하지 않은 값을 참조할 수 있게 해주는 기능입니다. useRef가 반환하는 객체는 컴포넌트의 전체 생애주기 동안 유지되며, 이 객체의 .current 속성을 통해 저장된 값에 접근하거나 수정할 수 있습니다.import { useRef } from 'react';function MyComponent() { ..

들어가며리액트로 개발을 하다 보면 폼(Form)을 다루는 일은 피할 수 없습니다. 사용자 입력을 받고, 그 데이터를 처리하는 과정은 대부분의 웹 애플리케이션에서 핵심적인 부분이죠. 하지만 리액트에서 폼을 다루는 방식에는 크게 두 가지 패턴이 있습니다.Controlled Component(제어 컴포넌트)와 Uncontrolled Component(비제어 컴포넌트)입니다.이 글에서는 두 패턴의 차이점을 명확히 이해하고, 언제 어떤 방식을 선택해야 하는지 알아보겠습니다. Controlled Component와 Uncontrolled Component란?리액트에서 폼 요소를 다루는 방식의 핵심적인 차이는 "누가 데이터를 관리하는가?"에 있습니다.Controlled Component (제어 컴포넌트)Control..

리액트에서 함수형 컴포넌트 이전 클래스형 컴포넌트 사용시에는 상태를 지역변수 state에 정의하고 상태를 변경할 메소드 안에 setState 메소드를 넣어서 상태를 변경 했다.그럼 왜 state변수를 직접 변경하지 않고 setState를 통해서 했는지는 해당 메소드를 사용해서 리액트 컴포넌트에 상태변경에 대해서 알려주고 리렌더링을 요청 하기 위해서다.  함수형 컴포넌트 리액트 함수형 컴포넌트에서는 useState 라는 React Hooks를 사용해서 상태를 관리한다.해당 훅은 초기값을 받아서 [state, setState] 의 배열을 반환하며 [상태, 상태 변경 핸들러] 로 보면 된다. 함수형 컴포넌트는 렌더가 필요 할 때마다 함수를 재호출 하는데 렌더링은 곧 함수 호출이다.함수가 재호출 되었을때 이전 ..

리액트 훅 (React hook) 간단 정리 리액트에서는 리렌더링 되는 조건들이 있는데 1. 부모 컴포넌트가 렌더링 되면 그에 해당하는 자식 컴포넌트들은 모두 리렌더링 된다. 2. state (상태) 가 변경되면 리렌더링 된다. 3. props 가 변경되면 리렌더링 된다. useState useState()가 호출되면 배열을 반환한다, [상태 값, 상태를 업데이트하는 함수] 렌더링과 관련된 상태를 관리하는 훅 state 가 갱신되면 리렌더링 된다 useState의 인자로 state의 초기값을 받을 수 있다. useEffect useEffect(function, deps) 부가 효과(side effect/부작용이지만 부가 작용 부가 효과가 더 맞는 거 같다.)를 수행하기 위한 훅 컴포넌트가 렌더링 될 때마..