# contextAPI

45개의 포스트
post-thumbnail

useContext + ContextAPI를 공부해보자..

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

2022년 6월 29일
·
0개의 댓글
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개의 댓글
post-thumbnail

리액트 적응기 - contextAPI

Context 객체를 생성하는 방법은 아래와 같다.defaultValue에는 실제 Provider의 value에 넣는 객체의 형태와 일치시켜주는 게 좋다.Context 코드를 볼 때 내부 값이 어떻게 구성되어있는지 파악하기 쉽고, 실수로 Provider를 사용하지 않았

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

React_08) Context API로 전역 상태관리하기

Context API로 값,상태 전역관리하기

2022년 5월 2일
·
0개의 댓글
post-thumbnail

[React]Context api, redux, mobx, swr

React React에서는 전역상태를 관리하는 라이브러리들이 상당히 존재합니다. 제일 유명한 상태관리 라이브러리로는 Redux(리덕스)라는 라이브러리가 존재합니다.하지만 이 Redux 를 포함한 여러가지의 상태관리 라이브러리가 존재하는데 오늘은 그것을 알아보려고 합니다

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

블로그 API 클라이언트와 연결하기 -3-

로그인 유지 / 로그아웃 / 포스트작성 페이지 만들기

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

블로그 API 클라이언트와 연결하기 -2-

회원가입과 로그인 / useRef / Context API - Action,Reducer 작성하기 / 중복요청에러 / 에러메세지 접근하기

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

[ReactJS] 전역 상태 관리 도구 Context API

Context API > state를 전역으로 관리해서 props로 내려주지 않아도 어떤 컴포넌트에서든 사용하고 관리가 가능하도록 하는 전역 상태 관리 도구. Context 설정하기 context.js App.js test.js

2022년 3월 31일
·
0개의 댓글
post-thumbnail

Context API

생활코딩 Context API 강의전역으로 공유해주기 위해 context 생성 =>import { createContext } from 'react' const themeDefault = { border '10px solid red' } const themeContex

2022년 3월 29일
·
0개의 댓글

context api란?

일반적으로 부모와 자식간 props를 날려 state를 변화시켰던 react 방식과는 달리context api는 컴포넌트 간 간격이 없다.즉, 컴포넌트를 건너띄고 다른 컴포넌트에서 state, function을 사용할 수 있다.

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

props, Context API, constate, Redux, Recoil

수업시간에 context API에 관해 배우면서 조금 더 명확하게 정리하고 싶었다.그리고 Redux가 생각보다 현업에서 많이 사용되지않고, 다른 라이브러리가 더 흥할것이라는 글을 보며 그 이유에 대해서도 알고싶어 글을 적게 되었다. React에서 컴포넌트가 많아지면

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

[React] Context API 사용하기

프로젝트 내에서 환경 설정, 사용자 정보와 같은 전역적으로 필요한 상태를 관리해야 할 때 사용한다.리액트 애플리케이션은 컴포넌트 간에 데이터를 props로 전달하기 때문에 여기저기서 필요한 데이터가 있을 때는 주로 최상위 컴포넌트인 App의 state에 넣어서 관리한다

2021년 12월 26일
·
0개의 댓글

Context API - 사용법

props 연속으로 사용하는게 싫다면, Redux나 Context API를 활용하면 된다.그럼 props 전송 없이도 하위 컴포넌트들 끼리 state 값들을 똑같이 공유할 수 있다.export 키워드는 변수나 함수 선언 왼쪽에 붙일 수 있습니다.그럼 다른 파일에서 im

2021년 11월 28일
·
0개의 댓글
post-thumbnail

React | ContextAPI 이렇게 써보자

어느날 구글링을 하다가 어떠한 글을 보았다.Context API는 왜 안쓰나요?ContextAPI를 쓰는 글쓴이에게 굉장히 관심이 가는 글이었고, 내용을 결론은 소규모 프로젝트에서는 ContextAPI가 좋지만 성능 때문에 추천하지는 않다이다.물론 저 글을 쓰신 분은

2021년 10월 10일
·
0개의 댓글