[React로 영화 웹 서비스 만들기] 2020/11/24_컴포넌트 만들기

rememberme_jhk·2020년 11월 24일
1

Mini Projects

목록 보기
2/2

어제에 이어서!
오늘은 리액트(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.jsApp.js는 같은 디렉토리에 있기 때문에 ./를 써준다. 마지막으로 <div></div>안에 <Minion />을 써주면 끝!

결과는!


오늘 컴포넌트를 만들면서 기억해야 할 것을 정리해 봤다.

  • 리액트는 컴포넌트를 가져와서 브라우저(Browser)가 이해할 수 있는 평범한 일반 HTML로 만들어 주는 능력이 있다.
  • jsx는 자바스크립트안의 HTML로 리액트에 특화된 개념이다. 컴포넌트를 만들고 어떻게 사용하는지에 대한 것이다.
  • 리액트 애플리케이션은 한번에 하나의 컴포넌트만 렌딩할 수 있기 때문에 App을 제외한 컴포넌트는 모두 App안으로 들어가야 한다. 그 안에 여러 개의 컴포넌트를 넣을 수 있고 그 컴포넌트 안에 또 여러개의 컴포넌트를 import할 수 있다.

1개의 댓글