본문 바로가기

프론트엔드7

랜더링 웹 페이지를 브라우저에 표시하기 위해 HTML, CSS 및 JavaScript를 해석하고 실행하여 사용자가 볼 수 있는 형태로 변환하는 과정을 랜더링이라고 합니다 2024. 5. 12.
<Route element={<Container />}> {/* 공통 컨테이너 적용 */} }>  {/* 공통 컨테이너 적용 */}     } />  {/* 메인 경로 */}     } />  {/* 'about' 경로 */}     } />  {/* 'contact' 경로 */}      위의 예시에서는 가 공통적인 요소로 사용됩니다. Routes 안에서 }>로 여러 경로를 감싸면, Container 내부에 여러 경로의 컴포넌트가 렌더링됩니다.Home, About, Contact 등의 컴포넌트가 각 경로에서 렌더링되지만, 공통적으로 의 레이아웃을 공유합니다.이렇게 하면 코드 재사용이 용이하고, 애플리케이션의 레이아웃을 중앙 집중화할 수 있습니다. 2024. 5. 9.
인터페이스 tsx에 뿌리기 인터페이스는 TypeScript에서 객체나 구조체의 모양을 정의하는 방법입니다. `Props`라는 인터페이스는 이름이 "Props"이며, 이 안에 `commentListItem`이라는 이름의 항목이 있습니다. 이 항목은 어떤 다른 객체를 가리키는데, 그 객체는 `CommentListItem` 타입이어야 한다는 뜻입니다. 간단하게 말해: - `Props`는 "이런 모양을 가진 데이터가 필요하다"라고 설명하는 청사진 같은 것입니다. - `commentListItem`은 `Props`에 있는 항목(필드)이고, 어떤 데이터(객체)를 가리킵니다. - `CommentListItem`은 그 데이터가 어떤 구조를 가져야 하는지 알려줍니다. 여기서 중요한 것은: - `Props`는 컴포넌트(React 같은)에서 사용하는.. 2024. 5. 8.