<div id="readability-page-1" class="page"><div id="root"><div><p>평소에 컴포넌트/파일를 꽤나 잘게 쪼갠다는 이야기를 듣는다.<br>
사실 크게 잘게 쪼개지는 않는데, 팀원들에 비해 잘게 쪼개는 듯 하다.</p>
<p>내가 쪼개는걸 선호하는 이유는</p>
<ul>
<li>가독성이 개선된다. (주관적인기준)<ul>
<li>하나의 파일에서 500줄이상 넘어가면 가독성을 해친다고 생각한다.</li>
<li>하나의 파일에는 최대한 연관된 코드들만 존재하도록 한다.<ul>
<li>예를들어 .tsx 에는 컴포넌트 로직만 담는다.</li>
<li>컴포넌트 로직에서 사용하는 상수값이나 유틸성 함수들은 별도의 파일로 분리한다.</li>
</ul></li>
</ul></li>
<li>협업시 충돌발생확률이 낮다.<ul>
<li>협업을 진행중일 때, 하나의 파일에 코드가 몰아져있고, 그 코드를 동료와 함께 수정하고 있다면 충돌이 자주 발생하고 이를 해결하는데 꽤나 무시할 수 없는 비용이 소요된다.</li>
</ul></li>
<li>애플리케이션의 성능을 향상시킬 수 있다.<ul>
<li>메모이제이션과 같은 기술을 활용하여 리렌더링횟수를 줄일수도있겠지만, 사실 컴포넌트만 잘 분리해두더라도 리렌더링횟수를 줄일 수 있다. props가 변경되는 컴포넌트들만 리렌더링 시키면 된다.</li>
<li>하나의 컴포넌트파일에 모든 코드가 뭉쳐있다면, state가 바뀌었을 때 모든 코드가 재실행된다.</li>
<li>반면 여러개의 자식컴포넌트로 분리해둔다면, 해당 영역의 state가 바뀌면, 해당 영역만 리렌더링 된다.</li>
<li>그리고 이렇게 분리해두면 메모이제이션을 적용하기도 편하다. 자식컴포넌트로 넘어가는 props에 대해서만 메모이제이션을 적용해주면 되니, 메모이제이션을적용하는 기준이 꽤나 명쾌해진다.</li>
</ul></li>
</ul></div><div><p><a href="/@ginameee"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAASbSURBVHgB7Z0tTytBFIYP914BDiQ4cIADB0EhwYFE8ifq7g/hJ2CRSCQ4kOCobF3ruHk3maS5aSnbdnfPOe/7JE0oCTvTnmc+dvbMsNbr9b5M0PLLBDUSgBwJQI4EIEcCkCMByJEA5EgAciQAORKAHAlAjgQgRwKQIwHIkQDkSAByJAA5EoAcCUCOBCBHApAjAciRAORIAHIkADkSgBwJQI4EIEcCkCMByJEA5EgAciQAOX+MhPX1dTs+Prbt7W3b3d21jY2N6ndgPB7bYDCw4XBor6+v9vHxUb1nIL0Ae3t7dn5+XgV9FhABYuC1v79f/Q4SPD8/28vLi2UmrQA/Cfx34O/wwjXu7u7S9gi/z87O/loyELTr62vb2tqyZcFQcXp6Wv2MXiEb6SaBCDwEWDVFqmykEgABOjo6sqbAtbNJkEaAi4uLRoNfQBmXl5eWhRQCIChlnG6Dk5OTVstrkvACYKLXxJg/D5RZ1hEiE14ABGIVs/26IPgZeoHQAiDwbYz7s4AA0XuB0AIsusizKsrycmRCC+Dhyz84OLDIhBUAra/rHgCgDpGHgbAC7OzsmBc81aUuYQXY3Nw0L3iqS13CCtDFrd8sPNWlLsoIIkcCkBNWAE8JGpGTRcIKgPw9L3iqS13CCvD5+Wle8FSXuoQVAJm8HlK0UAfUJSqhJ4Fvb2/WNcgcjkxoAfDld936oieKhhYAwX96erKuwJ6B6Oni4dcBIEAXvQAC//j4aNEJLwCC30UgUGaGzSIpVgLRC7Q5FKCsLFvG0iwFPzw8tBIUlIGyspDqWcD9/X2jEuDaKCMT6R4GIUBNzAlwzWzBByl3ByNYaK23t7dLP6vHfT6u9/7+bhlZ6/V6X5YYpI0jebRu/mD2wBfSHxCBngAv9ASQ4PDwsErhwvvJE0JGo1EV9H6/72KFsS1SCDAZyFngnh2vVUwSUV4WQUILULZnlR06aMGYqDW1QDN56khZho6+Ghh2DoBgXF1dTZ3koZWvcqWubECdtg0NZUQ+QiakAGjxOA9gHhABj4wXeWyMHgX5/j85Zwi9AXoeD4+n6xJOAASk7nbwkjyCGT0meXg/mcWDYOMsIJwShtaO3mWRHT/odaINCaHmAIsEHyCQOP6tHAHXFKVukSQIsxK4aPDbBnWMdG5ACAHwhUYIfgHzEwwjEXAvQFdHwCzLzc1NiC1jrgXA2I31/Ijbr1HnCEfKuRagq/N/VgXuJLzPB9wKgMBnOITJu8RuBUDXnwHvQ4FLAbDkGrnr/x8MBV7vClwKEHHWPw+vn8mdANlaf8FrL+BOgIytv+Dxs7kSAC0kY+sveOwFXAnQ5bGvbdH0A6m6uBLAw8GPTePtaFk3AmTv/gtYF/A0DLgRgKH1Fzx9VjcCIBuHBU89nRsBkKrFgqfNJm5SwpBGVc7fz/CvWKZRUsk9bS1PvzVMfI+OiiVHApAjAciRAORIAHIkADkSgBwJQI4EIEcCkCMByJEA5EgAciQAORKAHAlAjgQgRwKQIwHIkQDkSAByJAA5EoAcCUCOBCBHApAjAciRAORIAHIkADkSgBwJQI4EIOcfGjV2tEfztqEAAAAASUVORK5CYII=" alt="profile"></a></p><div><p>오늘 먹은 음식도 기억이 안납니다. 그래서 모든걸 기록합니다.</p></div></div><div><h4>0개의 댓글</h4></div></div></div>

