insu90 님의 블로그

React에서 상태 관리를 더 효율적으로 할 수 있는 훅(Hook) 중 하나가 바로 useReducer입니다. 이 훅은 상태 관리가 복잡해질 때 useState의 대체품으로 유용하게 사용될 수 있습니다. useReducer는 주로 여러 상태 값이나 복잡한 상태 로직을 다룰 때 그 유용성을 발휘합니다.이번 글에서는 useState와 useReducer를 활용한 다양한 상태 관리 예제를 소개하고, 이를 통해 어떻게 상태를 더 깔끔하게 관리할 수 있는지 알아보겠습니다. useState와 useReducer 비교1. useState 사용법useState는 간단한 상태 값을 관리할 때 사용됩니다. 아래 예제는 카운터를 관리하는 간단한 React 컴포넌트입니다.import { useState } from "reac..

이번 포스팅에서는 스크롤 박스 컴포넌트를 구현하고, 버튼을 클릭했을 때 맨 위로 이동과 맨 아래로 이동 기능을 추가하는 방법을 설명하겠습니다. 이 기능은 주로 긴 내용을 표시할 때 사용하며, 사용자가 쉽게 원하는 위치로 이동할 수 있도록 도와줍니다.기본 구현먼저, 스크롤 박스의 기본 구조부터 살펴보겠습니다. 스크롤 박스는 고정된 크기의 박스를 만들고 그 안에 스크롤이 가능한 내용을 추가하는 형태입니다. 이를 위해 div 요소에 overflow: auto 스타일을 적용하여 내용이 넘칠 때 스크롤이 생기도록 합니다.1. ref 디렉토리에 ScrollBox.js 컴포넌트 만들기import { Component } from "react";class ScrollBox extends Component { re..

React는 UI를 구성하기 위한 컴포넌트 기반의 라이브러리입니다. 이번 포스팅에서는 클래스형 컴포넌트와 함수형 컴포넌트의 구조, props(properties)를 사용하는 방법, 그리고 props.children 활용법을 정리하였습니다. 1. 컴포넌트 구조React 컴포넌트는 크게 클래스형 컴포넌트와 함수형 컴포넌트로 나눌 수 있습니다.클래스형 컴포넌트React.Component를 상속받아 작성하며, 반드시 render 메서드가 필요합니다.import { Component } from 'react'; class MyApp extends Component { //리액트 컴포넌트를 상속받아 정의 render() { // 리액트 컴포넌트가 정의한 render 함수 재정의 return (..