[리액트] 컴포넌트

컴포넌트란?

데이터를 입력받아 DOM Node를 출력하는 함수. 쉽게 말하자면 html을 반환하는 함수.

예) App.js의 function App() { }

리액트로 만들어진 앱을 이루는 가장 최소한의 단위가 컴포넌트

컴포넌트 생성 및 사용 방법

1. [임의 이름].js파일 생성

   이때, 반드시 첫글자는 대문자여야 한다.

   (예시) Happy.js

2. import React from 'react';추가

   현재 js 파일 안에서 react 컴포넌트를 사용한다는 의미이다.

   Q.리액트 프로젝트 내의 파일인데 리액트 컴포넌트를 사용한다고 굳이 넣어줘야하는가?

   파일 내에서 react 컴포넌트를 사용한다는 부분이 없으면, jsx가 있는 컴포넌트를 사용한다는 것을 이해하지 못한다.

3. 다른 파일에서 'Happy' 컴포넌트를 사용하기 위해 Happy.js의 마지막 줄에 export default Happy;를 넣어준다.------------------컴포넌트 생성하기 위해 해야할 단계는 여기까지다.---------------------

4. index.js가 아닌 App.js에서 'Happy' 컴포넌트를 import한다.

5. App function에서 return 해주는 영역 안에 'Happy' 컴포넌트를 넣어준다.

   Q. index.js에 내가 임의로 생성한 컴포넌트를 추가하지 못하는 이유?

   ReactDOM.render 함수는 오직 하나의 컴포넌트만 인자로 받을 수 있기 때문이다. 즉, 리액트 앱은 ★한 번에 하나의 컴포넌트만 render★할 수 있다는 것이다.

   따라서 아래와 같이 index.js에 직접 'App' 컴포넌트와 'Happy' 컴포넌트를 동시에 넣으면 에러가 난다. 

    

   // src/index.js
   ReactDOM. render(<App/><Happy/>, document.getElementById("Happy"))