[React] - 컴포넌트(Component)

.

 

react 특성 중 하나 반복되는 html을 컴포넌트로 빼 재사용 할 수 있다.

 

Component 만들 때 주의사항

1. component 작명할 땐 영어대문자로 보통 작명합니다.

2. return () 안엔 html 태그들이 평행하게 여러개 들어갈 수 없습니다.

3. function App(){} 내부에서 만들면 안됩니다. 

왜냐면 function App(){} 이것도 다시보니 컴포넌트 생성문법이죠?

component 안에 component 를 만들진 않습니다. 

4. <컴포넌트></컴포넌트> 이렇게 써도 되고 <컴포넌트/> 이렇게 써도 됩니다. 

 

const Test = () => {

    return (
        <div>
            <Modal/>
        </div>
    );
}

const Modal = () => {
    return(
        <div>
            <h1>modal</h1>
        </div>
    )
}

Modal 이 Modal.js 로 다른파일에 있다면

Test.js 에서 import 만 해주면 된다.

그리고 예전에는 class 형 컴포넌트를 만들었는데, 요새는 function arrow가 좋다고 한다.