react로 웹페이지에 component 추가해보기!

 배우면 배울 수록 재밌다. 오늘은 저번에 만들어 두었던 웹페이지에 component를 추가해보았다.

우선! vs code를 실행시키고 movie app을 실행시켜 준 후, src 내에 movie.js와 movie.css를 만들어 준다. css에서는 디자인을 담당하게 된다.

 

 

movie.js는 app.js와 비슷한 구성으로 만들어주면 된다. 여기서 "render -> 출력을 담당하는 부분"이라고 생각하면 된다. 

 

 

원래 app.js 안에 있던 내용들을 지워주고, app.css도 .App{} 만 남겨주고 다 지워준다.

 

 

그러면!!

 

 

따란! 이미지와 텍스트가 요소로 들어있는 것을 확인할 수 있다.

(+ 이미지는 구글에서 이미지를 새탭으로 열어준 후, 주소를 입력해주면 넣어줄 수 있다.)

(+ public에서 index.html 안의 title을 수정해주면 저렇게 movie app으로 title을 수정해 줄 수 있다!)

 

자세한 내용은 영상을 참고해 주세요..!! (노마드코더 영상 처음 배울 때 보면 좋은 것 같다..!!)

https://www.inflearn.com/course/reactjs-web/

리액트 처음이시라구요? React JS로 웹 서비스 만들기! – 인프런