[노마드코더] ReactJS로 영화 웹 서비스 만들기 - Basic of React

React는 UI 요소를 더 interactive하게 만들어주는 JavaScript library다. 

 

https://nomadcoders.co/react-for-beginners/lectures/3260

All Courses – 노마드 코더 Nomad Coders

 

1. react import: reactJS가 element를 생성하고 event lister를 추가할수있도록 해준다. 

2. react-dom import : react-dom은 모든 react element를 html body에 두도록 해주는 library or package다. 즉, elemen를 가져다가 html으로 바꿔준다.

 

render() shows it to the user & where to put 알려줘야함

 

 

id를 전달해서 지정할 수도, contents를 전달하수도, style을 추가할 수도 있음 

-> 이런 복잡한 과정을 거칠 필요 없음. 흐름만 이해!

 

대신 React를 이용하여 html을 수정할 수 있다. JS를 시작해서 element를 생성하고 react가 그것을 업데이트해서  html에 보여주는 역할을 한다.

---

React에서는 backgroundColor와 같은 property를 곧바로 추가할 수 있고 이를 활영하여 eventlistener도 전달 가능

createElement의 인자로 element 이름, property, content 를 차례대로 전달하면-> html 요소를 만들고, content도 넣고 event listener도 등록할 수 있다.

https://react.dev/reference/react/createElement

-> react JS를 이해하기 위한 방식으로 이렇게 작성하진 않음. 더 쉽게 작성해보자.

---

https://nomadcoders.co/react-for-beginners/lectures/3263

All Courses – 노마드 코더 Nomad Coders

JSX: 확장 문법. react요소를 만들어서 사용할 수 있게.  html과 같은 방식으로 작성. 바로 위의 코드들을 간편하게 작성

 

이렇게 작성하면 에러 발생. JSX로 작성한 코드를 브라우저가 이해할 수 있는 형태로 변형해줘야함 -> Babel 이용 

import 해주고 script type도 지정해줘야 함

 

그러면 Babel이 우리가 작성한 코드를 변경해서(아까 위에서 작성한 createElement()형식으로) header에 담아줌

 

 

--

 

추가한 요소들을 함수 처리해서 arrow 함수 ->  div 태그 안에서 컴포넌트 불러와 렌더링할 수 있음

위 방법과 function 선언해서 return 하는 방법은 동일

여러컴포넌트들을 합칠수도있음 (Container)

 

처음 index.js가 실행이 되는데 html 요소 중 root를 찾아(getElementById('root')) -> root안에 React Element를 생성 -> root.render를 이용해 생성한 Element를 화면에 보여줌. 이 때 render링하는 대상에 <App />이라는 컴포넌트가 있는데 그 상세 코드는 App.js에 있다.

App.js에 App이라는 함수를 정의해두었고, babel이 html 코드에 정의한대로 코드를 추가해줌