리액트 기초- 2

리액트 기초- 2

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

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

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

---

movie-app2를 vscode로 확인해보면

여러 파일들이 생성되어있는걸 확인할수있습니다.

---

JSX

자바스크립트 안에 html이 포함되어는것으로

React 컴포넌트를 만들 때 사용하는 언어

사용법

1. css 사용시 'class' 가 아닌 'className' 을 사용

2. 자바스크립트의 값을 html에 사용시 {} 안에 변수명을 넣어서 씀

App.js

---

React는 컴포넌트 기반이다!

(컴포넌트란 무엇일까?)

(독립적인 하나의 객체라고 생각하면 되려나..)

중요한 것은

모든 Component는

render(){ return();}  함수를 가지고 있다! 입니다.

render의 기능

-> 뭔가를 보여주는, 출력하는 기능

-> 이 component가 사용자에게 보여줄 것을 return!

export를 통해서 App 클래스를 다른 js에서 불러들여 (import)하여 사용가능하게 해줍니다.

App클래스(컴포넌트)는 가장 큰 영역을 지칭하겠습니다.

---

index.js

React와 ReactDOM 의 차이

React = UI(User Interface)

ReactDOM = react를 웹사이트에 출력(render) 하는 것은 도와줌.

import App from './App';

App.js 파일로 부터 App 클래스를 import합니다.

그리고 그 App클래스(즉 component - 사용자에게 보여줄 부분)를 

html 안의 'root'라는 id를 사용 중인 부분에 뿌려줍니다.

(App.js 안에 render 해준 부분이요!)

index.html

---