※ 강의를 듣고 제가 이해한 것을 바탕으로 정리한 것이라서 오류가 있을 수 있습니다.
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 컴포넌트를 사용하기 위해
불러와 주었다.
실행 결과
'개발 공부한 내용 정리 > React' 카테고리의 다른 글
React- Input 상태 관리하기 (0) | 2020.08.29 |
---|---|
React- useState 를 통해 컴포넌트에서 바뀌는 값 관리하기 (0) | 2020.08.28 |
React- 조건부 렌더링 (0) | 2020.08.27 |
React- props (0) | 2020.08.26 |
React- JSX의 기본 규칙 (0) | 2020.08.25 |