ReactJS스터디 - 컴포넌트 합성 Composing components 220707

<script type="text/babel">
    //root id를 가져오고
    const root = document.getElementById("root");
    
    function Welcome(props){
        return <h1>라면은 역시, {props.name}</h1>;
    }

    function App(props){
            //리턴할게 많으면 return ()소괄호로 묶어준다.(매개변수임) 아마 리턴도 함수니까 알아서 객체로 묶어서 반환하는듯?
        return(
            <div>
                <Welcome name="신라면"/> {/*return 안에서 주석을 달려면 이렇게 중괄호로 묶어서 자바스크립트라는걸 명시해야됨*/}
                <Welcome name="진라면"/>
                <Welcome name="열라면"/>    
            </div>
        )
    }
    
    ReactDOM.render(<App/>,root); // 함수형 컴포넌트 App을 <App/>으로 호출해서 루트에 자식으로 넣음.
</script>

 

만든 <Welcome/> 컴포넌트를

<App/> 안에 3개를 다른 name으로 호출시킨 모습.

return() 소괄호 안에 주석을 달려면 {}중괄호로 묶어서 자바스크립트라는걸 알려줘야됨.