전체 글 썸네일형 리스트형 [React] reducer에 관하여. React에서 reducer는 상태 관리를 위한 중요한 개념입니다. Redux 라이브러리에서 유래했지만, React의 useReducer Hook을 통해 React 자체에서도 사용할 수 있게 되었습니다. Reducer의 주요 역할과 특징을 설명해드리겠습니다.상태 관리:Reducer는 애플리케이션의 상태를 관리합니다. 특히 복잡한 상태 로직을 다룰 때 유용합니다.예측 가능한 상태 변화:Reducer는 현재 상태와 액션을 받아 새로운 상태를 반환하는 순수 함수입니다. 이는 상태 변화를 예측 가능하고 일관되게 만듭니다.중앙화된 상태 로직:여러 컴포넌트에 걸쳐 사용되는 복잡한 상태 로직을 한 곳에서 관리할 수 있게 해줍니다.디버깅 용이성:상태 변화가 reducer 함수 내에서 일어나기 때문에, 상태가 어떻게 변.. 더보기 [React] React에서 전역변수는 어떻게 쓸까? React에서는 전역 상태를 관리하기 위해 일반적인 전역 변수를 사용하는 대신, 더 구조화된 방법을 사용하는 것이 좋습니다. 전역 상태 관리에는 주로 다음과 같은 도구와 패턴이 사용됩니다:Context API와 useContext 훅상태 관리 라이브러리 (예: Redux, MobX)React Query (데이터 페칭 및 캐싱)Local Storage나 Session Storage (브라우저의 저장소 사용)각 접근 방식을 살펴보겠습니다.1. Context API와 useContext 훅React의 Context API는 전역 상태를 관리할 때 유용합니다. Context는 컴포넌트 트리 전체에서 데이터를 전달할 수 있게 해줍니다.예제: 간단한 전역 상태 관리import React, { createContex.. 더보기 [React] JavaScript의 이벤트와 useEffect와 비교. JavaScript의 이벤트 실행과 React의 useEffect는 서로 다른 개념이지만, 둘 다 특정 작업을 트리거하는 방법을 제공합니다. 두 개념을 구분하기 위해 각각을 자세히 살펴보겠습니다.JavaScript의 이벤트JavaScript의 이벤트는 사용자 상호작용 또는 특정 시스템 이벤트에 응답하여 코드를 실행하는 메커니즘입니다. 예를 들어, 클릭, 키보드 입력, 폼 제출, 페이지 로드 등이 이벤트에 해당합니다. 이벤트 리스너를 사용하여 특정 이벤트가 발생할 때 실행할 코드를 정의할 수 있습니다.예제: 이벤트 리스너 사용 Click Me 위 예제에서는 버튼 클릭 이벤트가 발생할 때마다 경고 창을 표시합니다. 이는 이벤트 리스너를 사용하여 특정 이벤트를 감지하고 처리하는 방식입니다.React.. 더보기 [React] 전역변수와 useContext 비교 useContext는 React에서 컨텍스트(Context) API와 함께 사용되는 훅으로, 컴포넌트 트리 전체에서 데이터를 공유할 수 있게 해줍니다. 이는 전역 변수를 사용하는 것과 유사한 점이 있지만, 더 구조적이고 React 컴포넌트 생명주기에 잘 통합된 방법을 제공합니다.useContext와 전역 변수의 비교전역 변수전역 변수는 애플리케이션의 어디서든 접근할 수 있는 변수입니다.JavaScript에서는 window 객체에 변수를 추가하여 전역 변수를 만들 수 있습니다.전역 변수를 사용할 때는 모든 컴포넌트가 직접 접근하고 수정할 수 있어 데이터의 추적과 관리가 어렵습니다.// 전역 변수 예제window.globalValue = 42;function Component() { console.log(.. 더보기 [React] useEffect 에 대하여 useEffect는 React의 함수형 컴포넌트에서 사이드 이펙트(side effects)를 처리하기 위해 사용하는 훅(hook)입니다. 사이드 이펙트란 컴포넌트의 렌더링 이외에 수행되어야 할 작업들을 의미합니다. 예를 들어, 데이터 가져오기(fetching data), 구독(subscription), DOM 조작 등이 사이드 이펙트에 해당합니다.기본 사용법useEffect 는 컴포넌트가 렌더링될 때마다 특정 작업을 수행하게 합니다. 기본 형태는 다음과 같습니다:import React, { useEffect } from 'react';function MyComponent() { useEffect(() => { // 여기에 사이드 이펙트를 처리하는 코드를 작성 console.log('컴포넌트가.. 더보기 [React] state 에 대한 설명. JavaScript에서의 "state" 개념은 특히 React와 같은 프레임워크에서 매우 중요합니다. 상태는 컴포넌트의 데이터를 관리하고, 이 데이터가 변할 때 컴포넌트를 다시 렌더링하여 사용자 인터페이스를 업데이트합니다. 이를 통해 사용자와의 상호작용이 자연스럽고 동적인 웹 애플리케이션을 만들 수 있습니다.React에서의 State1. 컴포넌트와 StateReact 애플리케이션은 여러 개의 컴포넌트로 구성됩니다. 각 컴포넌트는 독립적인 UI 조각으로, 자신만의 상태(state)를 가질 수 있습니다. 상태는 컴포넌트 내부에서 선언되며, 그 컴포넌트의 데이터를 보유하고 관리합니다. 2. 상태의 선언상태는 두 가지 주요 방법으로 선언됩니다:클래스 컴포넌트함수형 컴포넌트 (React 훅 사용)클래스 컴포넌트:.. 더보기 [Oracle] 오라클 테이블 정보 확인 쿼리 프로젝트 자주 쓰이게 될 테이블 정보 확인 쿼리입니다. 이것저것 볼거 없이, 한방 쿼리로 구성되어 있습니다. 도움이 되셨으면 좋겠습니다.SELECT C.COLUMN_ID AS SEQ /* 테이블 컬럼 순서 */ ,A.OWNER ,A.TABLE_NAME AS TABLE_ID /* 테이블 ID */ ,B.COMMENTS AS TABLE_NM /* 테이블 명 */ ,C.COLUMN_NAME AS COLUMN_ID /*컬럼 ID */ ,D.COMMENTS AS COLUMN_NM /*컬럼 명 */ ,C.DATA_TYPE /*컬럼 데이터 타입 */ ,C.NULLABLE /*컬럼 필.. 더보기 [React] React Hook이란? React Hook은 React 16.8 버전에서 도입된 기능으로, 함수형 컴포넌트에서도 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있게 해줍니다. 예전에는 클래스형 컴포넌트에서만 이런 기능들을 사용할 수 있었는데, Hook 덕분에 함수형 컴포넌트에서도 이를 사용할 수 있게 되었습니다.왜 Hook을 사용할까요?함수형 컴포넌트는 간결하고 이해하기 쉽다는 장점이 있습니다. 하지만 상태를 관리하거나 특정 시점에 작업을 수행하고 싶을 때는 클래스형 컴포넌트를 사용해야 했습니다. Hook을 사용하면 이런 제약 없이 함수형 컴포넌트에서도 상태 관리와 생명주기 메서드를 사용할 수 있습니다.Hook의 종류1. useStateuseState 는 상태를 관리할 때 사용하는 Hook입니다. 상태란 쉽.. 더보기 이전 1 ··· 7 8 9 10 11 12 다음
