133. 컨텍스트를 동적으로 만들기

문자열이나 객체의 값을 전달할 수 없지만 함수는 전달할 수 있다.

컴포넌트 전체에 걸쳐서 context를 이용할 수 있다

state를 관리하고 state를 변경하는 함수를 관리하기 위해서

 

---

 

이제 컨텍스트를 사용하는 좋은 예를 보여드리겠습니다

여기 main 섹션에서는

여전히 onLogout을 통해 logoutHandler를 전달합니다

onLogin을 통해서는 loginHandler를 전달하죠

왜냐하면 이 핸들러들을

로그인 및 홈 컴포넌트에서 직접 사용하기 때문입니다

Login 컴포넌트에서

props.onLogin을 직접 참조하는 것을 볼 수 있습니다

전달하는 게 아니죠

여기서 사용하고 있습니다

Home 컴포넌트에서도 동일합니다

onLogout을 직접 사용하고 있습니다

엄밀히 말하자면, 버튼 컴포넌트에

전달하는 거죠

하지만 이건 순수히 프레젠테이션 컴포넌트라서요

이건 괜찮습니다

버튼 클릭을 항상 onLogout에 바인딩하기 위해서

버튼 내부에 컨텍스트를 사용하고 싶지는 않죠

왜냐하면 그렇게 하면

onLogout을 전달할 필요는 없어지지만

또한

하지만 버튼이 클릭될 때마다 사용자를 로그아웃시키는 것 외의

다른 일은 할 수 없게 됩니다

따라서 이걸 보면 언제 프롭을 사용하고

언제 컨텍스트를 사용할지 알 수 있습니다

대부분의 경우에는

프롭을 사용하여 컴포넌트에 데이터를 전달합니다

프롭은 컴포넌트를 구성하고 그것들을 재사용할 수 있도록 하는

매커니즘이기 때문입니다

따라서 많은 컴포넌트를 통해 전달하고자 하는 것이

있는 경우에만,

그리고 예를 들어 네비게이션처럼

매우 특정적인 일을 하는 컴포넌트,

예를 들어 항상 사용자를 로그아웃시키는 버튼이 있죠,

그런 컴포넌트로 전달하는 경우에만

컨텍스트를 사용하는 게 좋겠죠

프로그래밍에서는 항상 그렇듯이

더 많이 써보면

언제 무엇을 사용할지

자연스럽게 더 확실히 알 수 있을 것입니다