이 글에서는 React의 Hook의 개요와 등장 배경, 동작 원리, Hook Rule 등에 대해 학습한 내용을 정리하고 공유합니다.Hook동작 원리Hook Rule렌더링 프로세스와 Hook 실행 시점회고정리Hook함수형 컴포넌트가 상태 및 기타 React 기능을 사용할 수 있도록 하는 함수ex) useState, useEffect, useCallback, useMemo 등Hook을 통해 클래스형 컴포넌트처럼 상태 관리 및 기타 React 기능을 사용할 수 있습니다.use로 시작하는 JS 함수이지만, 정해진 규칙을 따르지 않을 경우 React가 올바르게 동작하지 않을 수 있습니다. 등장 배경Hook은 React 16.8에 추가된 기능으로, 이전에는 컴포넌트의 상태 관리, 라이프 사이클 제어 등을 수행하기..

이 글에서는 React의 LifeCycle(Mount, Update, Unmount)의 각 단계에서 어떤 작업을 수행하는지, 클래스형 컴포넌트와 함수형 컴포넌트의 차이에 대해 학습한 내용을 공유합니다.LifeCycleMountUpdateUnmount클래스형(Class) vs 함수형(Function) 컴포넌트 비교정리회고LifeCycle컴포넌트의 생성, 갱신, 소멸 과정을 단계별로 관리하는 React 동작 흐름React는 LifeCycle를 기반으로 컴포넌트의 동작을 관리합니다.이를 통해 각 시점에 필요한 로직(데이터 불러오기, 정리 작업, 이벤트 등록/해제 등)을 수행할 수 있습니다.LifeCycle은 크게 아래와 같은 과정으로 구성됩니다.생성(Mount)갱신(Update)소멸(Unmount)Mount컴..

이 글에서는 React의 State의 개요와 동작 원리, 최소 사용 기준과 이유 등을 정리 후 공유합니다.State사용 방법State의 비동기적 처리State 최소화 전략정리회고State컴포넌트 내부에서 소유하고 관리하는 동적 데이터State는 부모가 내려주는 Props와 달리, 컴포넌트 스스로가 가진 내부 상태입니다.컴포넌트가 mount → unmount 되는 생명주기 동안 메모리에서 유지되며, 시간의 흐름, 사용자 입력, 이벤트 등 다양한 상호작용 트리거에 의해 값이 교체(업데이트)되고 UI를 다시 렌더링하도록 React에 요청할 수 있습니다.즉 컴포넌트가 직접 소유하면서도, 상태 변경에 따라 UI를 동적으로 제어하기 위해 사용됩니다.사용 방법useState Hook을 사용해 선언하고, 함께 제공되는..

이 글에서는 React의 Props, Props Drilling가 무엇인지, 이를 해결하기 위해 어떤 방법이 있는지 다루며, 리스트 렌더링 식에는 Key를 어떤 기준으로 부여해야하는지에 대해 학습한 내용을 공유합니다.PropsReact에서 Props의 역할Props Drilling리스트 요소 식별자: Key정리회고Props부모 컴포넌트에서 자식 컴포넌트로 단방향 전달되는 불변 데이터Props는 객체 형태로 전달되며, 자식 컴포넌트의 매개변수를 통해 사용할 수 있습니다.컴포넌트 재사용 및 유연한 UI 구성을 위해 사용됩니다. 일반적으로 부모 컴포넌트가 리렌더링 될 경우, 자식 컴포넌트도 리렌더링 됩니다.이를 해결하기 위해서는 props를 얕은 비교하거나 React.memo를 사용하는 등 불필요한 렌더링 최..

이 글에서는 React의 Component 기반 설계 방식, 단방향 데이터 흐름, 컴포넌트 분리 기준, 리스르 렌더링과 key의 역할 등에 대해 학습한 내용을 공유합니다.Component특징단방향 데이터 흐름 (One-way Data Flow)Presentational Container Component사용 방법: 컴포넌트 생성사용 방법: 상태/컴포넌트 전달사용 방법: 전달 받은 상태/컴포넌트 사용이벤트 함수 전달조건부 렌더링리스트 표현회고Component입력(props)을 기반으로 UI(JSX)를 반환하는 React UI 설계의 최소 단위React에서는 컴포넌트(Component)기반의 아키텍처와 개발을 지향합니다.JSX 문법을 사용해 컴포넌트를 정의하고 JSX 내에서 태그처럼 호출하는 방식으로, 재사..