리액트 기초- 3

리액트 기초- 3

(https://academy.nomadcoders.co/courses/enrolled/216871)

(https://www.youtube.com/watch?v=sM2p1EqTlw4&list=PL7jH19IHhOLOFTVD4R8FeZWkwpVi8-9Fv)

노마드 코더 (Nomad Coders) 라는 분의 영상을 보고 배운 것을 정리한것입니다.

---

컴포넌트 추가로 만들어보기

Movie.js

Movie.css

파일 생성 후

App.js 와 비슷한 형태로 구현한다.

React - Component가 필요합니다.(import)

css를 후에 사용하기위해 미리 import 해줍니다.

render(){return();}

함수로 사용자에게 보여줄 부분을 구현합니다!

---

이렇게 구현해 놓은것을 사용자에게 실질적으로 보여주려면

index.js의 ReactDOM까지 도달해야합니다.

App.js가 그 역할을 하고 있으니

Movie.js는 App.js에 import를 합니다.

(App.js가 웹페이지 화면의 전체로 가장 넓은-큰 부분이라고 이해하면 될듯합니다.)

<Movie /> 를  <div></div> 태그 안에 넣어줍니다.

(컴포넌트를 불러오는 형태)

그리고 저장을 합니다!

Movie.js 안에 짜여진 코드가 보여지는걸 확인 할수있습니다.

---

React로 구현해낸 코드가 html에 실제 반영된 모습입니다.

---

이미지를 출력할 컴포넌트를 하나 더 추가하겠습니다.

(Movie.js 한 곳에)

render(){return()} - 잊으면 안됩니다!

<img src ="이미지 경로" />

를 render 하고

Movie div에 추가합니다!

---