[React] 컴포넌트 상속(부모, 자식) 구현 방법

컴포넌트도 부모 자식 관계처럼 불러와서 사용할 수 있습니다.

사실 상속관계라고 하기엔 좀 너무 간단합니다. 

그냥 export 하는 컴포넌트를 import로 불러와서 사용하는 겁니다.

 

1. 자식

자식이라는 <h2> 태그를 리턴하는 child.js 파일을 생성합니다. 

child.js

function ChildComponent(){

    return <h2>자식</h2>

}

 

export default ChildComponent;

export에 default를 사용하는 이유는 단일 함수이기 때문입니다. (함수가 여러개일 경우는 사용하지 않도록 합니다.)

 

2. 부모

부모 컴포넌트에서는 import로 ./child를 불러옵니다.

단일(default)로 export 했기 때문에, ChildCom 이름으로 바꿔서 사용 가능합니다. 

ParentComponent의 안에는 ChildCom을 두번 호출합니다.

(import 로 사용할 Component명은 첫글자는 꼭 대문자가 와야함)

parent.js

import ChildCom from './child';

 

function ParentComponent(){

    return (

        <div>

            <h1>부모</h1>

            <div>

                <ChildCom />

                <ChildCom />

            </div>

        </div>

    )

}

 

export default ParentComponent

 

3.결과

Study로 단일함수를 불러와서 호출합니다. 

(import 로 사용할 Component명은 첫글자는 꼭 대문자가 와야함)

index.js

import Study from './parent';

ReactDOM.render(

  <React.StrictMode>

    <Study />

  </React.StrictMode>,

  document.getElementById('root')

);

 

결과