이제 첫 커스텀 컴포넌트를
구축했으니
컴포넌트의 내용이
웹사이트에 어떻게 구현이 된 것인지
완벽하게 이해해야 합니다
우선 웹사이트를 방문하여
웹사이트의 소스 코드를 점검하겠습니다
확인한 결과 소스 코드에 헤더를 비롯한
웹사이트 내용이 없는 것을 볼 수 있습니다
이미지, 제목 등 아무것도 없습니다
약간의 메타 데이터가 있고
불러온 자바스크립트 최소 1개와
로딩된 자바스크립트 파일이 있습니다
우리가 집중해야 하는 것은 로딩된 파일
저 같은 경우에는 index.jsx 파일입니다
이 곳에 로딩되고
실행된 코드는 결국
우리가 작성한 변형된 리액트 코드입니다
여러분이 작성한 코드는
브라우저에서 실행이
안 된다고 했지만
이로 인해 변환이 된 것입니다
우리의 프로젝트에 있는 index.html
파일에서 본 것과 같기 때문에
웹사이트 소스 코드에
index.jsx 파일이
로딩된 것은 놀랍지 않습니다
결과적으로 웹사이트 방문자에게
index.html 파일이 제공되는 것입니다
앞서 배운 것처럼
이 index.jsx 파일은
App.jsx 파일에서 import 해오는 게 있습니다
정확히 말하자면 앱 컴포넌트를 가져오는데
App.jsx 파일에서 내보내는 것이
앱 컴포넌트이기 때문입니다
참고로 export 키워드와
import 키워드와
import하고 export하는 기능 전부는
일반적인 자바스크립트 기능입니다
리액트에 특화된 기능이 아닙니다
이 앱 컴포넌트를 index.jsx 파일에
가져오게 되는 것입니다
이 파일에는 JSX 코드로 사용되고 있습니다
보이는 것과 같이 리액트 컴포넌트는 없습니다
이 JSX 코드는 함수로 전환이 되지 않는 것입니다
대신 값으로 사용되고 있어
호출된 다른 메소드의 인수로 쓰입니다
지금 보이는 경우에는 렌더링 메소드가 나옵니다
리액트 개발자로서
여러분은 거의 모든 경우
컴포넌트 함수에 JSX 코드를 사용할 것입니다
여기 index.jsx 파일에 보이는 것은
HTML 파일에 가장 먼저
로딩되는 파일로
리액트 앱의 주요 입구로 작용하여
아주 중요한 예외적인 경우입니다
이 위치에서 리액트 앱이
부팅된다고 할 수 있습니다
정확히 말하자면 이 곳에 불러들인
전반적 리액트 라이브러리에 속한
특별한 리액트 DOM 라이브러리에 있으며
이로 인해 앱 컴포넌트가 결과적으로 렌더링됩니다
그러니까, 앱 컴포넌트의 내용을 화면에
출력하는 것을
담당한다고 말할 수 있습니다
이 앱 컴포넌트는 이 렌더 방식에
JSX 코드를 통과시켜 렌더링됩니다
그러나 렌더 방식은 createRoot 메소드라는
다른 방식으로 생성된 객체에서 사용됩니다
이 메소드는 기존의 HTML 요소
즉, React에서 생성된 것이 아니고 index.html 파일의
한 부분인 요소를 입력값으로 설정합니다
이 경우, id root와 함께있는 div이며
getElementByld로 선택한 부분이므로
createRoot 메소드에 넘겨집니다
리액트 프로젝트의 경로로
그 요소가 사용되면
리액트가 리액트 컴포넌트를 삽입합니다
이 경우 앱 컴포넌트가
요소에 삽입됩니다
이 컴포넌트와 중첩 컴포넌트를 포함한
안에 있는 모든 내용을
이 div 안으로 렌더링 합니다
그것이 렌더링 메소드가 하는 일입니다
그러므로 개발자 도구를 열었을 때
요소 탭에 초반의 HTML 구조물 외에
다른 내용을 들어가 있습니다
화면에 보이는
모든 요소가 추가되어있고
id root와 함께
div 안에 있는 것을 보실 수 있습니다
헤더와 주요 부분은
앱 컴포넌트에서 정의된 내용이고
커스텀 헤더 컴포넌트는
id root와 있는 div 안에 있습니다
이와 같이 createRoot와 렌더링 메소드가
단 하나의 루트 컴포넌트를 렌더링하는 것입니다
이 경우에는 앱 컴포넌트인데
중첩된 컴포넌트가 필요한 만큼
있을 수 있습니다
이런 중첩 컴포넌트는
지금 헤더 컴포넌트 같이
자식 컴포넌트를 또 다수 갖고 있을 수 있습니다
이런 방식으로
컴포넌트 계층구조가 설립됩니다
컴포넌트 트리라고 자주 칭하는
컴포넌트 구조물이
리액트를 통해 화면으로 렌더링됩니다
이런 컴포넌트 트리와
컴포넌트에 전반적으로 이해해야 할 것은
커스텀 컴포넌트는
실제로 렌더링된 DOM에 나타나지 않는다는 점입니다
기본 HTML 요소만 있을 것입니다
예를 들어 여기 소문자 h로 시작하는 헤더는
내장된 헤더 요소이며
대문자 H로 시작하는 우리의 커스텀 컴포넌트가 아닙니다
앱 컴포넌트도 보이지 않습니다
그러므로 결국 이 컴포넌트 트리는
리액트가 분석만 합니다
리액트는 모든 컴포넌트에서 나온
모든 JSX 코드를 결합하여 전반적인 DOM을 생성합니다
즉, 화면에 보이는 요소입니다
그러나 개발자로서 편리하게도
모든 마크업을 가진
클 수도 있는 방대한 하나의 파일 대신
이런 개별적인 구성 요소로 작업할 수 있습니다
여기서 왜
컴포넌트 함수 이름이 대문자로
시작해야하는지 볼 수 있습니다
div, image, header와 같은 내장 요소는
소문자로 시작합니다
반면에 여러분 또는
다른 개발자가 만든 커스텀 컴포넌트는
리액트에게 내장된 컴포넌트가 아니라는 것을
알리기 위해 무조건 대문자로 시작해야 합니다
리액트는 이와 같이 내장 컴포넌트와
커스텀 컴포넌트를 구분합니다
이름 충돌의 가능성을 방지할 뿐 아니라
예를 들어 이 곳의 소문자 h 헤더가
내장된 헤더와 충돌하는 것을 방지합니다
리액트가 컴포넌트를 관리하는 방식이 바뀔 수도 있습니다
head, image, div 등과 같은 내장 컴포넌트는
리액트에서 DOM 노드로서 렌더링됩니다
반면에, 헤더와 같은
커스텀 컴포넌트는 단순한 함수이므로
리액트에서 함수로서 실행됩니다
이 내용은 훑어보기만 하고
반환된 값, JSX 코드를 사용해
코드를 분석하고 특정 시간이 지나면
내장 요소만 남게 되고
이들이 화면에 렌더링 됩니다
지금까지 리액트의 작동 방법과
컴포넌트 사용법 그리고 이들이 화면에
최종적으로 어떻게 렌더링 되는지 살펴보았습니다