본문 바로가기
반응형

React37

13. 컴포넌트 패턴과 최적화 - 2 렌더 프로퍼티(Render Props) 패턴 소개 렌더 프로퍼티(Render Props) 패턴은 React에서 컴포넌트 간 코드 재사용을 위한 강력한 패턴 중 하나입니다. 이번 글에서는 렌더 프로퍼티 패턴의 개념과 활용 방법에 대해 알아보겠습니다. 렌더 프로퍼티란? 렌더 프로퍼티는 컴포넌트가 렌더링될 때 자식 컴포넌트에게 함수를 전달하는 패턴입니다. 이 함수는 자식 컴포넌트가 실행하고 자신의 결과를 부모 컴포넌트에게 반환합니다. 이를 통해 부모 컴포넌트는 자식 컴포넌트의 동작을 제어하고 상태를 전달할 수 있습니다. 렌더 프로퍼티의 활용 import React from 'react'; // 렌더 프로퍼티를 활용한 컴포넌트 class Mouse extends React.Component { state = {.. 2024. 2. 18.
12. 컴포넌트 패턴과 최적화 - 1 고차 컴포넌트(Higher-Order Component) 패턴 소개 고차 컴포넌트(Higher-Order Component, HOC) 패턴은 React에서 컴포넌트 로직을 재사용하기 위한 강력한 패턴 중 하나입니다. 이번 글에서는 고차 컴포넌트의 개념과 활용 방법에 대해 알아보겠습니다. 고차 컴포넌트란? 고차 컴포넌트는 다른 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 함수입니다. 이 패턴은 컴포넌트의 로직을 재사용하고 컴포넌트 간의 관심사를 분리하는 데 유용하게 활용됩니다. 고차 컴포넌트의 활용 import React from 'react'; // 고차 컴포넌트 생성 함수 function withLoadingIndicator(Component) { return function WithLoading.. 2024. 2. 18.
11. Hooks를 활용한 상태 관리 - 3 기타 사용 가능한 Hooks 소개 (useReducer, useContext 등) React에서는 useState와 useEffect와 같은 기본 훅 외에도 다양한 커스텀 훅을 제공합니다. 이번 글에서는 주요 커스텀 훅 중에서 useReducer와 useContext를 중점적으로 다뤄보겠습니다. useReducer 훅 소개 useReducer 훅은 복잡한 상태 로직을 관리하기 위해 사용됩니다. useState 대신 사용되며, 상태 업데이트 로직을 컴포넌트 외부에서 정의할 수 있습니다. import React, { useReducer } from 'react'; const initialState = { count: 0 }; function reducer(state, action) { switch (acti.. 2024. 2. 18.
10. Hooks를 활용한 상태 관리 - 2 useEffect 훅을 이용한 부수 효과 관리 React 함수형 컴포넌트에서 부수 효과를 다루기 위해 제공되는 useEffect 훅은 매우 강력하면서도 다양한 상황에서 활용될 수 있습니다. 이번 글에서는 useEffect 훅의 핵심 개념과 실제 활용법에 대해 자세히 알아보겠습니다. useEffect 훅 소개 useEffect 훅은 React 컴포넌트의 렌더링 사이에 발생하는 작업을 수행할 수 있게 해주는 특수한 목적의 훅입니다. 주로 데이터 가져오기, 구독 설정, 수동으로 컴포넌트 업데이트 등의 작업을 다룹니다. useEffect 훅의 사용법 useEffect는 컴포넌트가 마운트될 때, 업데이트될 때, 언마운트될 때 등 특정 상황에서 작업을 수행하도록 설정할 수 있습니다. import React, { u.. 2024. 2. 18.
반응형

티스토리툴바