어제에 이어서!
오늘은 리액트(React)로 나만의 컴포넌트(Component) 만들기에 도전!
먼저, 주의해야할 것은 npm start상태를 유지해야 한다는 점이다. 그렇지 않으면 localhost를 계속 유지할 수 없고 새로고침을 했을 때 'page not found'가 나오게 된다.
어제 작성한
App.js파일에 있는 것은 HTML이 맞다.
index.js파일을 다시 보면 HTML처럼 생긴 것이 보인다.<App />이 그것인데, 이건 닮았긴 했지만 HTML이 아니다. 그럼 뭘까? 저게 바로 컴포넌트(Component)다. 컴포넌트는 그럼 뭘까?App.js에 나와있듯 HTML을 반환하는 함수이다. 컴포넌트를 작성할 때는 HTML의 태그를 작성하듯이< />이런 형식으로 써줘야 한다. 이처럼 자바스크립트와 HTML의 조합을 JSX라고 한다. JSX는 리액트에 특화된 개념이다. 즉, 다른 데서는 쓸모가 없다는 것:)
그럼 이제 나만의 컴포넌트
Minion을 만들어보자.
src폴더 아래Minion.js라는 파일을 만든다. 컴포넌트를 작성할 때마다import React from "react";를 반드시 써준다. 이걸 써주지 않으면 리액트는 여기에 jsx가 있는 컴포넌트를 사용한다는 것을 이해하지 못한다. 작성하는 함수명 역시 소문자가 아닌 대문자로 시작해준다.minion이 아니라Minion이다. 마지막으로 잊지 말아야할 것이export default Minion;을 작성해주는 것이다.
export default Minion;을 써주지 않으면 아래와 같이 나온다. 즉,Minion은 선언되었지만export하지 않아서 사용하지 않고 있다는 말이다.export까지 해주었으니 컴포넌트가 완성되었다!
완성한 컴포넌트는 어떤 식으로 사용해야 할까? 처음의
<App />처럼 사용해보자.index.js파일에 작성한Minion컴포넌트를import해주고<Minion />을 렌더해주었다. 결과는 어떻게 될까?
코드의 빨간 줄로 이미 예상했겠지만 컴파일에 실패한다. 왜 그럴까? 아래의 오류를 잘 읽어보면 알 수 있듯이 JSX를 인접하도록 하면 안되는 특징이 있기 때문이다. 즉, 리액트의 애플리케이션(application)에는 하나의 컴포넌트만을 렌더링해야 한다. 그 렌더링하는 하나의 컴포넌트가 여기서는
App이기 때문에 또다른 컴포넌트를 렌더링하려면 우회하는 방법을 선택해야 한다.
그럼
Minion컴포넌트를App아래로 넣어보자.App.js파일로 이동해서Minion컴포넌트를import해준다. 여기서./는 디렉토리(directory)라는 뜻이다.Minion.js와App.js는 같은 디렉토리에 있기 때문에./를 써준다. 마지막으로<div></div>안에<Minion />을 써주면 끝!
결과는!
오늘 컴포넌트를 만들면서 기억해야 할 것을 정리해 봤다.
- 리액트는 컴포넌트를 가져와서 브라우저(Browser)가 이해할 수 있는 평범한 일반 HTML로 만들어 주는 능력이 있다.
- jsx는 자바스크립트안의 HTML로 리액트에 특화된 개념이다. 컴포넌트를 만들고 어떻게 사용하는지에 대한 것이다.
- 리액트 애플리케이션은 한번에 하나의 컴포넌트만 렌딩할 수 있기 때문에
App을 제외한 컴포넌트는 모두App안으로 들어가야 한다. 그 안에 여러 개의 컴포넌트를 넣을 수 있고 그 컴포넌트 안에 또 여러개의 컴포넌트를import할 수 있다.
