# contextAPI

57개의 포스트

context API 로 전역상태 관리하기

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

7일 전
·
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개의 댓글
·

ContextAPI 사용하기

ContextAPI를 사용하여 추가적인 라이브러리 설치없이 전역 상태를 관리할 수 있다.

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

Compound Components Pattern 을 이용해서, Form Component 리펙토링 하기

Form 컴포넌트를 Compound Component Pattern을 사용해서 리펙토링 해보자 리펙토링을 하는 이유 예시) 예를 들어, form 을 만들면서 disabled 값을 input 에 넣었을 때, input 과 관련된 label button 들도 모두

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

[개발일지] 22년 32주차 - contextAPI와 기획

최종 프로젝트가 시작이 되었다. 벌써? 시작한 지 얼마 되지 않은 거 같은데 참 시간이 빠르다. 캠프에서 리액트부터 리액트 쿼리, 리덕스까지. 혼자 공부할 때는 닿을 수 없는 속도로 많은 것들을 공부했다.

2022년 8월 14일
·
0개의 댓글
·
post-thumbnail

21일차)[React/JS] 글로벌스테이트(global state)

글로벌스테이트(Global state) > 하나의 state가 여러 페이지에서 필요한 경우, 매번 props로 나눠주기 번거롭기 때문에 여러 컴포넌트에 사용되는 Global State가 필요함 store에 name이라는 state를 저장해두고 필요한 컴포넌트에

2022년 8월 4일
·
0개의 댓글
·
post-thumbnail

7/12 17일차

오늘은 리코일을 공부했다.공부했는데.. 공부해도 잘 모르겠다..

2022년 7월 13일
·
1개의 댓글
·
post-thumbnail

useContext + ContextAPI를 공부해보자..

리액트는 여러개의 컴포넌트로 이루어져있다. 최상위의 App컴포넌트에서 트리를 형성하는데, 리액트의 데이터 흐름은 위에서 아래로 즉, 부모컴포넌트에서 자식컴포넌트로 props를 통해 전달이 된다.Props를 사용 할 때는, 부모컴포넌트가 자식컴포넌트 태그에 일일히 pro

2022년 6월 29일
·
1개의 댓글
·
post-thumbnail

React ContextAPI

React ContextAPI 이해하기

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

[React,ReactNative] Context API

리액트에서 서로 다른 두 컴포넌트에 같은 데이터가 필요하다고 할 때, 컴포넌트가 부모자식 관계로 되어있지 않다면 컴포넌트 간의 직접적인 데이터 전달은 어렵다. 데이터를 자식 컴포넌트로 보내고, 다시 그 데이터를 필요한 컴포넌트로 전달해야한다. 하지만 이렇게 Prop이

2022년 6월 25일
·
0개의 댓글
·
post-thumbnail

Private Route 설정하기 (Context API)

프로젝트 페이지는 아래와 같이 구성되어 있다.이 중 Home과 Sign in 페이지를 제외한 나머지 Search, My list, My page는 로그인 후 이용 가능하므로 private route 설정이 필요하다.이전에는 App.js에서 login status를 받아

2022년 6월 13일
·
0개의 댓글
·

Search Page (Context API 사용의 잘못된 예)

Search page는 기존에 팀 멤버인 R이 담당했던 부분이다. 사용자 input 값(도서명 또는 저자명)을 SearchBar에서 받아와서 Google Books API query에 전달하고, 그 결과값을 Search Widget에서 렌더링하는 구조이다. 여기서 R은

2022년 6월 12일
·
0개의 댓글
·
post-thumbnail

React | React.Context 를 활용한 전역 상태 관리

특정 컴포넌트에서의 state 변화를 전역상태에 저장해두고,필요한 컴포넌트에서 사용 하는 것이다. 전역상태관리를 사용하지 않는 경우, 특정 컴포넌트에서의 state 변화를 다른 컴포넌트에게 전달하기 위해 여러차례 props를 전달해야함 (이를 props drilling

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

Context API 와 useMemo warning

다양한 컴포넌트로 이루어진 제어컴포넌트에서 prop drilling이 발생하고 있었고 이를 해결하기 위해서 제어 컴포넌트 내에서 context API 를 활용해서 이 문제를 해결하려고 했다.예를 들어, AddCard 컴포넌트 하위의 CardForm 컴포넌트가 있고 그

2022년 5월 15일
·
0개의 댓글
·