ginameee.log

Jangchun Lee

평소에 컴포넌트/파일를 꽤나 잘게 쪼갠다는 이야기를 듣는다.
사실 크게 잘게 쪼개지는 않는데, 팀원들에 비해 잘게 쪼개는 듯 하다.
내가 쪼개는걸 선호하는 이유는
가독성이 개선된다. (주관적인기준)
하나의 파일에서 500줄이상 넘어가면 가독성을 해친다고 생각한다.
하나의 파일에는 최대한 연관된 코드들만 존재하도록 한다.
예를들어 .tsx 에는 컴포넌트 로직만 담는다.
컴포넌트 로직에서 사용하는 상수값이나 유틸성 함수들은 별도의 파일로 분리한다.
협업시 충돌발생확률이 낮다.
협업을 진행중일 때, 하나의 파일에 코드가 몰아져있고, 그 코드를 동료와 함께 수정하고 있다면 충돌이 자주 발생하고 이를 해결하는데 꽤나 무시할 수 없는 비용이 소요된다.
애플리케이션의 성능을 향상시킬 수 있다.
메모이제이션과 같은 기술을 활용하여 리렌더링횟수를 줄일수도있겠지만, 사실 컴포넌트만 잘 분리해두더라도 리렌더링횟수를 줄일 수 있다. props가 변경되는 컴포넌트들만 리렌더링 시키면 된다.
하나의 컴포넌트파일에 모든 코드가 뭉쳐있다면, state가 바뀌었을 때 모든 코드가 재실행된다.
반면 여러개의 자식컴포넌트로 분리해둔다면, 해당 영역의 state가 바뀌면, 해당 영역만 리렌더링 된다.
그리고 이렇게 분리해두면 메모이제이션을 적용하기도 편하다. 자식컴포넌트로 넘어가는 props에 대해서만 메모이제이션을 적용해주면 되니, 메모이제이션을적용하는 기준이 꽤나 명쾌해진다.

2023.01.25

댓글