🏗️Structure

Context폴더의 기본적인 규칙입니다.

컨텍스트 구조와 역할 분리

컨텍스트 내에서 사용되는 함수 (Handler), 상태 (State), 그리고 사이드 이펙트 (Effect)는 각각 별도의 모듈로 hooks 폴더 안에서 정의됩니다. 이런 역할 분리는 각각의 컴포넌트 역할을 명확히 구분하고 각 역할을 쉽게 수정하거나 확장할 수 있도록 하는 데에 도움을 줍니다.

global-context-structure

컨텍스트의 폴더 구조는 기본적으로 동일하며, 컨텍스트를 사용하는 위치에 따라 폴더의 경로만 변경됩니다.

전역 컨텍스트 src/context

e.g. src/contexts/global/useGlobalStoreContext.ts

페이지 컨텍스트 container/context

e.g. src/containers/Home/context/useHomePageContext.ts

지역 컨텍스트 component/[container]/context

e.g. src/components/Home/components/ContextColorPicker/context/useSubExampleContext.ts

때로는 컴포넌트의 특정 범위 내에서만 사용되는 지역 컨텍스트도 필요할 수 있습니다. 지역 컨텍스트는 해당 컴포넌트 또는 그 하위 컴포넌트에서만 유효한 상태 및 함수를 관리하기 위해 사용됩니다. 이렇게 하면 컨텍스트의 범위를 더 세분화하여 컴포넌트 간의 상호작용을 더욱 잘 제어할 수 있습니다. 이 경우 컨텍스트의 구조는 여전히 유지되며, 컨텍스트를 사용하는 위치에 따라 폴더 경로만 조정됩니다. 이를 통해 코드의 구성을 체계적으로 유지하면서 필요한 범위에서 컨텍스트를 활용할 수 있습니다.