[React] 컴포넌트(Component) 설명 및 사용방법 (2) - 컴포넌트 간단 예제

0. 컴포넌트 설명

리액트에서 꽃은 컴포넌트 입니다. 컴포넌트를 통해서 동일한 형태를 여러 곳에서 쉽게 불러올 수 있습니다. 

컴포넌트는 딱 두가지만 기억하면 됩니다. 

1. 함수로 구성

2. UI 를 Return 

결국 HTML를 리턴하는 함수라고 볼 수 있습니다.

(HTML 태그에서 class를 className으로 사용하는 차이점은 있습니다. )

 

컴포넌트 특징

1) 함수 형태

2) HTML 리턴

 

1. 간단한 컴포넌트 만들기

 

1) Component.js 파일 생성

src폴더에 Component.js 라는 파일을 만들어 줍니다. 

제 블로그 이름을 <p>태그로 출력하는 컴포넌트를 만들겠습니다. 

Component.js

function exFunc() {

    const blogName = "shoney";

    return(

        <p> blogName : {blogName} </p>

    )

}

 

export default exFunc;

'컴포넌트 = html 리턴하는 함수' 다시한번 생각하면서 내용을 작성합니다. 

물론 다른 곳에서 사용할 것이기 때문에 export를 선언해 줍니다. (이전 포스팅 확인하기 : [React] export, import)

 

 

2) index.js 파일 수정

index.js 는 React로 폴더를 지정하면 생성되는 파일입니다. 

default로 export를 선언 했기때문에 굳이 exFunc 라는 이름을 사용하지 않고 맨앞은 꼭 대문자를 써야하기 때문에, ExFunc로 불러왔습니다.  (이전 포스팅 확인하기 : [React] export, import)

컴포넌트를 사용할때는 태그처럼 사용하면됩니다. <ExFucn/>를 아래 소스코드와 같은 위치에 작성해주면 됩니다. 

 

index.js

import ExFunc from './Component';

 

ReactDOM.render(

  <React.StrictMode>

    <ExFunc />

  </React.StrictMode>,

  document.getElementById('root')

);

 

 

3) 결과 확인 

Ctrl + J 로 터미널 창을 열고 'npm start' 로 실행합니다. 물론 React가 설치된 폴더에서 실행해야합니다. 

(이전 포스팅 확인하기 : [React] React 설치하기)

터미널 창

PS C:\react\reacttest> npm start

결과