[React] #4 첫 컴포넌트 만들기

해당 벨로그는 [코딩앙마] React js 강좌 를 수강하고 작성한 글입니다.

컴포넌트 만들기

직접 컴포넌트를 만들어보자.

컴포넌트는 항상 대문자로 시작한다.

Hello.js 를 생성한다.

export deafult 를 선언형으로 선언할 수 있고, 화살표형으로 선언할 수 있다.

또는 한줄로 export 포함해 선언할 수 있다.

App.js

import Hello from ‘./component/Hello’ → Hello 뒤에 .js 는 생략해도 된다.

그리고 import 한 컴포넌트를 원하는 위치에 적는다. → HTML 태그처럼 작성한다. <Hello>

<Hello></Hello> 로 작성하는데, 태그 내부에 들어갈 메시지가 없다면, <Hello /> 로 작성한다.

Hello.js

Hello.js 의 return 문을 div 로 감싸지 않고 코딩하면 에러가 발생한다. → JSX 는 하나의 태그만 만들 수 있기 때문이다.

상단 이미지의 코드를 보면 h1, World 라는 2개의 태그로 이루어져 있기 때문에 div 로 감싸 하나의 태그로 보이게 한다.

div 말고 그냥 <> 빈 태그로 감싸도 된다.

프로젝트 내 컴포넌트 구조

App 컴포넌트 안에 Hello 와 Welcome 컴포넌트가 있고, Hello 컴포넌트 안에 World 컴포넌트가 있다.

트리로 보면 상단 이미지같은 형태이다.

똑같은 컴포넌트를 여러번 사용할 수 있다. Hello.js 안에 World 를 두번 써보자.

한 번 만들어 놓은 컴포넌트는 어디에든 몇번이든 재사용이 가능하다.