# Context API

joy8417

react-hook-form을 사용할 때 주의해야 할 점은 이런식으로 Input 입력값을 Controller로 감싸야지 제대로 입력값을 받아올 수 있다.페이지 구성, Routes을 보자면 라우팅 된 페이지들을 AuthProvider로 감싸서 로그인 상태인 isLogge

jeong_yooony

상태(state)는 React에서 컴포넌트 내에 관리되는 변수, 즉 변하는 데이터들이다.컴포넌트들은 서로 상태를 공유해야한다.컴포넌트들은 props 형태로 상태를 공유한다.자식 컴포넌트간에는 상태 공유가 불가능하고, 부모 컴포넌트를 통해서만 상태를 공유할 수 있다.컴포

mmmdo21

모달창은 전역상태 하나로 관리할 수 있다

robo333

저번 시간에는 createContext,useContext를 사용한 데이터를 넘겨주는 방법을 공부했다.오늘은 context에서 상태관리를 하는 부분을 공부해보자.먼저 간단한 카운터를 구현하는것이다.아래 코드를 살펴보자.위코드에서 차근차근 설명해보겠다.우리가 contex

wlrmadlwhgdk

계기 > 이번 MatZip 프로젝트를 하면서 지도Api를 사용해 마커를 찍고 마커에 오버레이를 표시해야 하였다. 이 과정에서 코드의 편의를 위해 컴포넌트들을 여러개로 분리하게 되었고, Redux와 Context Api에 대해 전혀 몰랐던 나는 Props가 아닌 전역으로

zndnfjqbd

홈페이지에서 평점을 바꾸고 상세페이지로 진입 후 뒤로가기를 클릭하게 되면, 바뀐 평점 페이지가 아닌 디폴트로 설정해놓은 평점이 반영된 영화리스트가 나옴2번으로 해결해보기로 함 !useReducer를 사용해보고 싶어서 여기서 이용해볼까 하다가 목적이랑 완전이 부합하지 않

jhc729

Context API는 리액트에 내장된 기능으로 Props를 사용하지 않아도 특정 값이 필요한 컴포넌트끼리 쉽게 값을 공유할 수 있게 해 준다.일반적인 React 애플리케이션에서 데이터는 위에서 아래로 (즉, 부모로부터 자식에게) props를 통해 전달되지만, 애플리케

bi-sz

[React Native] Context API 적용해보기

bi-sz

[React Native] 전역 변수 관리 - Context API 알아보기

wotjr294

Context API Challenge 세 개의컴포넌트를 만들고 다음과 같이 구성한다. Navbar.jsx NavLinks.jax(Navbar 내에 위치) Usercontainer.jsx(NavLink 내에 위치) App.jsx 에서 Navbar.js

kimys9295

이번 프로젝트를 하면서 상태관리로 context api를 쓸 일이 있었다.카카오톡 로그인을 진행하면서카카오로부터 받은 인가코드?토큰 과 서버에서 주는 access토큰 , refresh토큰 관리를 위해서 였다.일단 우리는 access토큰을 context api로 관리 하

haryan248

모달은 프론트 개발에 뺴놓을 수 없는 UI 컴포넌트이다. 디자인이 나오면 모달로 다양한 요소들이 배치되어서 나오게 된다. 모달을 구현하는 것 보다는 모달을 어떻게 하면 효율적으로 관리할 수 있는지에 대한 방법을 적어보려고 한다.모달은 react-modal 라이브러리를

cosmos7

Context API 란 부모 컴포넌트가 어떠한 정보(데이터)를 만들고, 자신의 자식 컴포넌트들은 모두 해당 데이터를 사용할 수 있도록 만들어 props를 사용하지 않고 필요한 데이터를 넘겨주며 쉽게 값을 공유할 수 있게 해주는 리액트에 내장된 기능이다.다시 말해, R

gunho1998

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

mary0393

App 컴포넌트 밑으로 다들 어떤 context를 사용하고 싶어.그러면 index.js에서 App 컴포넌트를 context provider로 감싸주면 되겠지?근데 실제로 프로젝트를 하거나 어떤 앱을 만들 때, 전역적으로 관리할 값이 한두개가 아닐거란 말이지. 실제 사용

mary0393

컴포넌트 트리의 깊이(depth)에 관계없이 props를 전달하지 않고도 컴포넌트가 전역 데이터에 접근할 수 있다.context는 전역 데이터를 관리하는 데 사용됨이때 전역적으로 관리하고자 하는 것은 단순히 '상태(값)'뿐만 아니라 함수나 다른 외부 라이브러리 인스턴스

syxxne

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

kong-e

10/16

poooq

React hook form React에서 form의 validation을 도와주는 라이브러리 간단하고 효율적인 방식으로 폼 유효성 검사와 상태 관리를 처리할 수 있게 도와줌 장점 성능최적화 React-Hook-Form은 내부적으로 성능 최적화를 고려하여 설계, 입력

sjkang930

🐾 로그인 정보를 넘겨주기전에 유효성검사 login.js 📌 로그인 성공시 로직 - 리액트에서 로그인 요청 >express는 mysql에서 해당 사용자 있는지 확인 >사용자가 있다면 jwt 토큰 발급하여 react로 전달 >react jwt토큰 저장해놓고