# contextAPI

19개의 포스트
post-thumbnail

contextAPI + styled-components 로 재사용 컴포넌트 만들기

CSS-in-JS 관련 React 라이브러리 중에서 가장 인기 있는 Styled Component와 contextAPI를 이용해서 재사용 컴포넌트를 만드는 것을 잘 설명한 유튜브 컨텐츠가 있어 해당 내용을 복기하고자 한다.

2021년 7월 18일
·
0개의 댓글
post-thumbnail

context API로 리액트 상태관리하기

리액트에서는 props만으로 데이터를 전달하기 힘든 상황이 있다. 여러 자식 컴포넌트들이 단계별로 있는데, 아주 여러 레벨을 거친 자식 컴포넌트에서 props를 사용한다거나,, 등등 규모가 큰 프로젝트를 할 때에는 props가 아닌 contextAPI로 상태를 관리한

2021년 7월 16일
·
0개의 댓글
post-thumbnail

React context API 사용법

컴포넌트들이 많아지면 props로 전달해주기가 매우 번거로울 때가 있다그래서 많이 사용 되었던 것이 redux와 mobx 인데 이것들을 사용하지 않고 전역 상태를 관리할 수 있는 ContextAPI에 대해 알아보자contextAPI는 먼저 redux의 store처럼 c

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

Context API 탐험기 - 0

아마 이 글을 보는 많은 분들은 이미 이친구에 대해 아실거라 생각합니다. 굳이 입아프게 state 관리에 대한 이론적인 설명은 생략하도록 하겠습니다 😉 ( 귀찮아서 아님 ㅎ )짧게 말하자면 위에서 나왔듯이 SPA의 State 관리를 위한 라이브러리가 바로 State

2021년 5월 28일
·
0개의 댓글

TIL : classnames(npm), useState 파라미터, contextAPI/useContext, ref 속성 값

React 라이브러리 중 하나로 className을 적용하는데 있어 다양한 옵션을 사용하여 className을 적용할 수 있다.true : 클래스 네임 추가(적용)false : 클래스 네임 삭제(미적용)삼항 연산자를 사용하는 것보다 훨씬 깔끔하게 작성이 가능하다. 자세

2021년 5월 25일
·
0개의 댓글
post-thumbnail

리액트 다크모드 구현하기 feat. styled-components & context API

사용자 경험을 최상으로 이끌어주는 디자인 트렌드 다크모드 UI.애플, 구글, 인스타그램, 페이스북 등 세계적인 브랜드들이 이 다크모드 기능을 애용하기 시작하며 UI/UX에 필수적인 기능 중 하나가 됐습니다. Web frontend 개발자로써 다크모드 기능을 구현하는 것

2021년 4월 9일
·
5개의 댓글
post-thumbnail

Context API 사용하는 방법

오늘은 React에서 제공하는 상태관리 솔루션인 Context API를 해보도록 하겠습니다.이전에 Context API와 Redux의 장단점에 대해서 정리를 해본적이 있는데 그 중에서 Context API에 대해서 한번 알아보도록 하겠습니다! 일단 Context를

2021년 4월 5일
·
0개의 댓글
post-thumbnail

FREITAG- 1차 프로젝트 회고록

FREITAG이 독일어로 금요일이란 뜻인데우리는 그것에 착안하여 화요일이라는 뜻인 DIENSTAG을 팀명으로 결정했다.왜?제일 멋있게 들리는 요일이어서ㅎㅎ프론트엔드 : 2명백엔드 : 3명프론트가 다른팀에 비해 2명이어서 좀 더 일개미처럼 코딩해야 했지만옆에 앉으며 바

2021년 2월 28일
·
6개의 댓글
post-thumbnail

React 상태 관리

React 와 같은 SPA 를 개발할 때, 많은 컴포넌트의 페이지가 생성된다면, 컴포넌트 사이에 데이터 및 메소드의 접근이 매우 복잡해지는 경우가 발생할 수 있습니다.작성하는 입장에서는 물론이고 가독성 면에서도 상당히 떨어지기 때문에, 이를 Global Store 영역

2021년 2월 7일
·
0개의 댓글

[프로젝트 회고] React/ Django SPA Website: #2. Custom Hook / Context API

나의 프로젝트를 어디서나 defense 할 수 있을 때까지!

2021년 1월 8일
·
0개의 댓글
post-thumbnail

[JavaScript] React - context API를 사용하여 전역값 관리하기

React context API를 사용하여 전역값 관리하기 > 우리는 지금까지 자식의 자식의 자식의 컴포넌트에서 부모 컴포넌트에 있는 값을 사용하려면 props의 props의 props로 넘겨받아 사용해왔습니다. 하지만 contextAPI를 사용하여 여러번 prop

2020년 10월 6일
·
0개의 댓글
post-thumbnail

React - TodoList (2)

사용 개념 > styled-components를 통한 컴포넌트 스타일링 (이전 게시글) Context API를 사용한 전역 상태 관리 (이번 게시글!) Context API >* [ 이전 Stae 관리 ] : 상위 컴포넌트에서 하위 컴포넌트로 State를 전달하기

2020년 10월 4일
·
0개의 댓글
post-thumbnail

React-Native TodoList

스무디 한 잔에 끝내는 리액트네이티브 실습 하며 저같은 초보자를 위해 재구성한 자료입니다. 책도 추천드리며 저작권 문재로 이 공간에는 모든 내용을 올리지 못하는 점을 양해 부탁드립니다.

2020년 7월 29일
·
2개의 댓글
post-thumbnail

[React에서 TypeScript사용하기] #4 Context API

velopert님의 벨로그 포스트를 보면서 이번 장에서는 타입스크립로 리액트의 Context API를 활용하는 방법에 대해서 알아보겠습니다. 프로젝트의 Hello, World!라고 할 수 있는 투두리스트를 만들어보면서 배워보죠.먼저, 타입스크립트가 적용된 리액트 프로젝

2020년 7월 17일
·
2개의 댓글

React Hooks #4 useContext()

react 공식문서 Context 살펴보기컨텍스트는 여러게를 만들수 있다(다중스토어)React.createContext에서 반환값으로 <컴포넌트.Provider>로 최상위 컴포넌트를 감싼다.생성 컨텍스트컴포넌트는 export 하여 <컴포넌트.Consumer>

2020년 7월 12일
·
0개의 댓글

React Hooks Redux 와 ContextAPI 비교

<구성>Store : 전역 상태 보관소Reducer : Store에 접근시킴Action : Reducer에 Action을 지시Subscription : Store에 보관된 상태를 가져옴<구성>Context : 전역 상태 보관소Provider : 전역 상태를

2020년 5월 14일
·
0개의 댓글
post-thumbnail

리덕스없이 state 관리하기(hooks+context)

Managing global state without Redux

2020년 4월 9일
·
2개의 댓글

(TIL 16일차) React (5)

React useMemo useCallBack

2020년 2월 13일
·
0개의 댓글
post-thumbnail

REACT #3

contextAPI / ref

2019년 7월 5일
·
0개의 댓글