React에서 함수형 컴포넌트를 사용할 때 <Component/> vs Component() 어떤 차이가 있나요?

HTML 코드 내에 script를 삽입하는 형태로 코드를 작성하는지( Component() ), JSX element를 직접적으로 사용하는지(<Component/>) 정도의 차이겠네요. 그 외에는 동일하다고 생각됩니다. 실제 코드로 표현하면 다음과 같겠네요. 1. <Component/> return ( … <Component {…props} /> … ) 2. Component() return ( … { Component(props) } … ) 이렇게 코드를 작성하는 방법 외에는 큰 차이가 없다고 생각합니다. 1번이든, 2번이든 JSX를 사용해야하는데, 개인적으로는 React의 JSX 이해하기 공식 문서에서 지향하는 1번 방식을 사용하는 것이 좋지 않을까 생각합니다.

안녕하세요 저도 궁금해서 찾아봤는데 컴포넌트를 호출하는 방식 (Component())을 지양해야 한다는 글이 있어서 공유합니다:) https://dev.to/igor_bykov/react-calling-functional-components-as-functions-1d3l 1. Component()와 같이 함수를 직접 호출하는 방식은 리엑트의 라이프 사이클을 따르지 않고, 훅을 동작하지 않게 하는 등 리액트스러운 동작(React magic)을 막을 수 있음. 2. 함수 호출 방식은 미래에 안티 패턴으로 간주될 수 있음 (https://github.com/jsx-eslint/eslint-plugin-react/issues/578) 3. 컴포넌트가 아닌 곳에서 state를 사용하는 것은 위험함. (https://kentcdodds.com/blog/dont-call-a-react-function-component)