04_[노마드코더 ReactJS로 영화 웹 서비스 만들기]_21.09.19

아까 WIL을 적긴 했지만 그거랑 별개로 TIL을 적어야겠지...

 

오늘의 공부

 

노마드 코더의 리액트 초보자 강의를 들으며 다음주부터 배울 리액트를 대비한 빌드업 시작.

강의 길이가 짧지만 지식들을 한방에 때려넣다보니 금방 지친다..!

아직 2.1까지밖에 듣지 못했다. 

 

처음부터 난관이었던게, 나의 기본 지식으로는 html 파일을 불러올때 js가 길면 로딩이 오래걸린다고 생각했기에

"리액트는 자바스크립트에 html 내용을 넣어요" 라는 말이 이해가질 않았다.

내 지식상으로는 분명 비효율적인데, 리액트가 이렇게 한다는건 그게 효율적이라는 의미잖아?

 

검색해보고, 질문해보고 알게된것

간단하게 생각하자면 버츄얼돔을 이용해서 속도가 증~말 빠르다는것!!

그러니까 요즘 회사들은 다 이걸 쓴다고..

 

공부하면서 필기를 두페이지정도 했는데 여기엔 가볍게 정리해야겠다.

 

React.js에는 기본적인 파일들이 있는데 그중 우리가 자주 사용할 애들이 있다.

index.js, app.js

보통은 index.html 아닌가? 했지만 리액트에서는 아니다.

나의 기본지식이 정말 묵은지, 옛날 지식인걸 뼈져리게 느꼈다.

 

index.js는 app.js의 내용물을 index.html에 넣을때 사용된다.

이때 쓰는 코드는 ReactDOM.render(); 이걸 index.js에 넣고 저 괄호 사이에서 app.js를 불러준다.

이렇게 불러온 app.js는 컴포넌트라고 하는데 이런 내맘대로 여러개 만들수도있다.

컴포넌트라는 이 친구들은 일종의 함수이고 html내용물을 돌려준다.

이때 ReactDOM.render(); 에는 하나의 컴포넌트만 불러줄수 있다.

그러면 "나만의 컴포넌트"를 만들어 추가해주고 싶을때는?

app.js에 추가해주면 된다! 나만의 컴포넌트 js파일을 따로 만들어 app.js에 임포트 해서 사용해도 되고 그냥 app.js에 바로 적어도 된다.

 

간단하게 적었지만 그 외에 이런저런것도 노트필기했다. 컴포넌트명은 꼭 대문자로 시작해야한다거나. props라거나..

다 적으면 내 TIL이 너무 길어지고 주구절절 적으면 공부시간이 또 흘러가니 여기까지.