ReactJS - JSX를 이용해 React Components 만들기 | NomadCoders | 프로그래밍 공부

* 이 포스팅은 Nomad Coders의 강의를 들으며 내용을 정리한 것이며, 

모든 내용은 https://academy.nomadcoders.co/ 에서 보실 수 있습니다.*

이전 편에서 다루었던, 코드이다.

<p> 코드(paragraph) 사이에 hello thlee!를 삽입한 것을 볼 수 있다.

그에 따른 결과이다.

이번엔 <p> 태그 안에 있는 코드를 다 지워보겠다.

예상했듯이 빈 공간이 나타난다.

App.css로 가서, css 코드도 다 지우도록 하자.

App component를 살펴보자.

이것들은 각자 다른 functions과 methods를 가지고 있는데,

우리가 기억해야 할 것은 모든 components는 render funciton을 가지고 있다는 것이다.

render의 기능은 '이 componenet가 나에게 보여주는 것이 무엇인가' 이다.

public 폴더에서 찾을 수 있는 index.html 파일이 CRA(create react app)로 만들어진 파일이다.

우리가 yarn start를 하면, JS의 모든 코드를 가져와 이 html 파일에 담는다.

제목을 Movie App으로 바꾸고,

필요 없는 주석을 다 지운 뒤,

(body와 div 밖에 남지 않도록)

App.js 파일에 문장을 입력해보자.

입력한 문장이 나타날 것이다.

여기서 요소검사를 해보자.

마우스 우클릭 -> 검사를 들어가,

여기서 우리는 div id="root", div class="App", 그리고 입력한 문장을 발견할 수 있다.

하지만 우리가 입력한 문장은 html파일이 아니라, App.js 파일에 있다.

즉, 우리는 index.js에 파일을 만들고 있다.

index.js의 명령어를 살펴보면,

index.js는 react, reactDOM, CSS, component 'app'을 불러온다.

또한 ReactDOM이 render(출력)한다. 'App'를. (App.js)

id가 'root'인 곳에.

그리고 이 id는 index.js에 있었다.

지금 우리가 하고 있는 것은 App이라는 이름의 component를 render하고 있다.

그 app component 안에 여러개의 component를 만들 수 있지만, 출력은 1개만 하고 있다.

리액트는 UI라이브러리고,

리액트DOM은 리액트를 웹사이트에 출력(render)하는 것을 도와주는 모델이다.

우리가 기억해야 할 것은,

리액트DOM은 1개의 component를 출력하고,

그 document 안에 element가 있는데, element id는 root이다.

root는 index.html 안에 숨어있다.

그래서 render을 하면, 모든 component들이 여기서 출력될 것이다.

지금 코드를 쓴 이곳에.

새로운 파일을 만들어 보자.

Movie.js, Movie.css

그리고 다음과 같이 작성한다.

그리고 App.js로 돌아가서 import Movie from './Movei'로 movie 파일을 불러온다.

마지막으로 <div> 내부에 해당 component 이름을 써주면 된다.

<Movie /> 문법에 주의하자.(JSX)

html과 JS의 짬뽕이다.

return()을 사용하는 것을 잊어버리지 말자.

입력 값이 잘 출력된다.

즉, 우리는 작성한 Movie component를 App component 내부에 집어 넣은 것이다.

원하면 같은 component를 여러 번 불러올 수 있다.

이번엔 이미지를 삽입해보자.

이전과 같은 형식으로 component를 생성...

이름은 MoviePoster

<img src=""/>에 넣고 싶은 이미지 주소를 넣고,

Movie component 내에 <div> 태그를 생성, <MoviePoster />도 넣어준다.

짜잔! 요즘 개봉한 영화 포스터로 넣어주었다.

지금까지 우리는 큰 component 안에 작은 component를 집어넣는 방식으로 작업했다.

모든 component는 무조건 render 해야 하고, return 해야 함!

component > render > return > JSX

JSX는 react로 작성하는 html이다.