728x90 300x250 SMALL 전체 글1117 VS Code 탭 간격 설정 변경 방법 1. File > Preferences > Settings (macOS에서는 commend + , 키) 2. Commonly Used에서 스크롤을 좀 내리면 Tab Size가 나온다. 여기서 "2"로 바꿔보자 3. VSCode에서는 설정 화면에서 변경된 내용을 setting.json파일에 저장해 놓는다.단축키 Ctrl + Shift + P(macOS는 Commend + Shift + P)를 눌러 나타난 검색 화면에 User Settings 입력Preferences:Open User Settings(JSON) 선택 4. 다음과 같이 탭사이즈의 변경된 내용을 확인할 수 있다. 2025. 2. 10. React에서 하위 컴포넌트 간 상태 공유하는 방법 하위 컴포넌트에서 State 공유하기하위 컴포넌트에서 부모 컴포넌트의 상태를 공유하거나, 상위 컴포넌트와 상태를 주고받는 경우에는 상태를 위로 끌어올리거나(Lifting State Up) Context API와 같은 방법을 사용해 상태를 관리할 수 있다.1. 상태를 부모 컴포넌트로 올려서 공유하기(Lifting State Up)React에서 Lifting State Up(상태 끌어올리기)은 부모 컴포넌트에서 상태를 관리하고, 그 상태를 하위 컴포넌트에 props로 전달하는 방법이다.예시 : 상위 컴포넌트에서 하위 컴포넌트로 상태 전달하기// 부모 컴포넌트 (Parent)import React, { useState } from 'react';function Parent() { // 부모 컴포넌트에서 상태.. 2025. 2. 9. Redux 완벽 가이드 : 개념, 사용법, 예제코드 Redux의 개념Redux는 React애플리케이션에서 상태(state)를 중앙에서 관리하는 전역 상태 관리를 위한 JavaScript 라이브러리이다.상태를 한 곳에서 관리하면 여러 컴포넌트가 같은 데이터를 쉽게 공유할 수 있다. 기본 개념Store : 상태가 저장되는 곳이다. 하나의 애플리케이션에 하나의 Store가 존재 한다.Action : 상태에 변화를 일으키는 '이벤트'를 위미한다. 예: 버튼 클릭, 데이터 요청 등Reducer: 상태를 업데이트 하는 함수이다. Action을 받아서 새로운 상태를 반환한다.Dispatch: Action을 Store에 전달하는 방법이다Redux의 기본 흐름(두 가지 방식)Redux에서 액션을 사용하여 상태를 업데이트하는 방법에는 두 가지 방식이 있다.직접 객체로 di.. 2025. 2. 8. Context API 상태 관리 : 쉽게 이해 하기 Context API란?React에서 컴포넌트 간 상태를 공유할 때 가장 일반적인 방법은 props를 사용하는 것이다. 하지만 컴포넌트 구조가 깊어지면 Props Drilling(중첩된 컴포넌트에 계속해서 props를 전달하는 문제)이 발생할 수 있다.이를 해결하기 위해 Context API를 사용하면, 부모 → 자식 → 손자 컴포넌트로 직접 props를 전달하지 않고 전역으로 상태를 공유할 수 있다.Context API의 역할공통 상태를 한 곳에 저장Provider를 통해 트리 구조의 모든 컴포넌트에 데이터 제공데이터가 필요한 하위 컴포넌트에서 useContext를 통해 쉽게 접근Context API의 핵심 개념Context 생성 : createContext()를 사용해 컨텍스트를 만든다.Provide.. 2025. 2. 7. 이전 1 2 3 4 ··· 280 다음 728x90 반응형 LIST
