# contextAPI

41개의 포스트

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

Context API

컴포넌트간의 데이터를 교환하기 위해서는 props를 이용해야 한다. 그런데 만약에 이런식으로 부모 컴포넌트가 아닌 부모의 부모 컴포넌트로 올라간다던지 자식의 자식 컴포넌트로 데이터를 전달할때에는 전달방법이 귀찮아진다.그림에서 보면 2번만 거치면 되지만 만약에 10번을

2021년 10월 17일
·
0개의 댓글
post-thumbnail

React | ContextAPI 이렇게 써보자

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

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

[POM]NextJS에 Recoil 도입하기

PieceOfMood에서는 새로운 서비스 런칭을 준비하고 있습니다. 기존 서비스를 유지&보수하는 일도 즐거운 일이지만 아무래도 방대한 양의 코드를 모조리 개선해보려고 손을 대는 짓은 선뜻 하지 못할 일이죠. 어찌됐든 새로운 서비스를 처음부터 개발하게 되었으니, 기쁜 마

2021년 10월 9일
·
0개의 댓글
post-thumbnail

フックマスターになりたい (2): ContextAPI + useContext!

리액트에서 데이터는 state와 props로 관리되며, topdown 형태로 데이터를 전달한다는 점은 리액트를 공부하는 사람들이라면 익히 알고 있는 사실이다. 이러한 리액트의 단방향 데이터 흐름 때문에 컴포넌트의 깊이가 깊어지면 props drilling이라는 문제가

2021년 9월 25일
·
0개의 댓글

ContextAPI 알아보기

📘 React공식문서 참고 context를 사용하기 전에 고려할 것 context의 주 용도: 다양한 레벨의 중첩된 많은 컴포넌트에 데이터를 전달하기 위함 주의할 점 : 재사용이 어려워지므로 꼭 필요할 때만 사용해야 한다. 만약, prop을 넘기는 것을 줄이고

2021년 9월 13일
·
0개의 댓글
post-thumbnail

리액트에서의 전역상태관리_Context API

context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다. - 공식문서위의 말처럼 기계적인 props전달 코드를 없앨 수 있는 방법 중 하나다.전역데이터를 공유하는 방법이며 로그인 유저, 테마 등의 데이터를

2021년 9월 10일
·
0개의 댓글
post-thumbnail

Context API

상태관리해주는 리액트 내장 기능.컴포넌트 설계가 깊지 않은경우 복잡한 리덕스를 사용하지 않고도 간단하게 상태관리가 가능함. context를 사용하면 컴포넌트 재사용이 어렵다. Provider의 부모가 렌더링 될 때마다 불필요하게 하위 컴포넌트가 다시 렌더링 되는 문제가

2021년 9월 8일
·
0개의 댓글