반환문은 한 줄로?

[SanginJeong]

1주차 스터디에서 JSX 반환문에서 반환문을 한 줄로 표현하는 방법과 소괄호로 묶는 방법에 대한 의견

CASE 1: 한 줄로 반환하기

export default function Profile() {
  return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;
}

CASE 2: 소괄호로 묶어서 여러 줄에 걸쳐서 반환하기

export default function Profile() {
  return (
    <>
      <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
    </>
  );
}

저는 간단한 컴포넌트여도 아래와 같은 이유로 2번 방식으로 선언하는 것을 선호합니다.

1. 확장성이 용이합니다.

export default function Avatar() {
  return (
    <>
      <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
      <p>Katherine Johnson</p> // 단순히 한줄 만 추가
    </>
  );
}

2. file changed 관점에서도 리뷰하기에 편리합니다.

// case 1
-  return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;
+  return (
+    <>
+      <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
+      <p>Katherine Johnson</p>
+    </>
+  );

// case 2
   return (
     <>
       <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
+      <p>Katherine Johnson</p>
     </>
   );

CASE 2에 비해서 CASE 1은 가독성이 좋으며, 불필요한 fragment를 생성하지 않는다 라는 관점에서 장점이 있습니다.

어떻게 생각하시는지 궁금합니다

[cskime]

의견

• 저는 컴포넌트가 1개일 때는 소괄호나 fragment를 사용하지 않는 것을 더 선호합니다. (CASE 1)
• 그런데, diff 가독성이 높아지는 것까지 생각하면 CASE 2 방식이 더 좋은 것 같습니다.
• 단, 한 줄로 작성 가능한 상황에서 소괄호와 fragment를 일일이 작성해야 한다면 피로도가 높아져서 장기적으로는 규칙을 지키지 않게 될 것 같습니다.

질문

• 혹시 Prettier에서 항상 소괄호와 fragment를 추가해 주도록 설정할 수도 있을까요?
• 소괄호와 fragment 외에도 props 간에 줄바꿈을 할 수도 있는데요. Props도 항상 줄바꿈 하는 것을 선호하시나요?

[junye0l]

답변

• 제가 알기로는 저장할때마다 소괄호, 프레그먼트 추가하는 설정이 있었던 걸로 기억납니다!
• props가 좀 많다싶으면 줄바꿈하고 아니면 그냥 한 줄로 다 쓰는 것 같습니다.

[junye0l]

의견

• 저도 동일하게 CASE 2번 방식을 선호합니다!
• 하지만, 공식문서에서도 두 방식을 모두 말하는 것 보니 상황에 맞게 사용해야될 것 같습니다. ( 아무래도 사람마다 성향이 다르다 보니 )

질문

• 상인님의 글을 보니 JSX 반환문에 대한 컨벤션도 뭔가 팀적으로 정해놓으면 좋을 것 같다는 생각인데, 다른분들은 어떠신가요?

[cskime]

• 저는 규칙이 많아지는걸 별로 좋아하지 않아서 이것까지 컨벤션으로 정할 필요는 없다고 생각합니다.
• 하지만, prettier 도움을 받는다면 괜찮을지도 모르겠네요.