insu90 님의 블로그

React Router를 사용하면 SPA(Single Page Application) 개발에서 라우팅을 손쉽게 관리할 수 있습니다. 이번 포스팅에서는 React Router의 부가 기능들을 활용하여 페이지 이동, 스타일링, 그리고 리다이렉션을 구현하는 방법을 알아보겠습니다.1. useNavigate 훅으로 페이지 이동useNavigate는 Link 컴포넌트를 사용하지 않고 프로그래밍 방식으로 페이지를 이동할 때 사용하는 훅입니다.예제: 이전 페이지와 정보 페이지로 이동 버튼 추가아래 코드는 useNavigate 훅을 활용하여 버튼 클릭 시 페이지를 이동시키는 방법을 보여줍니다.import { Link, Outlet, useNavigate } from "react-router-dom"; // Link: 경..

1. 라우터 설정 (BrowserRouter)리액트 앱에서 라우터를 사용하려면 react-router-dom 라이브러리를 설치하고, 앱을 감싸는 BrowserRouter를 설정해야 합니다. 이를 통해 브라우저의 주소와 페이지를 동적으로 매핑할 수 있습니다.c:\javascript\my-cra-app> npm install react-router-domimport React from 'react'; // React 라이브러리 임포트import ReactDOM from 'react-dom/client'; // ReactDOM 라이브러리 임포트import './index.css'; // 스타일시트 임포트import App from './App'; // App 컴포넌트 임포트import reportWeb..

React에서는 상태를 전역적으로 관리하고, 여러 컴포넌트 간에 데이터를 쉽게 공유할 수 있는 방법을 제공합니다. 그 중 하나가 Context API입니다. Context API를 사용하면, 상태를 부모 컴포넌트에서 자식 컴포넌트로 props로 전달하지 않고도, 전역적으로 데이터를 관리하고 사용할 수 있습니다.이번 포스트에서는 테마를 전역 상태로 관리하는 예제를 통해 useContext 훅을 사용하는 방법을 소개합니다. Context API 사용법Context 생성: React.createContext()를 사용하여 Context 객체를 생성합니다.Provider 정의: Context.Provider를 사용하여 하위 컴포넌트들에게 값을 제공(전달)합니다.Context 소비: useContext 훅을 사용..

React 애플리케이션에서 성능 최적화는 중요한 부분입니다. 컴포넌트가 자주 리렌더링되면 불필요한 계산이 반복되어 성능에 영향을 미칠 수 있습니다. 이를 방지하기 위해 useMemo, useCallback, React.memo와 같은 성능 최적화 도구를 활용할 수 있습니다. 이 글에서는 이 세 가지 방법을 다루며, 각 방법이 어떻게 성능을 최적화하는지 구체적인 예시와 함께 설명하겠습니다. 1. useMemo: 불필요한 연산 방지useMemo는 값을 메모이제이션(memoization) 하여, 특정 값이 변경될 때만 재계산되도록 합니다. 주로 계산 비용이 높은 작업이나 렌더링 중 자주 호출되는 함수에 유용합니다.import { useRef, useState, useMemo } from "react";// A..

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

이전 글에서 Axios와 JQuery를 통해 국가와 국기 정보를 출력한 적이 있습니다.이번에는 국가명과 국기 정보를 API를 통해 가져와서 화면에 출력하는 리액트 앱을 작성하는 방법을 알아보겠습니다. 우리는 axios를 사용하여 데이터를 가져오고, 이를 리액트 컴포넌트에서 효과적으로 처리하는 방법을 설명할 것입니다. 이 예제에서는 restcountries.com API를 사용하여 국가명과 국기 정보를 받아옵니다. 1. axios 모듈 설치먼저 axios 모듈을 설치해야 합니다. axios는 HTTP 요청을 보내고 응답을 처리할 수 있는 JavaScript 라이브러리입니다.터미널에서 다음 명령어를 실행하여 axios를 설치합니다:npm install axios 2. 국기 정보 출력하기국가와 국기 정보를 출..

React의 함수형 컴포넌트에서 useRef는 매우 유용한 훅입니다. 주로 DOM 요소에 직접 접근하거나, 렌더링에 영향을 주지 않는 값을 관리할 때 사용됩니다. 이번에는 useRef의 기본 사용법과 이를 활용한 예제들을 다뤄 보겠습니다.useRef란 무엇인가?useRef는 기본적으로 객체를 반환하는 훅입니다. 이 객체는 current라는 속성을 가지며, 이 속성에 값을 저장할 수 있습니다. useRef는 값을 변경해도 컴포넌트가 다시 렌더링되지 않기 때문에, 렌더링에 영향을 주지 않고 값이나 DOM 요소를 계속 추적할 수 있습니다.useRef의 주요 사용 사례DOM 요소 접근useRef는 함수형 컴포넌트에서 DOM 요소를 직접 접근하고 조작할 수 있게 해줍니다.렌더링에 영향을 주지 않는 값 추적상태(u..

React는 함수형 컴포넌트에서도 클래스형 컴포넌트에서 제공하던 상태 관리 및 라이프사이클 기능을 사용할 수 있도록 Hooks를 도입했습니다. 이번 블로그 글에서는 useState와 useEffect 훅을 사용하여 상태 관리와 사이드 이펙트를 처리하는 방법을 설명하고, 이를 통해 실용적인 예제를 구현해보겠습니다.1. useState: 상태 관리React에서 함수형 컴포넌트는 상태(state)를 관리하기 위해 useState 훅을 사용합니다. useState는 상태 변수의 초기값과 이 값을 업데이트할 수 있는 함수를 반환합니다. 형태는 아래와 같습니다.const [ 상태변수의 초기값, 상태변수의 값을 변경하는 함수 ] = useState;예제: 사용자 이름과 별명을 관리하는 컴포넌트먼저, 사용자 이름과 별..

React에서 컴포넌트는 생성, 업데이트, 소멸이라는 세 가지 주요 라이프사이클 단계가 있습니다. 각 단계마다 호출되는 특정 메서드가 있으며, 이를 적절히 활용하면 컴포넌트의 동작을 보다 세밀하게 제어할 수 있습니다.이번 포스트에서는 React 클래스형 컴포넌트에서 라이프사이클 메서드를 어떻게 사용하고, 이를 통해 부모 컴포넌트로부터 전달된 데이터를 자식 컴포넌트가 어떻게 처리하는지 살펴보겠습니다.1. componentDidMount 메서드componentDidMount는 컴포넌트가 처음 렌더링된 후 한 번 호출됩니다. 이 메서드는 주로 API 요청이나 비동기 작업을 처리하는 데 유용하게 사용됩니다.예제: 부모 컴포넌트로부터 전달된 글자색을 자식 컴포넌트에서 반영하기LifecycleSample.js (자..

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