[React] Props

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

[React] Component

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