React: 암시적 반환 vs 명시적 반환의 전쟁. 당신은 어느 편인가요?
Source: Dev.to
경쟁자들
우리가 논쟁하고 있는 두 스타일에 대한 간단한 복습.
1. 암시적 반환 (“세련된” 방식)
컴포넌트가 props를 그대로 JSX에 넘겨줄 뿐이라면 중괄호 {}와 return 키워드를 완전히 생략할 수 있습니다. 보통 JSX를 괄호 () 로 감싸죠.
깔끔하고 정돈돼 보이며 매우 “함수형”입니다.
// Look ma, no curly braces!
// Very clean for simple presentational components.
const UserCard = ({ username, avatarUrl }) => (
### {username}
);2. 명시적 반환 (“안전한” 방식)
중괄호 {} 를 사용하는 일반 블록 바디 문법입니다. 중괄호를 열었으니, 반드시 return 키워드를 써서 렌더링해야 합니다.
렌더링 전에 로직, 훅, 변수 선언 등이 하나라도 있으면 이 방식을 사용해야 합니다.
const UserCard = ({ user }) => {
// We have logic before rendering...
const displayName = user.name.toUpperCase();
const isPremium = user.tier === 'gold';
// ...so we MUST be explicit with the return.
return (
### {displayName}
);
};회색 지대 (논쟁이 존재하는 부분)
위 예시들에 대해서는 누구도 이의를 제기하지 않습니다. 문제는 회색 지대에 있습니다.
“습관적인 명시”
때때로 개발자들이 반환 전에 로직이 전혀 없는데도 습관적으로 명시적 반환을 사용합니다. 중괄호와 return 키워드 때문에 불필요하게 3줄의 보일러플레이트 코드가 추가됩니다.
“과도한 암시”
반대로, 개발자들이 “세련된” 암시적 문법을 유지하려고 지나치게 애쓰는 경우도 있습니다. 중괄호를 열고 복잡한 if/else 블록을 쓰는 대신, JSX 안에 4단계 깊이의 삼항 연산자를 중첩시켜 버립니다. 처음엔 “멋져 보이지만”, 6개월 뒤에 읽기엔 악몽이 됩니다.
“함정” 트랩 ⚠️
그리고 고전적인 초보자 실수를 잊지 말아야 합니다. 객체 리터럴을 암시적으로 반환하려 할 때 (유틸 함수나 오래된 Redux mapStateToProps 등에서 흔함), JavaScript는 객체 중괄호를 함수 본문 중괄호로 착각합니다.
// ❌ WRONG. Returns undefined. JS gets confused.
const getInitialState = () => { id: 1, active: true };
// ✅ CORRECT. You must wrap the object in parentheses.
const getInitialState = () => ({ id: 1, active: true });토론
내가 따르는 일반적인 원칙: 간결함을 위해 기본적으로 암시적 반환을 사용하되, JSX가 한 번에 스캔하기 어려울 정도로 복잡해지면 즉시 명시적으로 전환한다.
가독성 > 간결성. 언제나 그렇습니다.
하지만 많은 팀이 어느 한 쪽을 강제하는 엄격한 린트 규칙을 적용하고 있죠.
여러분은 어떠신가요?
- 여러분은 팀 암시(짧게 유지)인가요, 팀 명시(명확히 유지)인가요?
- 암시적 반환이 코드를 디버깅하기 어렵게 만든다고 생각하시나요?
댓글로 문법에 대해 토론해 주세요! 👇