# Context API

hsk10271

러북 팀 프로젝트에 대해 회고한 내용입니다. 오타나 오류가 있으면 댓글로 알려주세용!

yooon26

context Api의 단점과 해결책 폼 태그 사용 시의 렌더링 최적화

velopert

여러분, 리액트로 웹 애플리케이션 개발 하면서 Context API를 어떻게 사용하고 계신가요? 과거에도 관련 포스트를 작성한적이 있긴 하지만, 지난 몇 년간 Context를 사용하면서 습득하게된 팁들을 여러분들에게 공유하면서 튜토리얼을 최신화 해보려고 합니다.

rlatjsdn147

recoil에 대해 얘기하기 전에 atoms 와 selector에 대해 잠시 짚고 넘어가면.atoms : 상태의 단위이며, 업데이트와 구독이 가능하다. 업데이트 되면 각각의 구독된 컴포넌트는 새로운 값을 반영하여 다시 렌더링된다. atoms는 런타임에서 생성될 수도 있

songinho96

context apicontext를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다.일반적인 React 데이터는 위에서 아래로 즉 부모에서 자식으로 props를 통해 전달된다.하지만 여러 컴포넌트에게 전달해줘야한다면

ssalpyo

React 에는 전역상태를 관리하는 여러가지 라이브러리가 존재한다.하나씩 알아보도록 하자.일반적인 React 애플리케이션에서 데이터는 위에서 아래로 (즉, 부모로부터 자식에게) props를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의

sehee-xx

React에서는 전역상태를 관리하는 라이브러리가 다양하게 존재한다. 제일 유명한 상태관리 라이브러리로는 Redux(리덕스)라는 라이브러리가 존재한다. Redux 외에도 여러가지의 상태관리 라이브러리가 존재하는데 그것에 대해 알아보자. 전역상태에 대한 정의 상태관리

jo_cw

5월 30일 배움기록

hsk10271

⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다. Context API리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능이다.리액트 애플리케이션은 컴포넌트 간에 데이터를 props로 전달하기 때문에 컴포넌트

productuidev

일기 쓰기, 수정, 조회 로직, 상태관리, Context

jiaegong

WebRTC 튜토리얼 코드를 찾아보던 중에, useContext라는 것을 발견해서 찾아봤다. 먼저 리액트의 Context API를 사용하면, 프로젝트 안에서 전역적으로 사용할 수 있는 값을 관리 할 수 있다. 단계마다 일일이 props로 넘겨주지 않고도 컴포넌트 트리

mango1004

리액트에서 Props의 전달흐름은 단방향이다.(부모 -> 자식)하지만, 내려보내는 props가 많아지고, 컴포넌트 깊이가 길어지면, 관리가 힘들다.Context API는 컨텍스트 안에 포함괸 모든 레벨에서, props를 전달하지 않고, 어디서든 상태값에 접근 할 수 있

24siefil

리액트를 다루는 기술

hyeun427

context api, redux, mobx, swr

two-vs-han

How to use it? First, create a context using React.createContext().Then this context on the top component allows all the other child components to use

citron03

다크 모드를 구현해볼 생각으로 시작한 토이 프로젝트 입니다.

savin

App.js에서 제목인 <h1> 태그를 Header 컴포넌트로 이동시킨다.시작하기 전에 Form 컴포넌트도 만들어주자. form 태그 부분만 컴포넌트로 구조화 안된 상태여서 매우 거슬림...Form.jsxcomponents 폴더에 Form.jsx 파일을 생성하고

hgb072082

보통 상위컴포넌트에서 하위컴포넌트로 데이터를 전달할 때 pros를 사용한다. 가까운 컴포넌트끼리는 괜찮을 수 있지만 컴포넌트간의 거리가 멀어진다면 props를 정말 많이 내려줘야한다. 큰 프로젝트일수록 컴포넌트마다 props를 거치는 것은 비효율적이므로 이럴때 Cont

kjh2868

지금까지 페이지 컴포넌트에 여러 컴포넌트를 이어서 하나의 결과물를 만들어왔다. 각각 컴포넌트 안에 state를 설정하고 컴포넌트를 이어주기 위해서 props로 데이터를 넘겨주는 방식으로 구성했다.모든 컴포넌트에 동일한 state를 설정하고 싶을 때가 있다. 예를 들어

junejae_1625

특정한 규칙을 가진 문자열의 집합을 표현하는데 사용하는 형식 언어이다.사용법/조건/.test(확인하고자 하는 값)슬레쉬(/) 안에 들어가는 조건안에서의 기호들은 다음과 같은 규칙을 가지고 있다.조건을 알맞게 넣고 .test(확인하고자 하는 값)을 실행한 경웨 해당 조건