Category/React6 ReactNode란? ReactNode는 React에서 렌더링할 수 있는 모든 요소의 타입을 의미합니다.React에서 반환할 수 있는 모든 JSX 요소, 문자열, 숫자, 배열, null, undefined, boolean 등을 포함하는 최상위 타입이라고 보면 됩니다.ReactNode의 정의import { ReactNode } from "react";ReactNode는 다음과 같이 정의됩니다:type ReactNode = | ReactElement // JSX 요소 (컴포넌트) | string // 문자열 | number // 숫자 | boolean // true, false (렌더링되지 않음) | null // 렌더링되지 않음 | undefined // 렌더링되지 .. 2025. 3. 10. React Router에서 navigate와 Link의 차이점 이해하기 React Router를 사용할 때, navigate와 Link 모두 페이지 경로를 이동하는 데 사용됩니다. 하지만 언제, 어떻게 사용하는지에 따라 각기 다른 기능과 목적을 가집니다. 이 글에서는 navigate와 Link의 차이점과 실제 예시를 통해 각각의 용도를 이해해보겠습니다.1. navigate와 Link의 기본 개념navigate: React의 useNavigate 훅을 통해 사용되며, 프로그래밍 방식으로 경로를 변경할 때 사용됩니다. 예를 들어, 특정 조건이 충족되었을 때 자동으로 특정 경로로 이동하게 만들 수 있습니다.Link: React Router의 Link 컴포넌트는 사용자 인터페이스 내에서 클릭 가능한 링크를 생성합니다. 사용자가 특정 페이지로 쉽게 이동할 수 있도록 링크 버튼 또는 .. 2024. 11. 14. 리액트 훅 useEffect와 useRef useEffect와 useRef는 리액트에서 자주 사용되는 훅으로, 각각 컴포넌트의 생명 주기를 관리하고, DOM 요소나 변수의 참조를 유지하는 데 도움을 줍니다. 1. useEffectuseEffect는 리액트 함수형 컴포넌트에서 "사이드 이펙트(side effects)"를 처리할 수 있도록 도와주는 훅입니다. 사이드 이펙트란 API 호출, 데이터 가져오기, 수동으로 DOM을 조작하는 작업 등을 의미합니다.기본 문법:useEffect(() => { // 여기에 실행할 코드 작성 }, [dependencyArray]);useEffect의 매개변수 설명첫 번째 매개변수: 콜백 함수로, useEffect가 호출될 때 실행되는 함수입니다.두 번째 매개변수: 의존성 배열(dependencyArray).. 2024. 11. 12. React Router 버전과 구현 스타일에 따른 차이 비교 두 방식의 차이점createBrowserRouter 및 RouterProvider 방식:React Router v6.4 이상에서 도입된 새로운 라우팅 설정 방식입니다.라우트 설정을 코드 상단에서 객체 배열로 구성하여 라우트를 정의합니다.RouterProvider는 이 라우트 객체를 받아서 라우트 관리와 탐색 흐름을 더 구조화된 방식으로 설정할 수 있게 해줍니다.더 큰 규모의 애플리케이션에서는 라우트 데이터를 더 쉽게 관리할 수 있는 장점이 있습니다.HashRouter 또는 BrowserRouter와 Routes, Route 방식:React Router v6 이하 또는 전통적인 라우팅 구현 방식에서 주로 사용되던 방식입니다.Routes 컴포넌트 내부에 여러 Route 컴포넌트를 중첩하여 라우트를 정의합니다.. 2024. 11. 12. React - 함수형 컴포넌트에서 라이프사이클 구현하는 법 React의 라이프사이클 메서드는 원래 클래스 컴포넌트에서만 지원되었지만, React Hook이 도입된 이후 함수형 컴포넌트에서도 라이프사이클 기능을 구현할 수 있게 되었습니다.함수형 컴포넌트에서 라이프사이클 구현 방식함수형 컴포넌트는 useEffect Hook을 사용해 다양한 라이프사이클을 구현할 수 있습니다. useEffect는 클래스 컴포넌트의 라이프사이클 메서드인 componentDidMount, componentDidUpdate, componentWillUnmount 등의 역할을 함수형 컴포넌트에서 수행할 수 있게 해줍니다.주요 라이프사이클 비교라이프사이클 메서드 | 클래스 컴포넌트 방식 | 함수형 컴포넌트 방식 (useEffect)컴포넌트 마운트 시componentDidMountuseEffec.. 2024. 11. 11. React - reducer function 리듀서 함수(reducer function)는 상태(state)와 액션(action)을 입력으로 받아 새로운 상태를 반환하는 순수 함수입니다. 이 함수는 주로 상태 관리 라이브러리인 Redux나 React의 useReducer 훅에서 사용되며, 상태 관리의 핵심적인 역할을 합니다. 리듀서 함수는 두 가지 주요 입력을 받습니다.현재 상태 (state): 현재의 애플리케이션 상태를 나타내는 객체입니다.액션 (action): 상태를 변경하기 위해 발생하는 이벤트로, 주로 type과 payload로 구성됩니다. type은 어떤 종류의 상태 변경이 일어날지 설명하며, payload는 그 변경에 필요한 데이터를 담고 있습니다.리듀서 함수는 이 두 가지 입력을 바탕으로 새로운 상태 객체를 반환합니다. 이 과정에서,.. 2024. 8. 26. 이전 1 다음