React- 리액트 컴포넌트 만들기

※ 강의를 듣고 제가 이해한 것을 바탕으로 정리한 것이라서 오류가 있을 수 있습니다.

 

 

1. 컴포넌트 만들기

리액트 프로젝트를 만들면 생기는 src 디렉터리에 Hello.js를 만들고 아래와 같이 코드를 작성 하면 된다.

// 리액트 컴포넌트
// 컴포넌트는 일종의 UI 조각
import React from 'react'; // 리액트를 불러와서 사용하겠다는 의미
 
function Hello() { /* 컴포넌트는 클래스와 함수 2가지 형태로 만들 수 있는데 여기서는 함수로 만듦
                      컴포넌트 이름의 앞글자는 대문자로 해줘야함 */
    return <div>안녕하세요!</div>;
}
 
export default Hello; // Hello라는 컴포넌트를 내보내겠다는 의미

 

import React from 'react';

리액트를 컴포넌트를 만들땐 이 코드를 통하여 리액트를 불러와줘야 한다.

리액트 컴포넌트는 함수형태로 작성 할 수도 있고 클래스형태로도 작성 할 수 있다.

위 코드에서는 함수로 작성을 했다.

 

export default Hello;

코드의 최하단에 있는 이 코드는 이 코드는 Hello 라는 컴포넌트를 내보내겠다는 의미 인데 이렇게 해주면 다른 컴포넌트에서 불러와서 사용 할 수 있다.

 

 

2. 컴포넌트를 불러와서 사용하기

위에서 만든 Hello 컴포넌트를 불러와서 사용하려면 아래와 같이 하면 된다.

import React from 'react';
import Hello from './Hello'; // Hello 컴포넌트 불러옴 확장자 js는 생략해도 됨
function App() {
  return (
    <div>
      <Hello/> {/* 컴포넌트 사용 */}
      <Hello/>
      <Hello/>
    </div>
  );
}
 
export default App;

리액트 프로젝트를 만들면 생기는 src 디렉토리에 있는 App.js에 불러와서 사용하였다.

불러온 컴포넌트는 App 함수의 <div> 태그로 감싸져 있는 곳에 <Hello/> 이런식으로 작성하여 사용하면 된다. 위의 코드처럼 동일한 컴포넌트를 여러개 사용할 수 있다.

 

import React from 'react';
import Hello from './Hello';

코드의 맨 위에 리액트를 사용하기 위해 리액트를 불러오고 아까 만든 Hello 컴포넌트를 사용하기 위해

불러와 주었다.

 

실행 결과