들어가며
저번 게시글에서 컴포넌트의 의존성은 무엇이 있고, 그 중 숨은 의존성 들은 무엇이 있는지 알아보았다.
이번에는 그 정보들을 토대로 어떻게 의존성을 관리할 것인지 알아보자.
해당 포스트는 Youtube 'FEConf Korea' 채널의 '[A3] 컴포넌트, 다시 생각하기_발표자 원지혁님'의 영상을 보고, 정리한 내용입니다. https://youtu.be/HYgKBvLr49c
함께 두기 (Co-locate)
비슷한 관심사라면 가까운곳에 두자! (Keep Locality)
보통 개발을 할 때 많은 방법들로 디렉토리를 구성한다.
어떤 사람은 폴더 하나에 다 넣기도 하고, 어떤 사람은 하나하나 모두 구분하기도 한다.
발표자 원지혁님은 Refactoring 원칙으로 비슷한 관심사는 가까이에 두어야 한다고 설명한다.
비슷한 관심사의 내용들을 같은 파일 안에 넣거나, 같은 폴더 내에 두는 것이다.
이전에 정리했던 의존성 중 특징적 분류를 보며 알아보자.
스타일,로직은컴포넌트안으로 넣자! 📥
특징적 분류인 스타일, 로직, 전역 상태, 리모트 데이터 스키마 가 보여진다.
우선 전역상태의 경우에는, 여러 컴포넌트가 같이 사용하므로 함께 두기가 어려울 것이다.
그렇지만, 스타일이나 로직은 컴포넌트와 함께 두기가 어렵지 않다.
위 내용을 토대로, 스타일과 로직은 컴포넌트 안에 내재시킬 수 있다.
(만약 컴포넌트 코드 자체가 너무 길다면, 동일 폴더 내에 파일을 생성해도 된다.)
그럼
리모트 데이터 스키마는 어떻게 하지? 🤔
우선, API 서버에서 부터 리모트 데이터 스키마가 컴포넌트까지 내려오는 과정을 확인해 보자.
위 사진에서도 알 수 있듯이 루트 컴포넌트 -> 다른 컴포넌트 -> 내 컴포넌트 순으로 값이 내려오는 것을 볼 수 있다.
만약 이처럼 props를 통해 리모트 데이터 스키마를 받게 된다면, 강한 의존성이 생기는 것을 알 수 있다.
(예시는 data 하나만 있지만 실제 개발에서는 훨신 많은 양의 데이터가 존재할 것이다.)
흠.... 그럼 어떻게 해야하지... 🤨
사실 React로 토이 프로젝트나, 실무를 진행해 보신 분들은 이미 방법을 알고 있을 것이다.
하지만, 이제 막 시작하시는 분들의 경우에는 중요한 내용이므로 같이 확인해보자.
리모트 스키마 데이터 다루기
props를 통해서는 id 값만 보내고, 데이터 저장소에서 리모트 데이터 스키마를 가져오자!!
id 값만 받아와 데이터 저장소에서 조회하는 방식으로, 의존성을 많이 줄일 수 있다.
코드를 보며 한번 이해해보자.
// 개선 전 코드
import {ArticleT} from '~/api';
interface Props {
article: ArticleT;
}
export function Something(props:Props) {
return (
<div>
<h1>{props.article.title}</h1>
</div>
);
}
위 코드는 props로 article정보를 모두 받아와서 사용하고 있다.
해당 코드를 아까 말한 id 방식으로 개선해 보자.
// 개선 후 코드
import {useArticle} from '~/store';
interface Props {
articleId: string
}
export function Something(props:Props) {
const article = useArticle(props.articleId);
return (
<div>
<h1>{props.article.title}</h1>
</div>
);
}
개선된 코드는 props로 articleId값만 받아서 useArticle라는 Custom hook를 이용해 article정보를 받아오고 있다.
이렇게만 보더라도 다른 컴포넌트와 의존성이 매우 줄어든 것으로 보여진다.
아하! 데이터들의 id 값을 기준으로 조회해서 사용하면 되는구나! 😀😳😕...
근데 이걸 어떻게 구현하죠?? 😣
보다시피 해당 기능을 구현하는 것은 어렵지 않겠으나, 미리 데이터를 알맞게 정의하는 것이 선행되어야 함을 알 수 있다.
다음 게시글에서는 데이터를 어떻게 정리해야 하는지에 대해 알아 볼 예정이다.
+ 읽어주셔서 감사합니다.
+ 오타, 내용 지적, 피드백을 환영합니다. 많이 해주실 수록 제 성장의 밑거름이 됩니다.