기능 기반 React 구성 요소

React는 React 서버 구성요소와 서버 액션을 갖춘 풀스택 프레임워크로 거듭나고 있습니다. RSC(React Server Components)를 사용하면 데이터베이스에서 UI의 데이터를 읽을 수 있지만 서버 작업을 사용하면 데이터를 데이터베이스에 다시 쓸 수 있습니다. 확실히 소규모 애플리케이션에서는 UI와 데이터베이스가 가깝고 단순하겠지만, 대규모 애플리케이션에서는 수직적 기능이 의도치 않게 얽혀 복잡해지기 마련입니다.

여기에서는 대규모 애플리케이션을 구축하고 유지 관리할 수 있는 기능 기반 아키텍처를 React에서 만드는 방법에 대해 논의하고 싶습니다. 기능 기반 아키텍처에서는 각 기능이 다른 기능과 최대한 분리됩니다. 이렇게 하면 구성 요소와 데이터 가져오기 기능을 해당 도메인에 집중할 수 있습니다.

기능 기반 React 구성요소

일반적인 애플리케이션에는 서로 관련된 여러 테이블이 있는 데이터베이스가 있습니다. 예를 들어, 블로그 애플리케이션에는 사용자 테이블, 게시물 테이블 및 댓글 테이블이 있을 수 있습니다. 게시물 테이블에는 사용자 테이블에 대한 외래 키가 있을 수 있고, 댓글 테이블에는 사용자 테이블과 게시물 테이블 모두에 대한 외래 키가 있을 수 있습니다.

단순화를 위해 사용자 테이블을 고려하지 않고 게시물과 댓글의 관계를 살펴보고 이것이 아키텍처에 어떤 영향을 미치는지 살펴보겠습니다.

모델 포스트 {
id 문자열 @id @default(cuid())
제목 문자열
콘텐츠 문자열
댓글 댓글[]
}

모델 코멘트 {
id 문자열 @id @default(cuid())
콘텐츠 문자열
게시물 게시물 @relation(필드: [postId], 참조: [id])
postId 정수
}

React 구성 요소 구조에는 게시물과 해당 댓글을 렌더링하는 Post 구성 요소가 있을 수 있습니다. 서버 구성 요소인 Post 구성 요소는 다음과 같을 수 있으며 데이터베이스에서 게시물과 해당 댓글을 가져옵니다.

'@/features/post/queries/get-post'에서 { getPost } 가져오기;

const Post = async ({ postId }: { postId: string }) => {
const post = getPost(postId)를 기다립니다;

반품(

<>{post.title}

{게시물.내용}

{post.comments.map((댓글) => (
• {댓글.내용}
))}

);
}

그러나 구성 요소에 집중하기 위해 Post 구성 요소를 두 개의 구성 요소, 즉 게시물 자체를 렌더링하는 Post 구성 요소와 댓글을 렌더링하는 Comments 구성 요소로 분할하는 것이 좋습니다. 각 구성 요소를 단일 기능에 집중하므로 깔끔한 기능 기반 아키텍처를 적용할 수도 있습니다.

'@/features/comment/comComponents/comments'에서 { 댓글 } 가져오기;
'@/features/post/queries/get-post'에서 { getPost } 가져오기;

const Post = async ({ postId }: { postId: string }) => {
const post = getPost(postId)를 기다립니다;
복귀(

<>{post.title}
<>{post.content}
댓글{post.comments}
/>

);
}

구성 요소를 더 작은 구성 요소로 분할하는 것은 많은 이점을 제공하는 모범 사례입니다. 여기서는 기능 아키텍처와 기능을 최대한 분리하여 자체 기능 폴더의 각 파일을 단순화하는 방법에 중점을 두고 싶습니다.

출처

위 내용은 기능 기반 React 구성 요소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!