Coding Note

ReactNode는 React에서 렌더링할 수 있는 모든 요소의 타입을 의미합니다.React에서 반환할 수 있는 모든 JSX 요소, 문자열, 숫자, 배열, null, undefined, boolean 등을 포함하는 최상위 타입이라고 보면 됩니다.ReactNode의 정의import { ReactNode } from "react";ReactNode는 다음과 같이 정의됩니다:type ReactNode = | ReactElement // JSX 요소 (컴포넌트) | string // 문자열 | number // 숫자 | boolean // true, false (렌더링되지 않음) | null // 렌더링되지 않음 | undefined // 렌더링되지 ..

React Router를 사용할 때, navigate와 Link 모두 페이지 경로를 이동하는 데 사용됩니다. 하지만 언제, 어떻게 사용하는지에 따라 각기 다른 기능과 목적을 가집니다. 이 글에서는 navigate와 Link의 차이점과 실제 예시를 통해 각각의 용도를 이해해보겠습니다.1. navigate와 Link의 기본 개념navigate: React의 useNavigate 훅을 통해 사용되며, 프로그래밍 방식으로 경로를 변경할 때 사용됩니다. 예를 들어, 특정 조건이 충족되었을 때 자동으로 특정 경로로 이동하게 만들 수 있습니다.Link: React Router의 Link 컴포넌트는 사용자 인터페이스 내에서 클릭 가능한 링크를 생성합니다. 사용자가 특정 페이지로 쉽게 이동할 수 있도록 링크 버튼 또는 ..

useEffect와 useRef는 리액트에서 자주 사용되는 훅으로, 각각 컴포넌트의 생명 주기를 관리하고, DOM 요소나 변수의 참조를 유지하는 데 도움을 줍니다. 1. useEffectuseEffect는 리액트 함수형 컴포넌트에서 "사이드 이펙트(side effects)"를 처리할 수 있도록 도와주는 훅입니다. 사이드 이펙트란 API 호출, 데이터 가져오기, 수동으로 DOM을 조작하는 작업 등을 의미합니다.기본 문법:useEffect(() => { // 여기에 실행할 코드 작성 }, [dependencyArray]);useEffect의 매개변수 설명첫 번째 매개변수: 콜백 함수로, useEffect가 호출될 때 실행되는 함수입니다.두 번째 매개변수: 의존성 배열(dependencyArray)..

두 방식의 차이점createBrowserRouter 및 RouterProvider 방식:React Router v6.4 이상에서 도입된 새로운 라우팅 설정 방식입니다.라우트 설정을 코드 상단에서 객체 배열로 구성하여 라우트를 정의합니다.RouterProvider는 이 라우트 객체를 받아서 라우트 관리와 탐색 흐름을 더 구조화된 방식으로 설정할 수 있게 해줍니다.더 큰 규모의 애플리케이션에서는 라우트 데이터를 더 쉽게 관리할 수 있는 장점이 있습니다.HashRouter 또는 BrowserRouter와 Routes, Route 방식:React Router v6 이하 또는 전통적인 라우팅 구현 방식에서 주로 사용되던 방식입니다.Routes 컴포넌트 내부에 여러 Route 컴포넌트를 중첩하여 라우트를 정의합니다..

React의 라이프사이클 메서드는 원래 클래스 컴포넌트에서만 지원되었지만, React Hook이 도입된 이후 함수형 컴포넌트에서도 라이프사이클 기능을 구현할 수 있게 되었습니다.함수형 컴포넌트에서 라이프사이클 구현 방식함수형 컴포넌트는 useEffect Hook을 사용해 다양한 라이프사이클을 구현할 수 있습니다. useEffect는 클래스 컴포넌트의 라이프사이클 메서드인 componentDidMount, componentDidUpdate, componentWillUnmount 등의 역할을 함수형 컴포넌트에서 수행할 수 있게 해줍니다.주요 라이프사이클 비교라이프사이클 메서드 | 클래스 컴포넌트 방식 | 함수형 컴포넌트 방식 (useEffect)컴포넌트 마운트 시componentDidMountuseEffec..

리듀서 함수(reducer function)는 상태(state)와 액션(action)을 입력으로 받아 새로운 상태를 반환하는 순수 함수입니다. 이 함수는 주로 상태 관리 라이브러리인 Redux나 React의 useReducer 훅에서 사용되며, 상태 관리의 핵심적인 역할을 합니다.  리듀서 함수는 두 가지 주요 입력을 받습니다.현재 상태 (state): 현재의 애플리케이션 상태를 나타내는 객체입니다.액션 (action): 상태를 변경하기 위해 발생하는 이벤트로, 주로 type과 payload로 구성됩니다. type은 어떤 종류의 상태 변경이 일어날지 설명하며, payload는 그 변경에 필요한 데이터를 담고 있습니다.리듀서 함수는 이 두 가지 입력을 바탕으로 새로운 상태 객체를 반환합니다. 이 과정에서,..