Context : 같은 문맥( 목적 ) 아래에 있는 컴포넌트 그룹에 데이터를 공급하는 기능 사용 이유 리액트 컴포넌트 계층 구조에서 컴포넌트 간에 값을 전달할 때 발생하는 Props Drilling 문제를 해결하기 위해 사용됩니다. → Context 이용 시 단계마다 일일이 Props를 전달하지 않고도 컴포넌트 트리 전역에 데이터를 공급할 수 있어 Props Drilling 문제를 간단하게 해결할 수 있습니다. ContextAPI : Context를 만들고 다루는 리액트 기능으로 createContext, Context.Provider 등이 있습니다. Context 만들기 import React from "react"; const MyContext = React.createContext(defaultVa..

23-24/React.js 1 2024. 1. 5. 10:00

9장 컴포넌트 트리에 데이터 공급하기 Context 상태 변화 코드를 쉽게 분리할 수 있다. Context를 사용하는 이유 'Props Drilling' 문제를 해결하기 위해 Props Drilling : Props는 부모 컴포넌트에서 자식 컴포넌트로 전달되어야 하는데, 때로는 중간에 있는 여러 컴포넌트를 통해 전달되어야 하는 경우가 있다. 이때 발생하는 것이 Props Drilling 문제이다. Context란? 같은 문맥 아래에 있는 컴포넌트 그룹에 데이터를 공급하는 기능 ex) project2의 Body, Sidebar, Main은 모두 "할 일을 관리한다"라는 문맥 아래에서 동작하는 컴포넌트 ContextAPI Context를 만들고 다루는 리액트 기능 Context 만들기 import React..

23-24/React.js 3 2024. 1. 5. 10:00

안녕하세요, 컴퓨터공학전공 개발 소모임 𝘾𝙤𝙧𝙣𝙚𝙧입니다. 코너의 일곱 번째 정기 콘텐츠를 공개합니다! 이번 정기 콘텐츠는 NOMAD의 애자일 프로세스에 대한 이야기인데요, 요즘 자주 들려오는 애자일 개발 방법론에 대해 알아봅시다!

Corner 코너 2022. 3. 2. 13:00

1. 작업환경 준비 프로젝트 생성) $ yarn create react-app learn-redux-middleware 라이브러리 설치) $ yarn add redux react-redux redux-actions counter 리덕스 모듈 작성) ✅ 복습! 모듈이란 Ducks 패턴을 사용해 액션 타입, 액션 생성 함수, 리듀서를 작성한 코드를 말한다! import { createAction, handleActions } from "redux-actions"; //액션타입 정의 const INCREASE = "counter/INCREASE"; const DECREASE = "counter/DECREASE"; //액션 생성 함수 export const increase = createAction(INCREA..

21-22/21-22 리액트 마스터 2022. 1. 24. 18:05