# contextAPI

29개의 포스트

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개의 댓글
post-thumbnail

Redux 대신 Context API?

Context API는 Redux와 같은 상태 관리 도구이다.Redux와 다르게 React에서만 사용할 수 있다.Redux와 다르게 여러 저장소가 존재할 수 있다.Context API는 크게 전역 상태가 저장되는 context, 전역 상태를 제공하는 Provider,

2021년 9월 2일
·
0개의 댓글
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일
·
6개의 댓글
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

ContextAPI를 이용한 로그인 상태 관리

이번 포스팅에서는 React Router와 ContextAPI를 이용해서 로그인 된 사용자에게만 제한된 페이지를 볼 수 있게끔 코드를 작성해보자. 😊

2021년 2월 14일
·
2개의 댓글
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개의 댓글