4. JSX / render / reactDOM / index.html / index.js

JSX

이렇게 JS안에 html이 있는데 이를 JSX라고 부른다.

JSX는 리액트 컴포넌트를 만들 때 사용하는 언어.

JSX의 규칙은 간단하다.

예를 들어 css의 class가 아닌 className 이라고 사용한다.

소스는 logo를 사용하며 위에 logo가 정의되어 있다.

표시된 부분이 JSX이다

 

리액트는 컴포넌트 기반이기에 리액트의 출발점은 바로 컨포넌트 디자인!

제작할 컴포넌트는 3가지

1. 무비 컴포넌트 (앱 컴포넌트)

2. 무비 카드

3. 무비 커버

 

컴포넌트는 다른 파일에 작성한다.

 

App.js, App.css 안에 있는 샘플내용들은 삭제!

+. 모든 컴포넌트는 render function을 가짐. render의 기능은 컴포넌트가 나에게 보여주는 것.

+. 하단의 나의 코드에선 class가 아닌 function으로 작성했으나 다음편의 props를 쓰기위해선 class로 작성해야한다.

 

터미널 창에 yarn start를 입력, 실행.

여담, 이렇게 실행하면 JS의 모든 코드를 가져와서 public폴더의 index.html파일에 담아낸다.

코드로 설명하자면

 

App.js에 hello라고 입력하고 저장하면

다음처럼 hello는 <div id="root"> 태그의 <div class="App"> 에 있다고 나타나는데

<div id="root"></div> 태그는 index.html태그이고

<div class="App">hello</div> 태그는 app.js의 태그이다.

즉, index.js에 파일을 만들고 있는 것!

index.js는 react, reactDOM, css, 컴포넌트'app'을 불러온다.

+. react는 UI라이브러리이고, reactDOM은 리액트(lib)를 웹사이트에 출력(render)을 도와주는 모델이며 리액트를 모바일앱에 올려놓고 싶다면 reactNative사용.

 

정리하자면

index.js > index.html > App.js 순으로 연결되어 있는 것

 

리액트돔은 1개의 컴포넌트(현재는 App컴포넌트)를 출력(render)

 

이제 코드를 작성해보자

앞서 설명했든 App.js의 <div className="App">태그안에 영화내용을 작성

 

src폴더안에 Movie.js, movie.css파일 생성.

Movie.js는 다음처럼 작성한다.

Movie.js는 App.js에 컴포넌트를 연결(App.js > Movie.js)

Movie.js와 App.js

 여기서 Movie.js에 이미지 function을 만들고 기존 Movie()에 삽입해서 출력해보자.

출력화면

정리해보자!

App 컴포넌트가 제일 큰 컴포넌트이고 그 안에 Movie컨포넌트라는 작은 컴포넌트가 들어가있다.

Movie컴포넌트안에 movie(), movieposter()라는 더 작은 컴포넌트가 있다.

 

필수기능은 이것이다.

컴포넌트 > render > return > JSX(리액트용 html)