[REACT] Component

 

지난 포스트에서 생성한 React 프로젝트인데, 여기서 눈 여겨봐야 할 파일이 세가지가 있다.

바로 index.html, index.js, App.js 이다.

 

1. index.html

 

 

우리가 흔히 알고 있는 html의 구조인데 그 중에서 주목해야 할 부분은

<div id="root"></div>  이다.

 

2. index.js

 

 

7행의 코드를 살펴보면 ReactDOM의 createRoot() 메소드를 살펴보면

태그 id가 root인 요소가 parameter 값으로 잡혀있다.

 

바로, 위에서 살펴본 index.html의 <div id="root"></div>  이 부분이 Argument인 것이다.

그 div태그로 createRoot() 한 결과값을 root라는 변수에 넣고, render()를 실행했다.

render()는 화면을 그려주는 메소드라고 보면 되는데 메소드의 parameter 값은 태그들로 점철 돼있다.

 

공식문서를 살펴보니 <React.StrictMode> 태그는 개발 모드시에만 작동되며

react 앱 내의 잠재적인 문제를 알아내기 위한 도구라고 한다.

 

그 아래에 있는 <App /> 태그가 오늘 포스팅에서의 핵심이다.

이렇게 생긴 태그를 React 에서는 Component라고 하는데

이 Component는 어디서 오는지 알아보기 위해 다음 문서인 App.js를 살펴보자.

 

3. App.js

 

 

얼핏 보기에는 함수 같이 생겼는데 웬 html 태그들을

잔뜩 return 하고 있는 저것이 Component의 주체가 된다.

 

그리고 이 함수 같이 생긴 것을 Component로 사용하기 위해서는

맨 아래에 export default 함수명 이 꼭 선언돼야 한다.

 

그래야 외부에서 이 함수 같이 생긴 것의 return 값을 Component로 사용할 수 있으니 말이다.

 

 

지난 포스트에서 npm start 명령어를 이용해 띄워진 웹 사이트인데

개발자 도구에서 소스를 확인해보면 위에서 설명한 그대로 html 태그가 작성된 것을 확인할 수 있다.

 

이번 포스트에서는 Component가 무엇이고, 어떻게 생성하고 사용하는지에 대해 알아보았다.

다음 포스트에서는 Component를 생성하는 여러가지 방법에 대해 작성하려고 한다.