Showing Posts From

8개월

8개월 차, 아직도 컴포넌트 분리를 헷갈리는 이유

8개월 차, 아직도 컴포넌트 분리를 헷갈리는 이유

8개월 차, 아직도 컴포넌트 분리를 헷갈리는 이유 오늘도 코드리뷰에서 혼났다 출근하자마자 슬랙 알림. 심장이 쿵 내려앉았다. "이신입님, 이 컴포넌트 너무 크지 않나요? 분리하면 좋을 것 같은데요." 민수 선배다. 항상 친절하게 말하지만 그게 더 무섭다. 어제 올린 PR이었다. UserProfile.jsx 파일. 300줄짜리. "아... 네네 수정하겠습니다." 일단 답장부터. 그리고 코드를 다시 봤다. 뭘 분리하라는 건지 솔직히 모르겠다. 전부 프로필 관련 코드인데. 프로필 사진, 이름, 소개, 팔로우 버튼, 게시글 목록, 좋아요 수. 다 유저 프로필이잖아. 그럼 UserProfile 컴포넌트에 있는 게 맞는 거 아닌가. 근데 선배는 분리하래.8개월 됐다. 근데 아직도 모르겠다. 컴포넌트를 어떻게 나누는 게 정답인지. 부트캠프 때는 간단했다. 헤더는 Header.jsx, 버튼은 Button.jsx. 그게 끝이었다. 근데 실무는 다르다. UserProfile.jsx를 열면 그 안에 또 뭐가 들어가야 하는지. ProfileHeader? ProfileInfo? UserAvatar? FollowButton? 어디까지가 한 덩어리고 어디서부터 분리해야 하는지. 그냥 다 한 파일에 쓰면 안 되나. 길어도 Ctrl+F 하면 찾을 수 있는데. 선배들이 말하는 '재사용성' "재사용 가능하게 만들어야죠." 코드리뷰 댓글에 항상 나오는 말. 재사용성. 근데 뭘 재사용한다는 건지 모르겠다. 이 프로필 페이지는 프로필 페이지에서만 쓰는데. 다른 데서 언제 쓴다고. FollowButton을 분리했다. 그럼 다른 페이지에서도 팔로우 버튼 쓸 수 있으니까 재사용 가능한 거다. 이해했다고 생각했다. 근데 일주일 뒤 또 지적받았다. "ProfileInfo도 분리하면 좋을 것 같아요." ProfileInfo는 이름이랑 소개 보여주는 부분. 이건 어디서 재사용해. 프로필 페이지에서만 쓰는데. 물어봤다. 용기 내서. "선배님, 근데 ProfileInfo는 프로필에서만 쓰지 않나요?" "지금은 그렇죠. 근데 나중에 모달에서도 쓸 수도 있고, 카드 형태로 보여줄 수도 있잖아요." 나중에. 모달. 카드. 모르겠다. 나중은 언제고 모달은 아직 없는데 지금 분리하라는 건가.그래서 분리했다. ProfileInfo.jsx. 그 안에 이름이랑 소개만 넣었다. 30줄. 30줄짜리 파일을 만드는 게 맞나. components 폴더 열 때마다 파일이 수십 개다. 뭐가 뭔지 모르겠다. Button.jsx, CustomButton.jsx, StyledButton.jsx, PrimaryButton.jsx. 다 버튼인데 뭐가 다른 건지. 누가 정리 좀 해줬으면 좋겠다. 컴포넌트 분리의 기준이 뭔데 구글링했다. "React 컴포넌트 분리 기준". 블로그마다 다르다. 어떤 글은 "50줄 넘으면 분리하세요"래. 그럼 난 이미 300줄인데 6개로 쪼개야 하나. 어떤 글은 "단일 책임 원칙"이래. 하나의 컴포넌트는 하나의 일만. 그게 뭔데. 프로필 보여주는 게 한 가지 일 아닌가. 어떤 글은 "props가 5개 넘으면 분리"래. 그럼 지금 당장 분리해야 할 게 10개는 넘는다. 유튜브도 봤다. 영상마다 다르다. "작게 쪼갤수록 좋습니다." vs "너무 잘게 쪼개면 오히려 복잡해져요." 둘 다 맞는 말 같은데 반대다. 뭘 믿어야 하지. ChatGPT한테 물어봤다. 코드 붙여넣고 "이거 어떻게 분리하면 좋을까요?" 3가지 방법을 알려줬다. 전부 다른 방법. 어느 게 정답이래. "상황에 따라 다릅니다." 상황. 그 상황을 내가 모르는데 어떡하라고. 분리했더니 props 지옥 결국 분리했다. UserProfile을 5개로 쪼갰다. ProfileHeader, ProfileAvatar, ProfileInfo, FollowButton, PostList. 뿌듯했다. 이제 각 파일이 50줄 정도. 깔끔하다. PR 올렸다. "props drilling이 너무 심한 것 같아요." 뭐라고. UserProfile에서 userId를 받아서 ProfileHeader한테 넘기고, ProfileHeader가 또 ProfileAvatar한테 넘기고, ProfileAvatar가 이미지 URL 받아오려고 또... props가 3단계를 내려간다. userId -> ProfileHeader -> ProfileAvatar -> 실제 사용. "Context API 쓰시거나 상태관리 라이브러리 고려해보세요." Context API. 배웠다. 근데 언제 쓰는 건지 모르겠다. 이 정도면 쓰는 건가. 아직 안 쓰는 건가. Zustand? Recoil? Redux는 너무 어렵다고 하던데. 뭘 선택해야 하나. 일단 물어봤다. 또. "선배님, 이거 Context 써야 할까요?" "음... 지금은 괜찮을 것 같은데요. 나중에 상태가 복잡해지면 그때 고민해봐요." 나중에. 또 나중에.그래서 원래대로 돌렸다. props 3개만 넘기게. 근데 그러니까 ProfileHeader가 너무 많은 일을 한다고 또 지적받았다. "ProfileHeader가 너무 많은 책임을 가지고 있네요." 책임. 또 책임. 뭐가 책임인지 모르겠다. 그냥 props 전달하는 건데. 이것도 책임인가. 결국 정답은 없다는 걸 깨달았다 3주 걸렸다. 한 페이지 리팩토링하는 데. 처음 300줄 UserProfile.jsx는 이제 10개 파일이 됐다. components/profile 폴더에 들어가면 파일이 즐비하다. ProfileHeader.jsx ProfileAvatar.jsx ProfileBadge.jsx ProfileInfo.jsx ProfileBio.jsx FollowButton.jsx FollowStats.jsx PostList.jsx PostItem.jsx PostImage.jsx 10개. 원래 하나였는데. 깔끔한가. 모르겠다. 파일 찾으려고 왔다 갔다 하는 게 더 불편한 것 같기도 하다. 근데 민수 선배는 좋다고 했다. "이제 훨씬 읽기 좋네요. 수고했어요." 읽기 좋다고. 진짜 그런가. 난 아직도 헷갈리는데. 어제 신입이 한 명 더 들어왔다. 나보다 3개월 늦게. 이름은 김신입. "선배님, 컴포넌트 어떻게 나누는 게 좋아요?" 물어봤다. 나한테. 선배라고. "음... 재사용 가능하게? 그리고 너무 길어지면 분리하고..." 내가 하는 말이 민수 선배랑 똑같다. 웃겼다. 근데 김신입이 물었다. "그럼 몇 줄 정도가 적당한가요?" "그게... 상황에 따라 달라요." 이 말을 내가 하고 있다. 3주 전에 제일 듣기 싫었던 말을. 아직도 모르지만 조금 알 것 같기도 하다 오늘도 컴포넌트 분리했다. 새로운 기능. 장바구니 페이지. 처음부터 나눴다. ShoppingCart.jsx 하나에 다 쓰지 않았다. CartHeader, CartItem, CartSummary, CheckoutButton. 4개로 시작했다. 200줄이 4개 파일, 50줄씩. PR 올리기 전에 스스로 봤다. CartItem이 좀 긴 것 같다. 80줄. 분리했다. CartItemImage, CartItemInfo, CartItemQuantity. 혼자 했다. 지적받기 전에. 뿌듯했다. 조금. 아주 조금. 그리고 민수 선배가 approve 눌렀다. 댓글 없이. 댓글 없는 게 제일 좋은 거다. 배웠다. 여전히 모른다. 정확한 기준 같은 건. 몇 줄에서 나누고, 어떤 이름을 붙이고, props를 몇 개까지 넘기고. 근데 계속 하다 보니까 감이 생긴다. 이 정도면 분리해야겠다. 이건 하나여도 되겠다. 틀릴 때도 있다. 많다. 근데 틀리면 또 고치면 된다. 3주 걸려도 되고. 8개월 차. 아직도 주니어. 컴포넌트 분리는 여전히 어렵다. 근데 3개월 전보다는 덜 어렵다. 그게 성장인가 보다. 내일도 분리하겠지. 또 헷갈리겠지. 그래도 해본다.김신입한테 알려줄 건 생겼다. "일단 해봐. 틀려도 돼."