Detail가지고 매닥질치다가 궁금해진 점이 있다.
App.js
import Detail from "./Detail.js";
function App() {
return (
//중략
<Route path="/detail" element={<Detail />} />
);
}
Detail 이라고 불러왔는데 <Detail / >이라고 쓸수 있나?
ㄴ 이건 된다고 한다. 왜인지 모르겠으나 일단 그렇다고함.
궁금하니까 chatGPT한테 물어봤다.
분명 import 할 때는 Detail 이라고만 가져왔는데 그것을 <Detail / > 로 쓸 수 있는 이유는 뭔가요?
좋은 질문이에요! 😊 Detail을 import할 때 단순히 함수처럼 가져오는데, 왜 그것을 <Detail />이라는 JSX 문법으로 사용할 수 있는지 하나씩 설명드릴게요.
1. React 컴포넌트의 본질
React에서 컴포넌트는 기본적으로 함수 또는 클래스로 정의됩니다. 컴포넌트는 다음 두 가지 방식 중 하나로 작성할 수 있습니다:
- 함수형 컴포넌트:
function MyComponent() { return <div>Hello!</div>; } - 클래스형 컴포넌트:
class MyComponent extends React.Component { render() { return <div>Hello!</div>; } }
React는 이러한 함수(또는 클래스)를 특별하게 취급합니다:
- React는 JSX로 작성된 태그(
<>)를 만나면 해당 함수(컴포넌트)를 호출해서 결과물로 HTML-like 구조를 반환합니다. - 즉,
<Detail />이라는 JSX는 React가Detail이라는 함수를 호출해 반환값(JSX)을 받아서 DOM에 렌더링하게 됩니다.
간단한 예
function Detail() {
return <div>Detail 페이지입니다!</div>;
}위 Detail 컴포넌트는 import를 통해 가져와서 JSX <Detail />로 사용할 수 있습니다. 이때 React 내부에서는 다음과 같은 동작이 일어납니다:
React.createElement(Detail); // React가 Detail 함수를 호출함React.createElement는 Detail() 함수를 호출해 그 반환값을 기반으로 DOM을 구성합니다.
2. JSX 문법의 특별한 규칙
JSX 문법에서는 <ComponentName />와 같이 대문자로 시작하는 태그를 React 컴포넌트로 인식합니다.
<div>와 같은 태그는 HTML 태그로 간주됩니다.<Detail>와 같은 태그는 사용자 정의 컴포넌트로 간주되며, React는 이를 함수로 호출합니다.
왜 대문자로 시작해야 하나요?
React가 HTML 태그와 컴포넌트를 구분하기 위해 대문자로 시작하는 컴포넌트를 사용자 정의 컴포넌트로 간주합니다. 소문자로 시작하는 <div> 같은 태그는 React가 DOM의 HTML 요소로 렌더링합니다.
만약 컴포넌트 이름을 소문자로 작성하면 React는 이를 HTML 태그로 해석하려고 시도합니다. 예를 들어:
function detail() { // 컴포넌트 이름이 소문자
return <div>Detail</div>;
}
// JSX에서 <detail />를 사용하면 React는 이를 HTML 태그로 해석하려 합니다.
// 그러나 HTML에는 <detail> 태그가 없으므로, 브라우저에서 에러가 발생할 가능성이 있습니다.따라서 컴포넌트는 반드시 대문자로 시작해야 합니다.
3. React 컴포넌트를 import할 때
import Detail from "./Detail.js";는 단순히 Detail 함수를 가져오는 것입니다.
React는 컴포넌트를 "함수"로 취급하기 때문에, Detail은 단순히 일반적인 함수일 뿐입니다. 하지만 JSX 문법에서 <Detail />로 작성하면, React가 자동으로 이 함수를 호출하여 렌더링 과정을 처리합니다.
JSX가 내부적으로 동작하는 방식
<Detail />이 JSX는 React 내부적으로 다음과 같이 변환됩니다:
React.createElement(Detail);React는 Detail이라는 함수를 호출하고, 그 함수의 반환값(JSX)을 렌더링합니다.
4. React 컴포넌트를 JSX로 사용할 수 있는 이유
정리하면, Detail을 함수로 import했지만 <Detail /> 형태로 사용할 수 있는 이유는:
1. React는 컴포넌트를 "함수 또는 클래스"로 정의된 특별한 JavaScript 구조로 인식합니다.
2. JSX 문법에서 <ComponentName />를 작성하면 React는 이를 함수 호출로 변환합니다.
3. 대문자로 시작하는 태그는 React에서 컴포넌트로 간주되며, React는 해당 컴포넌트를 호출해 반환값을 DOM으로 렌더링합니다.
5. Detail 함수 자체를 사용하는 경우와 JSX로 사용하는 경우
만약 Detail을 JSX 문법이 아닌 일반 함수처럼 사용한다면, 수동으로 호출해야 합니다:
Detail(); // 함수 호출이 경우 React의 렌더링 과정과는 별개로 단순히 함수 실행 결과를 반환합니다.
하지만 <Detail />로 사용하면 React가 이를 자동으로 호출하고 결과를 관리하므로 React 앱에서는 JSX를 사용하는 것이 표준입니다.
6. 요약
- React 컴포넌트는 함수 또는 클래스로 정의됩니다.
- JSX에서
<Detail />라고 작성하면 React가 내부적으로React.createElement(Detail)을 호출합니다. - 대문자로 시작하는 이름은 React에서 사용자 정의 컴포넌트로 간주됩니다.
- JSX는 단순히 React의 함수 호출 문법을 더 쉽게 사용할 수 있도록 도와주는 문법입니다.
React가 컴포넌트를 관리해 주는 덕분에 우리는 JSX 문법을 사용해 간편하게 컴포넌트를 작성하고 렌더링할 수 있는 것이죠! 😊
