# contextAPI

70개의 포스트
post-thumbnail

[React] Context API

상태관리는 리액트에서 state(= 상태) 데이터를 효율적으로 관리하는 것을 말합니다. 리액트는 상태(state)의 전달을 단방향(부모 -> 자식)으로만 받기때문에 트리구조로 얽힌 컴포넌트 구조에서는 props들이 어디서부터 내려온 것인지 알기가 어렵게 됩니다.이 현상

어제
·
0개의 댓글
·

Props Drilling의 해결 : Context API

Context API란 무엇일까요? Context API란 전역 상태 관리를 하기 위해서 사용합니다. 먼저 기존 리액트에서 Context API와 Redux와 같은 상태 관리 라이브러리가 없을 때 어떻게 최상위 컴포넌트와 최하단 컴포넌트가 데이터를 주고 받는지 생각해볼

2023년 4월 16일
·
0개의 댓글
·

Learn 상태 관리 라이브러리

ContextAPI, Redux, MobX, SWR는 상태 관리 라이브러리 혹은 패턴으로 React 프레임워크에서 사용되는 대표적인 상태 관리 방법이다.(State)Context API는 React에서 기본적으로 제공하는 상태 관리 방법 중 하나이다. Context A

2023년 4월 13일
·
0개의 댓글
·
post-thumbnail

ContextAPI 를 이용한 다크모드

Context API를 이용한 다크모드 구현 방법

2023년 3월 29일
·
0개의 댓글
·
post-thumbnail

개인 프로젝트 - 게시판

개인프로젝트 - 게시판만들기

2023년 3월 24일
·
0개의 댓글
·
post-thumbnail

Context API

더욱 쉽게 컴포넌트간 props 를 전달하는 방법

2023년 2월 6일
·
0개의 댓글
·
post-thumbnail

[전역상태관리] Context API vs Recoil

벌써 세 번째 쓰는 전역상태관리 관련 블로그!플레이어 프로젝트를 어떻게 하면 컴포넌트화 해서 재활용을 쉽게 할 수 있을까란 고민을 하던 중, 플레이어 자체를 전역에 두고 빼서 쓰면 프로젝트 내에서 상태 공유도 쉽고 하나의 모듈처럼 옮겨다닐 수 있지 않을까란 생각이 들었

2023년 2월 6일
·
0개의 댓글
·

[React] Context API

리액트에서는 보통 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때속성값을 이용합니다.간단한 구조에서는 이 방법으로 충분하지만 구조가 복잡하다면 번거로워지고 관리가 힘들어지게 됩니다.그러나 Context API를 이용하면 컴포넌트의 중첩 구조가 복잡하더라도 비교적

2023년 1월 13일
·
0개의 댓글
·
post-thumbnail

1/11 - TIL (Context API)

현재까지의 파일 계층 구조는 위와 같다 onRemove, onEdit 함수는 실제로 해당 파일에서 사용하지 않지만 props로 내려주기 위해 존재하고 있다 props drilling 을 막기 위해 등장한 것이 context API 이다 context API 모든 데이터를 가지고 있는 컴포넌트가 Provider 라는 공급자에게 데이터를 넘겨준다 공급자는...

2023년 1월 11일
·
0개의 댓글
·
post-thumbnail

[Refactoring] 프론트엔드의 AuthService에 Class, Context API, Custom hook을 첨가하여 객체 지향적으로 만들기

객체 지향 관점을 프론트엔드에 도입해보자 1. 데이터와 로직을 Class로 추출 2. Class의 method를 Context API로 컴포넌트에서 공유 3. 컴포넌트단의 복잡한 로직을 커스텀 훅으로 추출

2023년 1월 9일
·
0개의 댓글
·

[React] Context API

일반적으로 React는 상위→하위(상속) 컴포넌트로만 props를 전달할 수 있음 (자식→자식(근친), 자식→부모(패륜) 불가능 하다고 했음!) 내 포스팅 : \[React] Props,Statecontext API를 이용하면 각 단계마다 명시적으로 props를 넘겨주

2023년 1월 4일
·
0개의 댓글
·
post-thumbnail

React | ContextAPI

react는 16.3 버전부터 정식적으로 ContextAPI를 지원하고 있다.일반적으로 부모와 자식간 props를 전달해 state를 변화시키는 것과는 달리 ContextAPI는 컴포넌트 간 간격이 없다.즉, 컴포넌트를 건너뛰고 다른 컴포넌트에서 state, funct

2022년 12월 30일
·
0개의 댓글
·

context API 로 전역상태 관리하기

일반적인 React 애플리케이션에서 데이터는 위에서 아래로 (즉, 부모로부터 자식에게) props를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우 (예를 들면 선호 로케일, UI 테마) 이 과정이 번거로울 수 있습니다. conte

2022년 11월 23일
·
0개의 댓글
·
post-thumbnail

[React] Context API 사용하기

App컴포넌트에서 모든 데이터를 Provider 컴포넌트에 내려주면 Provider 컴포넌트는 그 데이터를 자식 컴포넌트에게 다이렉트로 전달해줄 수 있습니다.Provider컴포넌트의 자식 컴포넌트들은 Context 하에 존재합니다. (Redux의 스토어 Provider

2022년 10월 19일
·
0개의 댓글
·
post-thumbnail

[꼭꼭] Context API 잘 사용해보기

우아한테크코스 내부의 쿠폰 문화 (커피챗과 유사한)를 온라인으로 가져가고 있는 꼭꼭 프로젝트는 코치와 크루, 크루와 크루 간의 대면 만남을 유도하고자 쉬운 쿠폰의 관리, 사용을 목적으로 프로덕트를 개발하고 있습니다.안녕하세요. 우아한테크코스에서 프론트엔드 개발자로 꼭꼭

2022년 9월 26일
·
0개의 댓글
·
post-thumbnail

Context API [REACT]

컨텍스트 생성데이터 Set 하는 방법1.컨텍스트를 생성2.컨텍스트.프로바이더 사용3.value를 사용데이터 Get 하는 방법1 (Consumer)1.컨텍스트를 가져온다2.컨텍스트.컨슈머를 사용한다3.value를 사용한다.데이터 Get 하는 방법2 (Functional)

2022년 9월 12일
·
0개의 댓글
·

snackBar with ContextAPI

우선 ContextAPI는 무엇인가? 보통 ContextAPI와 전역 상태관리 라이브러리를 많이 비교한다. 사실이 두 개는 같은 비교군이 아니다. ContextAPI를 전역 상태 관리 툴이라고 오해할 수 있지만 Context는 실제로 아무것도 관리하지 않는다. 단순

2022년 9월 9일
·
0개의 댓글
·

contextAPI 주의점

랑try catch문에서 이 두 함수를 같은 함수 레벨에서 써야한다. 둘 중 하나라도 다른 레벨에 있으면 하면 작동이 안된다....이상 뻘 짓...

2022년 9월 1일
·
0개의 댓글
·
post-thumbnail

React 기초 정리 8편

오랜만에 돌아왔습니다.이렇게 오랜 시간 걸린 이유는....회사가 바빴습니다..현재 진행중인 프로젝트 마감기간도 얼마 안남았고...새로운 팀장님의 컨벤션에 맞춰서 작업을 하다보니..적응시간도 오래 걸리고...여튼 그랬습니다.이제라도 좀 꾸준하게 포스팅을 해볼까합니다.이제

2022년 8월 31일
·
0개의 댓글
·