React TutorialA02 컴포넌트 사용

React 컴포넌트 만들고 사용

 

이전내용

2022.09.06 - React TutorialA01

 

컴포넌트

화면 구성요소들을 컴포넌트(출력 로직이 포함된) 단위로 만들어서 조립하고 재사용할 수 있다. 컴포넌트에 출력로직이 있기에 단순하게 반복적으로 재사용하더라도 반복적으로 출력된다.

프로젝트를 만들고나면 기본적으로 App.js에 App컴포넌트가 있다.

 

아래는 별도의 Test1컴포넌트(함수형태의 출력 로직)를 만들어보는 예제다.

 

컴포넌트 만들기

기존에 있는 App.js와 유사하게 새로운 Test1.js를 만들 수 있다.

 

Test1.js코드 내용

function Test1() {
    const val1 = "Page1";
    const val2 = {
        v1: "v111",
        v2: "v222"
    };
    return (
        <div className="Test1">
            <h1
                style={{
                    color: "red"
                }}
                >
                Test1 {val1} ~
                <br></br>
                {val2.v1} plus {val2.v2}
                </h1> 
        </div>
    );
}

export default Test1;

 

컴포넌트 사용

index.js에서 import문들이 있는 곳에 아래 코드를 추가.

import Test1 from './Test1.js';

만들어둔 Test1컴포넌트를 임포트하여 사용할 준비를 한다. 뒤에 ".js"는 생략할 수 있다.

...
import Test1 from './Test1.js';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
    <Test1 />
  </React.StrictMode>
);

기존 App뒤에 Test1을 추가했다.

 

실행화면

 

기존 App의 화면 아래 이어서 Test1의 화면이 출력된다.