React10 router React에서 Router는 페이지 간의 이동과 URL에 따른 컴포넌트 렌더링을 관리하는 기능을 제공합니다. 일반적으로 React 애플리케이션은 단일 페이지 애플리케이션(SPA)이므로, 페이지를 이동할 때 새로고침 없이 다른 컴포넌트를 로드해 사용자 경험을 개선할 수 있습니다. 이를 위해 React Router 라이브러리를 사용하여 URL 경로에 따라 다른 컴포넌트를 렌더링하도록 설정합니다.React Router의 주요 개념React Router는 페이지 라우팅을 위해 필요한 다양한 컴포넌트와 기능을 제공합니다. 가장 기본적인 기능은 경로(path)와 이에 맞는 컴포넌트 매핑을 통해 URL에 따라 페이지가 변경되는 것입니다.React Router 설치React Router를 사용하려면 react-rout.. 2024. 11. 11. state, useState State와 useState는 React에서 컴포넌트 내부의 상태를 관리하기 위한 중요한 개념입니다. State는 컴포넌트의 데이터나 UI 상태를 저장하고, 상태 변경에 따라 컴포넌트가 다시 렌더링되도록 만듭니다.1. State란?State는 React 컴포넌트가 내부적으로 유지해야 하는 동적인 데이터를 의미합니다. State가 변경되면 React는 해당 컴포넌트를 다시 렌더링하여 UI를 업데이트합니다. 예를 들어, 사용자 입력값, API 응답, UI의 활성화 상태 등 다양한 값들을 state로 관리할 수 있습니다.State는 주로 함수형 컴포넌트에서 useState 훅을 통해 선언되고 관리됩니다.2. useState란?useState는 React의 훅 중 하나로, 함수형 컴포넌트에서 state를 관리할.. 2024. 11. 11. Hook Hook은 React 16.8 버전에 추가된 기능으로, 함수형 컴포넌트에서 상태(state)와 라이프사이클 메서드 기능을 사용할 수 있게 해주는 함수입니다. 이전에는 클래스형 컴포넌트에서만 상태와 라이프사이클을 사용할 수 있었지만, Hook의 등장으로 함수형 컴포넌트에서도 이러한 기능을 활용할 수 있게 되었습니다.주요 Hook 종류와 설명useState:컴포넌트 내에서 상태를 관리할 수 있게 해주는 Hook입니다.useState는 상태 변수와 상태를 갱신하는 함수 두 가지를 반환합니다.import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return ( You .. 2024. 11. 11. Context API Context API는 React에서 컴포넌트 간에 데이터를 전역적으로 공유할 수 있게 해주는 기능입니다. 일반적으로 React에서는 부모에서 자식 컴포넌트로 데이터를 props로 전달하지만, Context API를 사용하면 props를 거치지 않고도 여러 컴포넌트에 쉽게 접근할 수 있는 전역 데이터를 생성할 수 있습니다. 이 기능은 트리 구조가 깊은 컴포넌트들 간에 데이터를 공유해야 할 때 특히 유용합니다.Context API의 주요 개념과 사용법Context 생성 (React.createContext):createContext 함수를 사용해 새로운 Context를 만듭니다. 생성한 Context에는 기본값을 설정할 수 있습니다.import React, { createContext } from 'rea.. 2024. 11. 11. props React에서 props는 컴포넌트 간에 데이터를 전달하기 위해 사용하는 객체입니다. 부모 컴포넌트가 자식 컴포넌트에게 데이터나 함수, 설정값 등을 전달할 때 주로 사용됩니다. "props"는 properties의 약자로, 컴포넌트의 속성처럼 생각할 수 있습니다.※ props는 데이터 타입이 아닙니다. props는 React 컴포넌트에 전달되는 데이터를 가리키는 속성으로, 부모 컴포넌트가 자식 컴포넌트에 전달하는 값을 담는 JavaScript 객체입니다.1. Props의 개념데이터 전달: React의 컴포넌트는 기본적으로 고립되어 있으나, props를 통해 부모-자식 간 데이터 전달이 가능합니다.불변성: props는 전달받은 컴포넌트에서 수정할 수 없고 읽기 전용입니다. 이는 컴포넌트가 예측 가능하게 동.. 2024. 11. 11. React Event Handling React Event Handling은 React에서 사용자 인터페이스와 상호작용하는 이벤트를 처리하는 방법을 의미합니다. React에서는 브라우저의 DOM 이벤트와 유사한 방식으로 이벤트를 처리하지만, 몇 가지 중요한 차이점과 특징이 있습니다.주요 특징CamelCase 이벤트 이름:React에서는 DOM 이벤트 이름과 달리 CamelCase로 이벤트 프로퍼티를 작성합니다.예: onclick 대신 onClick, onmouseover 대신 onMouseOver함수로 이벤트 핸들러 전달:이벤트 핸들러로 함수를 전달하며, 문자열로 전달하지 않습니다.예: Click MeSyntheticEvent:React는 자체적으로 SyntheticEvent라는 래퍼 이벤트 시스템을 사용합니다.이는 브라우저 간의 호환성을 .. 2024. 11. 11. 이전 1 2 다음