본문 바로가기

웹/React

Context

반응형

Context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다.

일반적인 React 애플리케이션에서 데이터는 위에서 아래로 props를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우 이 과정이 번거로울 수 있습니다. context를 이용하면, 트리 단계마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이 값을 공유하게 할 수 있습니다.

언제 Context를 써야 할까

context는 React 컴포넌트 트리 안에서 전역적인 데이터를 공유할 수 있도록 고안된 방법입니다. 그러한 데이터로는 현재 로그인한 유저, 테마, 선호하는 언어 등이 있습니다. 예를 들어, 아래의 코드는 버튼 컴포넌트를 꾸미기 위해 테마 props를 명시적으로 넘겨주고 있습니다.

context를 사용하기 전에 고려할 것

context를 사용하면 컴포넌트를 재사용하기가 어려워지므로 꼭 필요할 때만 쓰세요. 해당 Context가 없이는 재사용이 어렵습니다.

반응형

' > React' 카테고리의 다른 글

setTimeout을 취소할 때 useRef를 쓰는 이유  (0) 2023.08.16