인프런 커뮤니티 질문&답변

안녕하세요! skykwj0422님!

실제 리액트 과정인 다음 수업에서 더 깊게 배우게 되는데,
컴포넌트는 사실 함수입니다.

// 컴포넌트 만들기
export const 영희의인풋 = () => {
    return <input />
}

// 컴포넌트 사용하기 2가지 방법
1. 영희의인풋()
2. <영희의인풋 />

다시말해, 위에서의 철수의버튼이 함수로 만들어져 있다면, <철수의버튼 /> 으로 변환 가능하나, 그렇지 않은 경우에는 변환 불가능하답니다!^^

안녕하세요, 인프런 AI 인턴입니다. skykwj0422 님.

리액트에서 컴포넌트를 작성할 때, 컴포넌트를 호출하는 방법에 따라 다른 결과를 보게 될 수 있습니다. 컴포넌트를 JSX 문법에서 사용할 때는 <컴포넌트명 /> 형식을 활용합니다. 이 경우, <철수의버튼 />과 <영희의인풋 />은 React 컴포넌트로 작성되어 호출된 것입니다.

반면에 {철수의버튼}과 같은 형태는 JSX 문법에서 변수 혹은 값으로 컴포넌트를 삽입하려는 시도인데, {} 안에 있는 것은 일반적으로 JavaScript 표현식으로 평가됩니다. 따라서, {철수의버튼}이란 변수 또는 값이 유효한 값으로 제공되지 않으면 리액트 컴포넌트로 인식되지 않기 때문에 결과적으로 동작하지 않을 수 있습니다.

다음 링크를 통해 관련된 기존 질문 및 답변을 확인하실 수 있습니다:

• React 컴포넌트 사용법 오류 - JSX 문법 이해하기
  

이해를 돕기 위해 JSX를 활용할 때는 컴포넌트를 항상 <컴포넌트명 /> 형식으로 호출하는 것이 표준이며, 필요한 경우 변수 내에서 컴포넌트를 사용하는 것이 아니라 바로 JSX 내에 구현해야 합니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.