3.함수형컴포넌트 작성법

//함수형 컴포넌트 : props, api, hook(상태관리) 모두 다루는 방법이 다름

 

1. 컴포넌트를 정의하고, return(...);안에 jsx로 태그를 작성한다. 

 

const WrapComponent = ()=>{

    return(

        <div id="wrap">

            <HeaderComponent />

            <MainComponent />

            <FooterComponent />

            <PopupComponent />

        </div>

    );

}

 

const HeaderComponent = () => {...}

 

const MainComponent = () => {...}

const Section1Component = () => {...}

const Section2Component = () => {...}

 

const FooterComponent = () => {...}

 

const PopupComponent = () => {...}

 

 

2. 리액트 돔을 연동한다. 

ReactDOM.render(

    <WrapComponent />,

    document.getElementById('root')

);

 

 

---

 

---

이렇게 작성하는 방법을 함수형 컴포넌트라 한다. 

const componentName = () => {} 형식으로 정의한다. 

---

tip] 코드를 자동으로 하게 하는 방법

vsCode에 extention에 react extention pack을 검색하여 설치한다. 

클래스형컴포넌트 : rcc + 엔터

함수형컴포넌트 : rsc + 엔터

자동완성된것중 import와 export만 지우면 된다.

---