중괄호 {} 사용
const GlobalStyles = () => {
<Global styles={globalStyles} />
}
JavaScript
복사
이 코드는 화살표 함수를 사용하여 GlobalStyles 컴포넌트를 정의하고 있다. 하지만 중괄호 {} 안에 return 문이 없다. JSX 코드가 있지만, 실제로는 아무것도 반환하지 않고 있기 때문에 이 컴포넌트는 아무런 내용도 렌더링하지 않는다.
소괄호 () 사용
const GlobalStyles = () => (
<Global styles={globalStyles} />
);
JavaScript
복사
이 코드는 화살표 함수의 축약된 반환 구문을 사용하여 GlobalStyles 컴포넌트를 정의하고 있다. 여기서는 중괄호 {} 대신 소괄호 ()를 사용하고 있으며, 이는 함수가 <Global styles={globalStyles} />를 직접 반환한다는 것을 의미한다.
어느 코드가 더 좋은가?
물론 소괄호를 사용하는 것이 좋다.
2번 코드는 JSX를 직접 반환하고 있어, 컴포넌트가 올바르게 렌더링된다. 축약된 화살표 함수 구문(() => (...))은 JSX를 반환하는 컴포넌트를 간결하고 명확하게 작성할 수 있게 해준다. 중괄호 사용 코드는 return 문이 빠져 있어 실제로 아무것도 렌더링하지 않는 문제가 있다.
그러니 return 을 써야 한다.
return 키워드를 사용하여 JSX를 반환하는 방식이 좋은 방법이기도 하다. 이 방식은 함수 내에서 여러 줄의 로직을 작성해야 할 때 특히 유용하다. 예를 들어, 어떤 조건에 따라 다른 JSX를 반환하거나, 변수를 선언하고 계산하는 로직이 포함된 경우에 이 방식을 사용할 수 있겠다.
const GlobalStyles = () => {
return <Global styles={globalStyles} />;
};
JavaScript
복사
위 코드는 GlobalStyles 컴포넌트가 <Global styles={globalStyles} />를 반환하도록 정의하고 있으며, 이는 컴포넌트가 올바르게 렌더링될 것임을 의미한다.