230116 React 컴포넌트 합성

node.js=>js의 서버.
필요한 패키지같은 것을 명령문으로 받을 수 있다.

컴포넌트에서 태그들을 묶을 때, div,Fragment 이외에 그냥 이름없는태그(<></>)로도 묶을 수 있다.

 

 

컴포넌트 합성

가령, Welcome을 여러 번 렌더링하는 App 컴포넌트를 만들 수 있다.

 

 

예시로

App.js가

 <MyComponent2 name={"이순신"}/>
 <MyComponent2 name={"홍길자"}/>

일 때,

 

import { Fragment } from "react";
import '.././App.css'

const MyComponent2 =({name})=>{

    return(
        <Fragment>
        <h3>나의 두번째 컴포넌트</h3>
            <div className="App">
                <strong style={{fontStyle:'italic', color:'#777', marginLeft:100}}>컴포넌트는 여러개가 가능</strong>
                <p style={{color:'aqua', backgroundColor:'teal'}}>분할사용을 통해 필요하면 복사, 또는 각주처리가 가능</p>
            </div>
            <input type="text" placeholder="혼자쓰는태그는 닫아주기"/>
            프롭스값:{name}
        </Fragment>
    )

}

export default MyComponent2;

면

컴포넌트에 주어진 props값에 따라 해당 컴포넌트에서 다르게 출력된다.

 

받은 props에 따라 이순신, 홍길자가 출력됨