props in React

첫 번째 코드는 React 컴포넌트인 Main을 정의하며, 두 번째 코드는 이 컴포넌트를 사용하는 방법을 보여줍니다. 이 두 코드는 함께 작동하여 웹사이트의 주요 콘텐츠 영역을 감싸는 역할을 합니다.

Main 컴포넌트 분석

Main 컴포넌트는 props를 인자로 받는 함수형 컴포넌트입니다.

const Main = (props) => {
    return (
        <main id="main" role="main">
            {props.children}
        </main>
    )
}

• props: 이 컴포넌트가 부모로부터 전달받는 모든 속성(properties)을 담고 있는 객체입니다.
• <main>: HTML5의 의미론적 태그로, 웹 페이지의 주요 콘텐츠를 나타냅니다.
• id="main" & role="main": 이 컴포넌트의 유일한 식별자와 역할을 명시하여 웹 접근성(Accessibility)을 높입니다.
• {props.children}: 이 부분이 가장 중요합니다. props.children은 <Main> 컴포넌트의 여는 태그와 닫는 태그 사이에 있는 모든 내용을 렌더링하도록 지시합니다. 이 덕분에 Main 컴포넌트는 어떤 콘텐츠든 유연하게 담을 수 있는 컨테이너 역할을 하게 됩니다.

---

Main 컴포넌트 사용법 분석

<Main>
    <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/wordgame' element={<Wordgame />} />
    </Routes>
</Main>

이 코드는 <Main> 컴포넌트를 실제로 사용하는 예시입니다. 여기서 props에 해당하는 부분은 <Main> 태그 내부에 있는 <Routes> ... </Routes> 전체입니다.

1. <Main> 컴포넌트가 렌더링됩니다.
2. 이때, <Main> 컴포넌트의 자식 요소인 <Routes> 컴포넌트와 그 내부의 <Route>들이 props.children으로 Main 컴포넌트에 전달됩니다.
3. 결과적으로, Main 컴포넌트는 <main id="main" role="main"> 태그 내부에 <Routes> ... </Routes>를 렌더링합니다.

이 구조는 페이지의 레이아웃과 콘텐츠를 분리하여 관리하는 데 매우 효율적입니다. Main 컴포넌트는 모든 페이지에 공통적으로 적용되는 메인 영역의 뼈대 역할을 하고, <Routes>는 URL 경로에 따라 다른 컴포넌트(Home, Wordgame 등)를 동적으로 표시하는 역할을 수행합니다.

Substantiv: Requisiten