1.2 why react
큰 회사들, 여러 웹사이트들은 React를 이용해 작업하고 있다.
React는 페이스북이 만들었는데 React로 웹사이트를 만들고 계속수정하며 더욱 발전하도록 투자를 하고 있다.
javascript와 비슷하기 때문에 react를 배우면 더 잘 이용할 수 있다.
2.0 introduction
바닐라 자바스크립트를 먼저만들고 리액트를 만들어서 어떤게 다른지 알아보자.
2.1 before React
우선 바닐라 자바스크립트로 버튼을 몇 번 클릭했는지 세주는 페이지를 만든다.
span.innerText =
Total Clicks: ${counter};
이 부분을 작성할 때 벡틱(``)으로 안하고 ''로 해서 오류가 났는데 벡틱이 어딨는지 몰라서 좀 헤멨다. 벡틱은 esc키 아래, 숫자 1왼쪽에 있다.
2.2 our first react element
HTML을 직접 작성하지 않고 javascript와 react js를 이용하여 element 를 생성한다.
우선 어려운 방법을 먼저 해볼건데 개발자들이 쓰는 방법은 아니라고 한다. 쉬운 방법이 있는데 어려운 방법을 먼저 배우는 이유는 react js의 본질을 이해하기 위함이다.
rander의 의미는 react element를 가지고 HTML로 만들어 배치한다는 뜻이다. 그리고 ("span",{ id: "sexy-span" },"Hello I'm a span"); 안에 span을 어디다 두어야하는지, 내용은 무엇인지 알려줘야 한다. body에 루트를 만들고 거기에 둔다.
18버전에는 영상강의에서처럼 ReactDOM.render(span, root)를 쓰지 않고 ReactDOM.createRoot(root).render(span); 라고 쓴다. 이것때문에 계속 오류가 났다.
바닐라 js에서는 html을 먼저 만들고, 그걸 javascript로 가져와서 html을 수정하는 식이었는데 react js에서는 모든것이 javascript로 시작한다. 그 다음에 html이된다.
2.3 events in react
버튼을 만들고 버튼에서 일어나는 event를 어떻게 감지하는지 알아본다.
onMouseEnter: () => console.log("mouse enter")
onClick: () => console.log("im clicked")
이 부분에서 onMouseEnter, onClick 전부 소문자로 적혀있어서 실행이 안됐는데 대문자로 수정하니까 잘 실행되었다.
근데 사진처럼 클릭은 여러번 되는데 마우스엔터는 여러번 되지 않았다. 강의에서는 둘 다 여러번 실행되던데 내껀 횟수가 여러번으로 측정되지 않았다.
2.4 Recap
React js, ReactDOM import 이유
React js: element 생성하고 event listener을 더하는 것을 도와준다. Interactive power을 가지게 된다.
ReactDOM: react element 들을 가져다가 HTML로 바꾸기 위함.
Body에 id가 root인 div를 만들었다. 이 비어있는 div는 reactDOM이 react element들을 가져다 놓을 곳이다.
그래서 그 root div를 가지고 온 후에 reactDOM.render을 했다. React element 들을 root div안에서 보여주라는 의미이다.
2.5 JSX
createElement를 대체할 수 있는 방법을 다뤄볼 것이다. Jsx가 훨씬 이해하기 쉽다.
생긴게 HTML이랑 비슷해서 JSX로 react요소를 만드는 게 개발자들 입장에서는 편하다.
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>위의 코드를 넣고, 기존의 스크립트 태그에 type="text/babel"를 추가한다.
Babel한테 코드를 넘겨주고 브라우저가 읽을 수 있도록 코드를 바꾼다.
우리는 사진의 위부분과 같이 코드를 작성하고 babel이 아래로 코드를 바꾸는것.
2.6 JSX part Two
컴포넌트를 다른 컴포넌트 안에 넣는방법
화살표함수는 function과 return문을 포함하고 있다.
컴포넌트의 첫글자는 반드시 대문자여야 한다.
<Title /> <Button />소문자로 쓴다면 react랑 jsx는 이게 html title, button 태그라고 생각한다.
