[React] 컴포넌트(Component) 만들기

React 컴포넌트란 ?

컴포넌트란 React의 핵심 개념 중 하나로, 페이지에 렌더링할 React 엘리먼트(element)를 반환하는 작고 재사용 가능한 코드 조각입니다. 컴포넌트는 반복출현하거나 자주 변경되는 HTML UI들을 만들어서 사용하는게 좋습니다. 이는 렌더링 시 성능적으로 이점을 갖게 합니다.

 

컴포넌트 유의사항

1. 이름은 항상 대문자로 시작해야한다.

- 이름이 소문자로 시작할 경우 DOM 태그로 인식하여 원하는 결과가 나오지 않을 수 있다.

 

2. return()안에 있는건 태그 하나로 묶어야한다.

// 하나의 태그로 묶어야함
return(
    <div>
    	<div></div>
        <div></div>
    </div>
)


// 이렇게 사용되면 안됨
return(
    <div></div>
    <div></div>
)

 

컴포넌트 만들기

1. function 키워드를 사용하여 컴포넌트 만들기

- 컴포넌트 이름 : Modal

- return : 원하는 HTML 작성

 

2. 컴포넌트 사용하기

- 원하는 위치에 <함수명 /> 입력