React - Context

devgosunman·2021년 6월 10일
0

낙서장, Memo

목록 보기
2/2
post-thumbnail

공식사이트의 Context 번역을 기반으로 번역, 의역 그리고 첨언하였습니다.

☘️ 요약

  • 전형적인 리액트 개발에서는 데이터를 위에서 아래로 전달해 줌.
  • 이를 우리는 props라고 함.
  • 그런데 이 방식으로 여러 컴포넌트를 거쳐 전달되는 props는 코드를 더럽게 함.
  • context를 사용하면 component tree를 통하지 않고 한번에 원하는 component로 데이터를 전달할 수 있음.

💡 언제 context를 사용할까?

  • context는 전역 데이터를 전달하기 위해 고안되었음.
  • 예를 들어 유저정보, css 스타일, 설정된 언어 등.

🎁 Context를 사용하기 전에

  • 컴포넌트 재사용성을 떨어뜨리지 않도록 주의해야한다.
  • 그냥 여러번 전달하는 게 귀찮은 거라면 component composition(부모컴포넌트에서 컴포넌트 자체를 만들어서 전달하기)을 써라.

🔑 API

const MyContext = React.createContext(defaultValue);

<MyContext.Provider value={/* some value */}>
profile
자바스크립트와 파이썬 그리고 컴퓨터와 네트워크

0개의 댓글