> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/react/react-study/react-2/compound-component-pattern/context.md).
# 컴파운드 컴포넌트 context 사용하기
```javascript
import React, { useContext, useState } from 'react'
import { AccordionContext } from '../../context/Accordion'
import { Wrapper, Item, Head, Body } from './Accordion.style'
const Accordion = function Accordion({ children, ...restProps }) {
return {children}
}
Accordion.Item = function AccordionItem({ children, ...restProps }) {
const [answerShow, setAnswerShow] = useState(false)
const changeShow = () => {
setAnswerShow(!answerShow)
}
const changeClose = () => {
setAnswerShow(false)
}
return (
- {children}
)
}
Accordion.Head = function AccordionHead({ children, ...restProps }) {
const context = useContext(AccordionContext)
const { changeShow, changeClose } = context
return (
{children}
)
}
```