[Front end] React #3 웹 서비스 만들기 JSX

지금까지 리액트에 대한 소개 및 필요한 프로그램 설치를 진행하였다. 이번 포스팅부터 실제 영화 앱을 만들어 보도록 하자.

영화 앱에 필요한 API는 아래의 사이트에서 제공되는 것을 사용할 예정이다.

https://yts.lt/api

API Documentation - YTS YIFY

App Comonent 안에 return을 보면 html이 자리 잡고 있다. 이런 형태를 JSX라고 한다. JSX는 리액트 컴포넌트를 만들 때 사용하는 언어이다. 규칙은 심플하다. 예를 들면, css의 'class'가 아니라 'className'이라고 사용한다. 대단한 규칙은 아니다. 간단한 html일 뿐이다.

이제 3가지 컴포넌트를 만들어 볼 텐데, 첫 번째는 영화 리스트 컴포넌트(앱 컴포넌트), 두 번째는 영화, 세 번째는 영화 포스터, 이렇게 3가지 컴포넌트로 구성된다.

 

App.js App.css를 위와 같이 초기화 하자. 자, 이제 앱 컴포넌트를 살펴보자. 앱 컴포넌트는 각기 다른 function과 methods를 갖고 있다. 하나 기억해야 할 것은 모든 컴포넌트는 render function을 갖고 있다는 것이다. render 기능은 무언가를 보여주는, 출력하는 기능이다.

npm start를 실행하면, js의 모든 코드를 가져와서, html 파일에 담는다. 해당 html은 public 폴더에 찾을 수 있다. 이게 CRA로 만들어진 파일이다.

App.js 에서 간단한 문구와 index.html 에서 title을 추가해보자.

변경된 화면에서 크롬 디버깅(F12) 검사를 해보자. div에 id가 root이며 그 안에 class App과 Hello Reference 가 있다. 하지만 해당 문구는 html에 있는 게 아니라 App.js에 있다. 즉 우리는 index.js에 파일을 만들고 있는 것이다.

index.js는 react, reactDOM, css, 컴포넌트 'App'을 불러온다. 명령어를 살펴보면 ReactDOM이 render 한다. 무엇을? App을 해당 App은 App.js 에 정의되어있다. 해당 컴포넌트를 render 하는데 어디에? id가 root 인곳에 render 한다. root는 index.html에 정의되어있다.

여기서 react와 reactDOM의 차이는 무엇일까? 리액트는 UI라이브러리이다. reactDOM은 리액트를 웹사이트에 출력(render)하는 걸 도와주는 모델이다. 리액트를 모바일 앱에 올리고 싶으면? 그럴 때는 reactNative를 사용하면 된다.

이제 제대로 된 컴포넌트를 만들어 보자. App.js에 모든 영화 내용, 정보를 담을 예정이지만 현재는 비어있다. 새로운 컴포넌트를 만들고, 이름은 Movie.js, Movie.css로 하자. App.js를 참조해서 Movie.js를 만들어 보자.

Movie.js에서 함수형 Movie 컴포넌트를 정의하여 제목과 이미지를 표출하였다. 이미지는 MoviePoster 컴포넌트이고, 해당 컴포넌트를 Movie 컴포넌트에서 사용하였다. 이렇게 만들어진 Movie 컴포넌트는 App 컴포넌트에서 사용되어지게 되며 화면에 표출된다. 정말 간단하고 심플하다.

함수형 컴포넌트 이외에 클래스형 컴포넌트가 존재하는데 추후에 논의하도록 하자. 중요한 점은 JSX이다. 리액트로 작성하는 html 그게 핵심이다.