[짧지식] [React] React 화살표 함수 ( ) vs. { }

소개

React 컴포넌트를 개발하다 보면 화살표 함수의 반환값을 감싸는 괄호가 때로는 () 이고, 때로는 {} 인 것을 발견할 수 있다.

언뜻 보기에는 비슷해 보이는 이 두 가지 문법의 차이는 무엇일까?

1. ( )

• 괄호와 같은 경우 암시적 반환(Implicit return)을 의미함
  • 내가 특정 값을 반환한다는 것을 명시해줄 필요가 없다는 것
• JSX 요소만을 반환할 때 사용

const SimpleComponent = () => (
    <div>Hello World</div>
)

2. { }

• 함수 본문을 의미
• 명시적으로 return문을 작성해줘야 함
• 추가 로직(ex.조건문)이 필요할 때 사용

const ConditionalComponent = () => {
    const isLoggedIn = checkLoginStatus();
    const userName = getUserName();
    
    if (isLoggedIn) {
        return <div>Welcome {userName}!</div>
    }
    
    return <div>Please log in</div>
}

3. 괄호 생략

• 단일 매개변수, 단일 표현식을 반환할 때

const Welcome = name => <div>Hello {name}</div>

결론

1. 간단한 JSX반환 시 : ( )

2. 로직이 있는 반환값 : { } + return문

3. 한줄로 끝나는 간단한 표현식 : 괄호 생략