[React] props 를 함수의 인수로 전달할 때에 중괄호({})를 붙이지 않는 이유

React에서 props를 함수의 인수로 전달할 때 중괄호({})를 붙이지 않는 이유는 JavaScript의 구문 규칙에 기인합니다.

React에서 props는 JavaScript 객체로 전달됩니다. 일반적으로 객체를 함수에 전달할 때는 중괄호({})를 사용하여 객체를 감싸주는 것이 올바른 구문입니다. 그러나 React에서는 중괄호({})를 사용하지 않는 이유는 JSX 문법과 관련이 있습니다.

JSX는 JavaScript를 확장한 문법으로, React 컴포넌트에서 UI를 작성하기 위해 사용됩니다. JSX에서 중괄호({})는 JavaScript 표현식을 나타내는 데 사용됩니다. 중괄호({}) 안에는 JavaScript 표현식을 넣을 수 있고, 그 값은 JSX에서 평가되어 출력됩니다.

React에서 컴포넌트에 props를 전달할 때 JSX 문법을 사용하며, 중괄호({})는 JavaScript 표현식을 나타내는 역할을 합니다. 따라서 props를 함수의 인수로 전달할 때 중괄호({})를 붙이지 않는 것은 JSX 문법을 따르기 위한 규칙입니다.

예를 들어, 다음과 같은 컴포넌트가 있다고 가정해봅시다:

 

function MyComponent(props) {
  return <div>{props.name}</div>;
}

 

위의 예시에서 props는 객체 형태로 전달되며, {props.name}은 JSX에서 props 객체의 name 속성을 표현하는 JavaScript 표현식입니다. 중괄호({})는 props 객체의 name 속성을 감싸는 것이 아니라, JSX 문법에서 JavaScript 표현식을 표시하는 역할을 수행합니다.

따라서 React에서는 함수의 인수로 props를 전달할 때 중괄호({})를 붙이지 않습니다. 이는 JSX 문법과 JavaScript의 구문 규칙을 일관성 있게 유지하기 위한 선택입니다.

 

결론

컴포넌트 내에서 중괄호로 감싸는 것은 JSX 에서 JavaScript 표현식을 표시하는 역할을 위해 따라야 하는 JSX 문법이고

함수에 props를 전달할 때는 JavaScript 문법을 따라야 하기 때문에 중괄호를 넣지 않는다.