# useContext

robo333

오늘은 CreateContext,useContext의 대한 포스팅을 하려한다.그동안 되게 포스팅 자체가 뜸했는데 다시 이제부터 시작해야겠다.자 먼저 큰 틀로 세가지 개념을 알고있으면 된다.createContext는 React에서 상태 관리를 위한 컨텍스트(Context

ahneun_9

문제점 발생🚨error Command failed with exit code 1. 라는 error 발생문제 해결💡yarn으로 생성된 node_modules 및 lock.json파일 지우기2.yarn 캐시 파일 지우기yarn 재설치 후 시작하기 및 업데이트 후 시작하

jihyun_j

Today I Learned 2023. 11. 10

jhc729

useState는 React의 내장 훅으로, 함수형 컴포넌트에서 상태를 가질 수 있게 한다.이는 클래스 컴포넌트에서의 setState 메서드를 대체하는 역할을 힌디. useState를 사용하면 함수형 컴포넌트 내에서 상태 변수를 선언하고 업데이트할 수 있다.<사용

dhrhghdql

React_memo_useReduce, Immer, useContext

gunho1998

Context API 리액트 컴포넌트간 어떠한 값을 전달할 때 사용하는 방법 중 하나입니다. Props와 같이 어떠한 값을 전달해준다는 부분에선 비슷하다고 할 수 있습니다. 그럼 Context API 를 왜 사용하는걸까? > Context API 의 데이터 전달 방식 중 핵심은 필요한 컴포넌트에서 직접 접근해 값을 가져올 수 있다 라는 것 입니다. ...

tmdgk10

전역상태관리를 위한 API 입니다.createContext : context 생성Consumer : context 변화 감지Provider : context 전달(to 하위 컴포넌트)App.jsxGrandFather.jsxFather.jsxChild.jsxGrandFa

syxxne

context 생성 createContext()는 provider와 consumer 두 개의 리액트 컴포넌트 반환 초기값 설정 X 타입 설정 O createContext 내부에 타입을 설정하는 것은 필수가 아닌 옵션 그러나 명시하는 것이 좋음 consumer 자식 컴

moonyah

useContext는 컴포넌트에서 context를 읽고 구독할 수 있게 해주는 React Hook이다.🍪 컴포넌트의 최상위 레벨에서 사용해야 한다.🍪 context 자체는 정보를 보유하지 않으며, 컴포넌트에서 제공하거나 읽을 수 있는 정보의 종류를 나타낸다.🍪 u

taek2yo

Context를 간단히 알아보고, React에서 Context를 활용하는 훅인 useContext를 알아보자.

sarang_daddy

Data Caching이란 반복적으로 엑세스되는 데이터를 빠르게 사용할 수 있도록 메모리에 일시적으로 저장하는 프로세스를 의미한다. 라이브러리 없이 직접 구현해보자.

seok990301

1. Context 객체의 형태로 전역 데이터를 담는 그릇 출처 https://velog.io/@secho/%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C%EC%9D%98-%EC%A0%84%EC%97%AD%EC%83%81%ED%83

do_dam

리액트로 만든 앱은 여러 개의 컴포넌트로 이루어져 있다. 이 컴포넌트는 최상위 App 컴포넌트로 시작해서 트리 형태로 뻗어나간다.props를 전달할 때는 부모 컴포넌트에서 자식 컴포넌트로 단계별로 전달하게 되는데,이 때 React Context를 활용하면 리액트 앱에서

jsh3418

Context API와 Zustand 예시 코드를 보기만 해도 Zustand를 사용하는 이유를 알 수 있다.사용이 간편하고 초기 세팅(보일러플레이트) 코드가 비교적 적다.위 예시 코드를 보면 확실히 Zustand의 코드가 적고 손쉽게 작성할 수 있다.Context AP

qmflf556

✏️ react 에서 global state 를 다루는 방법중 하나인 useContext 에 대해 알아보자

dy9495

모든 데이터를 가지고 있는 컴포넌트가 Provider라는 공급자 역할을 하는 컴포넌트에게 자신이 갖고 있는 모든 데이터를 전달한다. 이 Provider라는 컴포넌트는 자신의 자손에 해당하는 모든 컴포넌트에게 직통으로 데이터를 전달할 수 있다.Provider 컴포넌트의

kiminn

저번에는 https://velog.io/@kiminn/React-useContext란 를 통해서 useContext에 대해서 알아봤습니다이제 useContext를 사용하여 사용자 입장에서 너무나도 당연해져버린 웹 페이지의 다크 모드 테마를 구현해보겠습니다&lt

kiminn

🍀 useContext 부모가 자식 컴포넌트에게 데이터를 전달하는 과정에서 필요한 컴포넌트에만 전역적인 상태의 값을 전달할 수 있음 (* Props Drilling 해소) => 글로벌 데이터(Theme, Language, User)와 같은 전역적인 데이터 관리에 유용

choisua98

useContext : [공식문서 ] ' context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다. ' 기존 props 를 통한 데이터 전달방식은 부모에서 자식으로 또 그 자식으로 그 자식의 자식으로.

cosmos7

📍 Effect >UI와 직접적인 관련이 없는 것은 side effect라고 부른다. side effect들은 http request 보내기, 브라우저에 데이터 저장하기 등 화면에 UI를 rendering하는 기능 외의 것들을 담당한다. 즉 백엔드와의 통신에서 중요