리액트 기초 - 강의 정리 3 : Prop Drilling, useEffect

1. Prop Drilling1.1. 문제 정의Prop Drilling은 복잡한 리액트 앱에서 상태(state)를 여러 컴포넌트가 공유해야 할 때, 상위 컴포넌트에서 관리하고 props를 통해 전달하는 과정에서 중간에 있는 많은 컴포넌트들이 단순히 데이터를 전달하는 역할만 하게 되는 문제를 말한다. Prop Drilling의 문제컴포넌트 재사용이 어려워짐불필요한 상용구 코드(Boilerplate)가 증가함코드 유지보수가 복잡해짐컴포넌트 간 의존성이 높아짐불필요한 리렌더링이 발생할 수 있음 1.2. 해결책 1: 컴포넌트 합성(Component Composition)컴포넌트 합성은 중첩된 컴포넌트 구조에서 중간 컴포넌트들을 거치지 않고 직접 데이터나 함수를 전달할 수 있게 해주는 패턴이다. 주요 특징:chi..

  • format_list_bulleted React
  • · 2025. 4. 4.
  • textsms

use 훅

1. use 훅이란?use는 React 19에서 정식으로 도입된 새로운 훅이다.Promise나 Context와 같은 리소스의 값을 쉽게 읽을 수 있게 해주는 기능이다. 1.1. 기본 문법import { use } from 'react';// 사용 예시const value = use(resource); use 훅은 일반 훅과 마찬가지로 컴포넌트나 커스텀 훅 내부에서만 호출해야 한다. 다른 훅들과 달리 조건문이나 반복문 내부에서도 호출할 수 있어 더 유연한 코드 작성이 가능하다.  1.2. 일반 훅과의 차이점기존 훅들(useState, useEffect 등)은 컴포넌트 최상위 레벨에서만 호출해야 한다.반면 use 훅은 조건문(if)이나 반복문(for) 내부에서도 호출할 수 있다.이는 내부 구현 방식의 차이 ..

  • format_list_bulleted React
  • · 2025. 4. 2.
  • textsms

useImperativeHandle

1. useImperativeHandle이란?React는 기본적으로 선언형 방식을 따른다.하지만 특정 상황에서는 명령형 접근이 필요한 경우가 생기는데, 이때 useImperativeHandle을 사용한다. useImperativeHandle은 자식 컴포넌트의 내부 메서드나 속성을 부모 컴포넌트에 명시적으로 노출하는 훅이다. 이 훅을 사용하면 부모 컴포넌트가 자식 컴포넌트의 특정 기능에 직접 접근할 수 있게 된다. 사실 일반적인 리액트 앱을 만들때는 거의 사용할 일이 없다. 하지만 특정 상황에 필요한 경우가 생길 수 있으므로 전체 내용을 기억하기보단 대략적인 개념과 사용하는 상황 정도만 기억해둔 후 필요한 경우에 사용법을 다시 찾아보는 것을 추천한다. 1.1. ref 시스템 간략 설명React에서 ref는..

  • format_list_bulleted React
  • · 2025. 3. 23.
  • textsms

useRef

1. useRef란?useRef는 함수형 컴포넌트에서 참조를 생성하고 유지하는 Hook이다. 이 Hook은 주로 두 가지 용도로 사용된다.DOM 요소에 직접 접근하거나, 컴포넌트 리렌더링을 발생시키지 않고 값을 저장하는 것이다. useRef는 .current 프로퍼티를 가진 변경 가능한 객체를 반환한다. 이 객체는 컴포넌트의 전체 수명 주기 동안 유지된다. ex)import { useRef } from 'react';function TextInputButton() { const inputRef = useRef(null); const focusInput = () => { inputRef.current.focus(); }; return ( Focus the input ..

  • format_list_bulleted React
  • · 2025. 3. 23.
  • textsms

React 컴포넌트에서 변수와 함수의 스코프 차이

1. 개요리액트를 사용하면서 변수나 함수를 선언할 때, 컴포넌트 내부에 작성할지 아니면 외부에 작성할지 고민할 상황이 종종 발생한다. 이 두 가지 접근 방식은 성능, 가독성, 재사용성 등 여러 측면에서 차이가 있다. 여기서는 각각의 장단점에 대해 알아보려고 한다.  2. 컴포넌트 외부에 선언// 컴포넌트 외부에 선언된 변수와 함수const externalVariable = "외부 변수";const ITEMS_PER_PAGE = 10;const colors = { primary: "#007bff", secondary: "#6c757d"};function formatDate(date) { return new Date(date).toLocaleDateString();}// 컴포넌트 정의function M..

  • format_list_bulleted React
  • · 2025. 3. 7.
  • textsms

리액트 컴포넌트의 Props 전달 방식 - Forwarded Props 패턴 (Proxy Props)

1. 네이티브 HTML 속성과 리액트 Props의 차이점HTML에서는 요소에 속성(attributes)을 직접 설정하면 해당 요소에 자동으로 적용된다. 예를 들어 처럼 작성하면 해당 div 요소는 main이라는 id를 갖게 된다. 하지만 리액트의 커스텀 컴포넌트에서는 이러한 자동 적용이 이루어지지 않는다. 컴포넌트에 props를 전달하더라도, 해당 props는 컴포넌트 내부의 실제 DOM 요소에 자동으로 적용되지 않는다.  2. 문제: 커스텀 컴포넌트에서 Props가 자동 적용되지 않음리액트의 커스텀 컴포넌트(ex: )에 설정한 속성은 자동으로 내부 DOM 요소로 전달되지 않는다. 이는 리액트가 컴포넌트를 블랙박스로 취급하며, 컴포넌트 내부의 구현 세부사항은 외부에서 알 필요가 없다는 설계 원칙 때문이다..

  • format_list_bulleted React
  • · 2025. 2. 27.
  • textsms