코딩앙마 React 공부(첫 컴포넌트 만들기)

컴포넌트를 생성하기위해 컴포넌트 폴더를 만들고 컴포넌트 파일을 생성한다 (컴포넌트는 대문자로 시작해야한다.)

 

 

컴포넌트 작성 방법 3가지

첫번째 방법(기본적인 방법)

두번째 방법(화살표로 작성)

세번째 방법 (한줄 작성)

 

 

작성한 컴포넌트를 사용하는 방법

 

App.js로 가서 import Hello from './component/Hello';를 작성하여 컴포넌트를 import시켜준다.

 

컴포넌트를 원하는 위치에 작성해준다 (HTML 태그처럼 작성)

 

 

만약 <Hello>와 </Hello>사이의  ddd가 적힌 부분에 내용이 들어갈 필요가 없다면 <Hello />만 작성해도된다.

 

이대로 저장을 하게되면 에러가 나거나 아무것도 안뜨는 하얀 화면 일것이다. (=> 왜냐? p태그는 return을 시켜줘야하기 때문)

p태그 return

 

 

이제 Welcome이라는 컴포넌트를 생성하고 위와 똑같은 방식으로 실행해보자

 

 

 

다음은 World라는 컴포넌트 생성후 Hello컴포넌트안에서 import해보기

 

Hello컴포넌트 안에서 World컴포넌트 import

 

div가 없으면 에러가 난다 왜냐하면, JSX는 하나의 태그만 만들수 있기 때문이다.

(빈 태그로 감싸도 상관없다.)

 

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