React (1)

1. Our First React Element

좋아, 여러분. 이번 강의에서는
React JS element를 어떻게 생성하는지 설명해줄거야
기억해, 우리의 목표는 여기 있는 코드를 React JS로 다시 구현하는거야
자, React JS의 규칙 중 하나는 HTML을 이 페이지에 직접 작성하지 않는다는 거야
그렇게 안할거야
그 대신에, 우리는 Javascript 코드를 사용할 거야
span이든 버튼이든 무엇이든 만들기 위해서 말이지
HTML 코드를 직접 작성하지 않을거야
그 대신, Javascript와 React JS를 이용하여 element를 생성할거야
이건 정말 정말 유용한데
나중에 왜 그런지 알게 될거야
자 이번 비디오에서는, React JS로 element를 생성하는 어려운 방법을 먼저 보여줄거야
이번에 보여줄 방식은 개발자들이 작업하는 방식은 아냐
알겠지? 여러분도 알듯이 언제나 더 쉬운 방법이 있고 개발자들은 게으르지
도구를 제작해서 좀 더 생산적일 수 있을거야
자 이번에 다루는, React JS로 element를 생성하는 방식은 다른 사람들이 쓰지 않는 방식이야
모든 사람들이 쉬운 방식으로 React JS를 사용하고, 여러분도 쉬운 방법을 좋아하게 될 거야
하지만 여러분은 먼저 어려운 방식을 이해해야 해
어려운 방법을 암기해야 해서 그런 건 아니고
어려운 방식을 살펴보면서, React JS의 본질을 이해할 수 있을거야
알겠지?
좋아, 이제 첫 번째 React JS element를 만들어보자
span을 만들면서 시작해보자고
클릭을 세려면 이 span이 필요하거든
오케이?
여기에 const span으로 쓰자. 여러분이 원하는대로 쓰면 돼
HTML 태그와 이름이 같을 필요가 없다는 뜻이야
그리고 여기에는 React.createElement()로 쓰자
됐지? 여기에 React를 import했기 때문에,
createElement function을 가진 React object에 접근할 수 있지
그 다음 괄호 안에는 "span"
자, 여기에 적는 것은 여러분이 생성하고자 하는 HTML 태그와 똑같은 이름이어야만 해
이렇게만 하면 React JS로 element를 생성한거야. 아주 쉽지?
알겠어? 아주 간단해
자, 그 다음으로는 span을 페이지에 두어야겠지?
왜냐하면 여기 와서 새로고침하면 우리의 body는 비어있기 때문이지
span은 생성되었어
여기 console에 span을 치면
우리가 아직 이해할 수 없는 이상한 object가 나올거야
어쨌든 span은 존재하고, 생성되었지만 페이지에는 올라오지 않은거지
이제부터는 어떻게 body 안에 React element를 가져다 둘 수 있는지 살펴볼거야
알겠지? 내가 말했던 대로, React JS가 HTML을 생성할거야
알겠지? 우린 여기 이렇게 작성 안해도 돼. React가 대신 해줄거야
알겠지? 하지만 실제로 그렇게 하려면 react-dom을 사용해야 해
React JS는 어플리케이션이 아주 interactive하도록 만들어주는 library이고
react-dom은 library, 또는 package인데
모든 React element들을 HTML body에 둘 수 있도록 해줘
알겠지? 이 둘은 다른 역할을 하는거야
React JS는 엔진과 같아. 그렇지?
interactive한 UI를 만들 수 있게 하지
react-dom은 React element를 HTML에 두는 역할을 하는거야
자 다시, 우리는 어려운 방식으로 작업하고 있어
여러분의 진짜 어플리케이션에서는 이렇게 할 필요가 없을거야
나중에, 여기 모든 것이 처음부터 포함된 React JS 프로젝트를 생성하는 법을 설명해줄거야
그러니까 암기할 필요는 없어
이해하려고만 해봐. 알겠지?
좋아, 이제 ReactDOM을 이용해볼 건데
이건 여기서 import했으니까 사용가능해
여기에 ReactDOM.render()
자, render의 의미는 여기 React element를 가지고 HTML로 만들어 배치한다는 것이야
알겠어? 사용자에게 보여주는 거지
그게 render의 의미야. 사용자에게 보여준다
이제 여기에 span을 render한다고 쓰자
됐지? 그런데, 이제 reactDOM에게 어디에 span을 둘 것인지 알려줘야 해
여기 보면 아무 정보가 없어. ReactDOM은 이걸 어디에 두어야할지 모르지
그래서 많은 사람들이 하는 방식은, 여기에 id="root"를 가진 div를 만들고
이제 ReactDOM에게 span을 root 안에 두라고 하는거지
자 이렇게 하려면, 먼저 root를 가져와야 해
이건 일반적인 Javascript지. const root = document.getElementById
그리고 "root"를 가져오면 되겠지
됐지? 여기 이 코드, 우리는 아주 익숙하지?
이번에는 ReactDOM에게 말해줘야 해
span을 root 안에 render해달라고 말이야
이렇게 쓰면 돼
좋아, 끝났어
이 div가 우리가 마지막으로 body 안에 적는 HTML이 될 거야
이 단계 이후로는, 모두 이 방식대로 React element를 생성할거야
알겠지? 잘 작동하는지 살펴보자
여기 와서 새로고침하면
자, 이제 id="root"인 div가 있지?
여길 봐, 이 안에 span이 있어
대단하지?
span이 여기 있어. 여길 봐
자, 여기 있는 코드들로
여기 있는 코드로 element를 만들고, 이걸로 root 안에 넣었어
그리고 여기봐
여기 span이 생겼지? 물론 span은 지금 비어있어
createElement에는 우리가 더 작성할 수 있는 argument가 있거든
자 예를 들어, 두 번째 argument로 둘 수 있는 것은
span의 property들이야
무엇이 span의 property가 될 수 있는지 예를 들어보자
property는 class name이 될 수도 있고 id가 될 수도 있는거야
span에 두고 싶은 무엇이든지 괜찮아
우리의 경우
우리는 id가 "sexy-span"인 span을 만들어보자고
이 id를 사용할 것은 아니고, 여러분에게 보여주려고 만드는거야
그래서 React JS로 element를 생성하는 것이 얼마나 편리한지 보여주려고 해
좋아, 새로고침하면
이제 여기 span의 id가 "sexy-span"인 것이 보이지?
오케이? 단 한줄의 코드로
span을 만들고 id를 주었어
훌륭하지 않아?
그런데 아직 우리 span은 비어있지
span 안에 무언가를 넣어보자고
그건 createElement의 세 번째 argument로 들어갈거야
자, 이거 쓰는 법은 암기할 필요는 없어
여러분 이거 절대 다시 할 일이 없을거야
약속해, 이번 강의에서만이야
다른 React JS 강의에서는 이렇게 하지 않아
알겠지? 절대 이렇게 안하게 될 거야
알겠지? 하지만 이것이 핵심이야. 어려운 방식이지
나중에 쉬운 방식을 보여줄게
자, 계속해보자
createElement의 세 번째 argument는 span의 content(내용)이야
우리의 경우 다음같이 써보자. "Hello, i'm a span"
여기다
Hello.
I'm a span.
!BOOM!
됐지? 여기 와서 새로고침하면, 여길 봐
여기 있다
Hello I'm a span.
여기 HTML은 단 한 줄의 Javascript 코드로 만들어졌어
React.createElement를 사용했지
자, 첫 번째 argument는 "span"이야
어떤 태그든지 가능해
div도 되고 button도 가능하지.
유효한 HTML 태그이기만 하면 돼
그리고 다음으로 property를 줄 수 있지
어떤 property든지 여기 두면 돼
알겠지? 아마 우리는 style도 바꿀 수 있을거야. 여기에 style:로 쓰고
그리고 이 안에 color: "red"로 작성하면 돼
그리고 여기 와서 새로고침하면? 여길 봐
id="sexy-span"과 style="color: red;"가 있지?
자, 만약 여러분이 생각하기에 이게 너무 많은 작업이라면
단지 빨간 span을 페이지에 두는데 코드가 너무 많다고 생각한다면
그 생각이 맞을거야
여기 root를 생성해야 하고
두 가지를 import해야 하고
root를 가져와야 하고
element를 생성해야 하고
그 element를 render해야 하지. span을 페이지에 두는 것일 뿐인데 말이야
내 말은, 꼭 이렇게 어려울 필요가 없잖아?
페이지에 span을 두고 싶으면
그냥 HTML에 쓰면 되잖아?
그렇지?
자, 이번 강의의 요점은 여러분에게 지루한 예제를 보여줌으로써
React JS는 우리가 해왔던 방식을 거꾸로 하고 있다는 것을 설명한거야
바닐라 JS에서는 HTML을 먼저 만들고, 그걸 Javascript로 가져와서
HTML을 수정하는 식이었지
하지만 여기 보듯이, React JS에서는 모든 것이 Javascript로써 시작해
그 다음에 HTML이 되는거야
그리고 이것이 바로 React JS 파워의 핵심이지
Javascript와 React JS를 사용하여 element를 생성할 때에는
React JS가 element를 생성하고 있지?
이 말은, React JS는 업데이트가 필요한 element를 업데이트할 것이라는 말이야
바로 React JS가 결과물인 HTML을 업데이트할 수 있다는 것이지
업데이트가 필요하다면 말이야
React JS는 유저에게 보여질 내용을 컨트롤할 수 있다는 뜻이야
그것이 바로 핵심이야
우리는 HTML을 만들고, 찾아서 가져오고
그리고 나서 업데이트하고... 이런 식으로 하지 않을거야
알겠어? React JS에게 업데이트해야 하는 HTML을 업데이트하라고 할 거야
이렇게 하는 유일한 방식은 Javascript에서 시작하고, HTML에서 끝나는 거지
자 명심해, 여기서 Javascript를 이용해 element를 생성했고
React JS가 그걸 HTML로 번역하는거야
이것이 React JS의 파워인거야
나중에 React JS를 이용하여 element를 업데이트하는 방법을 살펴볼건데
React JS가 그 업데이트를 HTML에 보여주는 역할을 해
다음 강의에서 보자고. 거기에서는 React JS의 심지어 더 좋은 점을 살펴보려고 해
다음 강의에서, 이제 여기 코드들을 대체할거야
id를 만들 필요가 없어
여기도 필요 없어
버튼도 찾아서 가져올 필요가 없지
여기서 addEventListener를 달 필요도 없어
이런 것들 다 할 필요가 없다는거야. 다음 강의에서 알게 될거야
좋아, 다음 강의에서 보자
버튼을 만들어보자고
빠바이

2. Event

 좋아 여러분
이번 강의에서는 버튼을 만들어볼거야
그리고, 버튼에서 일어나는 event를 어떻게 감지하는지도 알아볼거야
기본적으로 여기 이 button.addEventListener가 대체될 거고
button=document.getElement~~ 여기도 대체될 거야
그리고 여기 id도 대체할 거야. id가 필요없거든. 알겠지?
자, 버튼을 생성해보자
여기에 와서 const button
명심해, constant의 이름은 HTML의 태그 이름과 반드시 일치할 필요가 없어
안그래도 돼. 하고 싶은 것으로 하도록 해
우리는 btn으로 두자고
됐지? 그 다음 React.createElement()
그리고 이 괄호 안에는 HTML 태그의 이름이 들어가야 하지
그래서 여기에 span 말고, button
됐지? 지금은 button에 아무런 property가 없어
여기 span에는 property가 있지? 이제 지울거야
여기다가 null을 두자
필요가 없으니까
여기에도 지금은 null을 두자
자, 다음 argument가 뭔지 기억나? button의 content가 들어가야 해
Click me로 두자
됐어
그 다음으로는 button을 render해야해
좋아, 여기 span을 btn으로 바꾸자
자, 이제 root 안에 btn을 render하고 있어
자, 잘 작동하는게 보이지? 여기 root가 있어
방금 생성한 button이 여기 있네. 완벽해
그런데, 여기 두 가지를 모두 render하고 싶다면 어떨까? span과 button 말이야
이 경우, 우리는 div를 하나 생성할거야
const div=React.createElement("div")로 두자
다시, 여기도 property는 없어
자, 이 다음엔 span을 먼저, button을 그 다음으로 render하고 싶어
어떻게 하냐면, 여기에 array를 두면 돼
그리고 array 안에 span, btn을 두자
좋아
이제 div를 render할건데, 그 전에 이름을 container로 바꾸자
헷갈리지 않게 말이야. container. 좋아
이제 div를 render하는데, 그 안엔 span과 button이 있지
여기와서 새로고침하면?
작동하는 것이 보이지?
div가 render되었는데, 그 안에 span과 button이 있지
뷰리풀
알겠지?
좋아. 나쁘지 않네
span을 h3로 바꾸자
알겠지? 보이는 모습을 이렇게 바꾸려고 그래
완벽해
오케이
우리는 기본적으로 2개의 component를 가지는 component를 생성한거야. 좋았어
하지만, 우리 미션에 집중하자고
우리의 미션은 여기 주어진 id="btn"을 대체하는거야
그 다음 button을 가져와서, addEventListener를 붙이고
그 다음 listener function을 만드는 거지
이걸 다 하는 대신에, 우리는 button에 property를 줄 수 있어
자, property는 지난 강의에서 봤던 것처럼
id나 class name, 또는 style도 될 수 있지. 하지만 그건 지루해
그거야. 너무 뻔하다고
그래서, 그 대신 이번엔 button에 event listener를 주는 거야
알겠어? 기본적으로는 이렇게 하는건데
하지만, React JS의 방식으로 해볼거야
id나 style 등을 바꿀 수 있다는 것 말고도 말이야
property에다가 event listener를 등록할 수 있어
그러니까 button.addEventListener 대신에
여기다 onClick이라고 적으면 돼
그럼 button이 클릭될 때마다 호출될 function을 여기에 작성할 수 있지.
'im clicked'
됐어
자, 이게 바로 React JS의 !POWER!야
바로 이 코드를 가지고
button을 만드는데
내부에는 content를 넣었고
바로 event listener까지 장착했지
그래서 여기 4줄의 코드를 한번에 대체한 거야. 한번에 말이지
엄청나지 않아?
span도 마찬가지로 이름을 h3로 바꿀게
혼동되지 않게 말이야
이제 span에도 또 다른 event listener를 달 수 있어
알겠지? 만약 여러분이 여기 event listener를 까먹었다면
여기로 와서 볼 수 있어. 정말 많이 있지?
이거 봐, 정말 많아
예를 들어 이런 것도 있는데
mouseenter? mouseleave mouseout 등등 원하는 걸로 하자고
우리의 경우 mouseenter로 해보자고
알겠지?
자, 그걸 해보러 가보자고
여기로 와서 h3에다가 새로운 event listener인 onMouseEnter:
여기 보면 알겠지만, event를 적는 방식이 좀 다르지?
바닐라 JS에서는 "click", React JS에서는 on
그렇게 해야 React JS에게 우리가 event listener를 생성한다고 알려줄 수 있어
이제 여기에 console.log
여기에 "mouse enter" 됐어
자, 한번 봐
이것이 React의 아름다움이야
React가 빛나기 시작했어
여기 있는 이 statement로만, 바로 이 코드로만
HTML을 만들고
content도 좀 넣고, event listener도 등록했지
자, 이것이 Javascript로 element를 생성하고
HTML로 바꾸는 방식의 힘이야
알겠지?
자 다시, 이제 이것 할 필요가 없어
여기 이렇게 가져올 필요도 없고
addEventListener도 쓸 필요가 없어
전혀 필요가 없지
그냥 createElement하고
HTML 태그를 선택하고, event를 이렇게 등록하면 돼
자, 이제 여기로 와서
클릭해보자. 짜잔!
작동하는게 보이지?
이거 봐. 잘 된다
자 이제 mouse enter 해보자.
와 이거봐
잘 된다 이거
보이지? 멋있지 않아?
정말 쉬워
자 다시, 하나의 statement만으로 이렇게 많이 해냈어
이것이 바로 React JS의 !POWER! 인거야
React JS는 바로 interactivity를 위하여 제작된거야
React JS 팀은 알고 있는거야
interactive한 어플리케이션에서 하는 작업들 모두가 event들을 감지하는 일이란 것을 말이야.
addEventListener를 반복하는 것 대신에
property에서 event를 등록할 수 있게 된 거야
알겠지? 하지만 명심해, 우리는 이런 방식으로 오래 끌고 가지 않을거야
알겠지? 다음 강의에서는 element를 생성하는 방식을 더 쉽게 바꿀거야
그게 더 보기 좋아
알겠지? 하지만 여러분은 이제 돌아가는 상황을 이해하게 되었어
그리고 여기로 와서 HTML로 오면 무언가 볼 수 있을거야
React JS는 스마트하기 때문에, 우리가 여기서 event를 등록했다는걸 알아
그래서 이 property는 HTML에서는 보이지 않는거야
물론 여기에 와서 id를 바꾸려고 시도한다면
id:'title'로 두자
새로고침하면 볼 수 있을거야
React JS는 이 property가 HTML에 놓여야 한다는 것을 아는거야
React JS는 또한 on + event는 event listener인 것을 알고 있어
그래서 HTML에는 없는거야
오케이?
봤듯이, 엄청 좋아
예를 들어 여기에서 style을 두고 backgroundColor: "tomato"로 할 수 있지
예를 들면 말이야. 자 됐어
이제 tomato도 나오고, 여기 HTML에도 tomato button이 있어
그리고 그 옆 코드에서는 event listener를 등록하고 있지
좋지 않아?
다음 강의에서 보자. 복습을 해볼거야
그 다음으로는, 이렇게 작성하지 않는, 다른 방식을 배워보자
이것도 쉬워보이지만, 나를 믿어봐
심지어 더 쉬운 방법도 있어
자, 다음 강의에서 보자고
빠바이

3. JSX (1)

좋아, 모두들
이번 강의에서는 createElement를 대체할 수 있는 방법에 대해 다뤄볼 거야
이 부분이랑 이 부분 말이야
오케이
굳이 createElement를 대체하려는 이유는 개발자들에게 좀 더 편리한 도구를 사용하기 위해서야
그 편리한 녀석은 JSX라는 녀석이야
JSX는 JavaScript를 확장한 문법이야
기본적으로 우리가 여기서 한 것처럼 React 요소를 만들 수 있게 해주는데
우리가 HTML에서 사용한 문법과 흡사한 문법을 사용해서 말이야
생긴 게 HTML이랑 비슷해서, JSX로 React 요소를 만드는 게 개발자들 입장에서는 굉장히 편해
이 부분을 주석 처리해줄게
왜냐면 여러분들에게 JSX를 이용해서 똑같은 컴포넌트를 만드는 걸 보여주고 싶거든
그러면 왜 아무도 이 방식을 고수하지 않는 지 알 수 있을 거야
내 생각엔 많은 개발자들이 아마 한 번도 이걸 사용해본 적도 없을 거야
왜냐면 다들 JSX를 사용하기 때문이지
이게 기존 우리 코드야
요소를 생성하는 오래된 방식이야
새로운 방식은 이런 식으로 진행돼
h3 태그를 적어주고
헷갈리지 않게 이름을 Title로 고쳐주자
보다시피 HTML과 똑같은 방식이지
h3태그를 열고 닫는 거야
그리고 이 사이에 내용을 담아줄 거야
HTML이랑 완전히 똑같은 방식이지
이제 props를 다뤄볼 차례야
props는 여기에 담겨
id="title" 입력
보이다시피, 이 부분을 보면 HTML이랑 생긴 게 똑같지?
완전히 똑같아
그리고 onMouseEnter는 마치 태그가 가진 하나의 속성인 것처럼 추가하면 돼
그래서 여기에 담아주는 거야
지금 이게 전에 이렇게 적은 거랑 완전히 같은 의미야
자, 여러분들 이거에 대해 어떻게 생각해?
정말 멋지지 않아?
이게 바로 JSX야, 일반적인 HTML이랑 거의 똑같이 생겼지
똑같은 규칙으로 진행하면 돼
h3태그를 열었으면 닫아주고
내용은 그 열고 닫는 태그 사이에 담기고
그리고 property는 마치 HTML 태그의 속성처럼 적으면 돼
만약 지금 image가 있으면 여기에 image라고 적어주면 되고
그리고 원래 image 속성인 src
플러스 React.JS extension으로 이벤트리스너들을 처리해주면 되지
얼마나 멋져
굉장히 편리하지
이제 버튼을 다시 만들어보자
여기로 와서 이것들을 전부 지워주도록 할게
굉장히 간단하게 새로 적을 수 있을 거야
여기로 와서 이렇게 Button을 만들어 주고
그리고 그냥 button 태그를 적어주고
좋아
내용은 "Click me"가 되겠지
위와 같이 입력
이제 style은 prop이 될 텐데
그리고 이 객체를 넘겨줘야 겠지
그래서 style을 만들어 주고
이렇게 옮겨주면 돼
그리고 onClick 이벤트에 이 함수가 연결되어 있잖아
그래서 여기 onClick을 만들어 주고
그리고 함수를 담아주면 끝
이제 이건 지워줄게
보다시피 개발자들이 봤을 때, 어떤 내용의 코드인지 한 눈에 들어오지
HTML 코드랑 굉장히 비슷하니까 말이야
오케이
이게 다야, 이게 JSX고
그리고 이래서 사람들이 createElement를 사용하지 않는 거지
내가 createElement를 사용하지 않는 이유는
여러 가지 것들을 기억해가면서 진행해야 되기 때문이야
근데 JSX는 봤을 때 이해하기가 훨씬 쉽지
심지어 HTML과 같은 규칙을 사용하고 말이야
태그를 열고 닫고, 내용은 그 사이에 담고, props는 여기 담으면 되고
그러면 끝이지
이제 여기로 와서 새로고침해주면 에러가 발생할 거야
왜냐면 브라우저가 온전히 JSX를 이해하는 것은 아니라서 에러가 발생하는 거야
그래서 브라우저가 JSX를 이해할 수 있게 뭔가를 설치해줘야 돼
한 번 변환해줘야 하지
JSX는 기본적으로 똑같아
이게 이렇게 바뀌는 거야
어려운 방식인데 우린 이미 이걸 해봤잖아, 그래서 좋은 거 같아
우린 이제 이 코드를 아래와 같이 변환시켜야 돼
이걸 하는 데에 Babel을 사용하려고 해
오케이
Babel은 코드를 변환해주는 녀석인데
여러분들이 JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꿔주는 거지
브라우저는 JSX를 모르니까 말이야
브라우저는 JSX를 invalid하다고 생각해
그래서 Babel로 와서 한 번 사용해보면, 우리가 적은 코드를 어떤 식으로 바꿔주는 지 볼 수 있을 거야
예를 들어서, 여기 이 코드를 복사해서
여기 붙여넣기 하면
여기 보이는 이게 그 결과물이야
어렵게 생각할 필요 없어, 우리가 이미 적어 본 코드니까 말이야
여기 Title h3 이것들이
이 부분은 일단 지우자
오케이
Title, h3, id="title", onMouseEnter 다 똑같아
봐봐 Title
React.createElement 전에 한 번 해본 거지
그리고 태그 이름, 전에 한 거랑 같은 코드야
그리고 나서 props, 이것도 해본 거고
그리고 "Hello I'm a title"
봤다시피, 똑같아
둘 다 같은 의미지만, 개발자들은 이걸 사용하길 원할 거야
오케이
자, 이제 이 변환기를 설치해줄 건데
Babel standalone을 이용해서 다운받을 거야
우리는 지금 배우고 있어서 이 방식으로 진행하는 거지
혼자할 때는 절대 이렇게 할 일이 없을 거야, 이 방식은 느리거든
더 나은 방식들이 있어
지금은 이렇게 하겠지만, 항상 이렇게 할 필요는 없어
이 코스에서만 이렇게 진행하는 거야
이제 새로고침하면 아직 잘 동작하지 않지
왜냐면 여기 type을 안적어줬거든
type="text/babel" 입력
자, 새로고침하면 h3이 정의되지 않았다고 뜨는군
사실이야
container로 와서 createElement를 보면 h3는 존재하지 않아
대신 Title이랑 Button이 존재하지
위와 같이 입력
이제 새로고침해주면 자, 이제 전부 잘 작동하지
이벤트리스너들도 전부 똑같이 동작하고 말이야
우리가 어려운 방식을 먼저 해보길 잘한 거 같아
덕분에 이제 React.js를 무서워하지 않게 됐잖아
사실은 이게 React.js인데 말이지
createElement, 이름, props 그리고 내용들 말이야
이건 좀 더 편한 방법일 뿐이고
하지만 이제 우린 뒤에서 어떤 일들이 일어나는 지 알고 있지
보다시피, 이벤트리스너를 등록하는 방식도 달라진 게 별로 없지, 이름도 같고
단지 여기 등호같이 문법이 조금 달라진 게 다야
onMouseEnter하고나서 콜론이 붙었던 거 대신
onMouseEnter에 등호하고 괄호를 열어주는 게 다야, 크게 달라진 건 없어
그리고 보다시피 완벽하게 잘 동작하지
여기 스크립트를 보면
이게 우리가 Babel한테 넘겨준 코드고
Babel이 그걸 브라우저가 읽을 수 있는 코드로 바꿔서 head에 담아놨지
보다시피, 우리가 전에 했던 거랑 똑같지
오케이
여기에 Babel에 넘겨준 코드가 있고
윗 부분에는 Babel이 변환한 코드가 담겨 있어
createElement로 우리가 했던 방식으로 말이야
여기 까지가 JSX 소개 시간이었고
JSX에 대해 알아야 할 다른 것들은 다음 강의에서 다뤄볼 거야
왜냐면 이 라인도 바꾸고 싶거든
오케이
createElement를 그만 사용하고
이런 방식으로 하고 싶어
좀 더 cool한 방식으로 하면 좋잖아
JSX를 이용해서 말이야
그럼 다음 강의에서 보자구
바이 바이

4. JSX (2)

좋아, 모두들
이번 강의에서는 여기 이 코드들을 다른 방식으로 적어볼 거야
왜냐면 난 이런 식으로 Title과 Button을 렌더링하고 싶지 않거든
대신에 내가 하고 싶은 건 JSX 사용해서 표현하고 싶어
createElement 대신에 말이야
좋아, 그래서 일단 이 부분을 지워주고
이 container를 대문자로 바꿔줄게
Container라고 적어주고
div 태그를 담아줄게, 이렇게 말이야
그리고 내부에 Button과 Title을 렌더링해줄 거야
변수들의 이름에 따라 이런 식으로 적어줄 수 있겠지
그리고 물론 Container를 대문자로 적어주는 거 잊으면 안돼
그리고 새로고침 해주면 에러가 발생할 거야
실제로 에러는 아니지만 텍스트가 나타나버렸지
보다시피 그냥 텍스트야, 웃기지도 않지
우리가 여기서 하고 있는 건 그냥 텍스트를 적고 있는 거야
말 그대로 이 모든 요소들은 하나도 포함시키고 있지 않지
예를 들어, Title이나 Button을 포함시키기 위해서 우리가 해야할 건 첫째로
이 녀석들을 함수로 만들어줘야 돼
그래서 이런 식으로 함수로 만들어주면 돼, 굉장히 간단하지
우리는 이렇게만 해주면 돼
혹시 모른다면, 이건 arrow function이라고 불러
이렇게 하는 거랑 똑같아
앞에 function을 붙여주고
그냥 똑같아
이렇게 해주고
그리고 return을 해줘야 돼, 굉장히 중요하지
여기로 와서 JSX를 return해줘야 돼
이렇게 적는 건
함수를 만들어서 return 해주는 거랑 같은 거야
아예 똑같아
오케이
자, 이제 이 녀석들을 함수로 만들어줬어
나는 이 녀석들을 여기에 포함시키고 싶어
이런 방식으로 하진 않을 거야
왜냐면 이건 JSX라서 JSX의 규칙이 있거든
이제 우리가 하려는 건, 이것들이 마치 일반적인 HTML 태그인 것처럼 포함시켜줄 거야
오케이
만약 이게 image 태그였다면 이런 식으로 적어줬겠지?
이렇게 말이야
예를 들어, Title을 렌더링하고 싶으면 우린 이렇게 대문자로 Title이라 적어줄 거야
그리고 Button도 같은 방식으로 해줄 거야
이게 다야
봐봐
이렇게 함으로써
우린 지금 여러 컴포넌트들이 합쳐진 구성을 만들고 있는 거야
div 태그를 렌더링하고 있는 컴포넌트가 하나 있는데, Title에 관련된 코드를 포함시키고 있는 거지
이렇게 Title 이라고 적어주는 건
여기로 와서 코드를 복사 붙여넣기해주는 거랑 똑같아
하지만 코드를 좀 더 정돈 해주지
깔끔해보이지 않아?
보기에 아주 좋은데
기억해야 될 게 컴포넌트의 첫 글자는 반드시 대문자여야 한다는 거야
만약 소문자면 React랑 JSX는 이게 HTML button 태그라고 생각할 거야
대문자로 적어준다는 건 여기 있는 Button 이란 걸 말해주는 거지
그래서 대문자로 적어주는 게 굉장히 중요해
여러분들이 직접 만든 요소는 전부 대문자로 시작해야 돼
만약 HTML 요소라면 이렇게 소문자로 적어주면 되겠지
오케이
이건 HTML button 태그고
이 대문자 Button은 여러분들이 생성한 Button이야
보다시피, JSX는 어플리케이션을 여러 가지 작은 요소로 나누어 관리할 수 있게 해줘, 정말 멋지지
여러 요소로 잘게 쪼개서 만들어서 합쳐 주기만 하면 되는 거지
한 쪽에서 Title을 만들어 주고, 이렇게 말이야
그리고 여기서는 Button을 만들어 주고
이렇게 보기 쉽게 코드를 분리한 뒤에 함께 렌더링하는 거지
오케이
좋아, 이제 이게 어떻게 동작하는 지 봐보자
여기로 와서 새로고침 해주고
검사를 눌러주고
Console로 오면
보다시피, 모든 게 똑같이 동작하고 있지
여기 우리가 Babel에게 넘겨준 코드를 보면
Title 함수, Button 함수가 있고
그리고 이 둘을 렌더링하고 있는 Container가 있어
그리고 이것들이 변환된 코드가 여기 있는데
Title 함수가 createElement를 return 하고 있지
보다시피, 차이가 없어
createElement를 return 하고 있는 Button 함수도 있고
여기도 바뀐 게 없지
그리고 여기 마찬가지로 createElement 해주고 있는 Container가 있고
여기서 하고 있는 일은
Title과 Button을 이용해 Element를 만들고 있지
보다시피, 말 그대로 createElement 투성이야
당연히 이 방식이 훨씬 이해하기 쉽지
마지막으로 절대 잊으면 안되는 정말 중요한 건
여러분이 직접 만든 컴포넌트를 렌더링해서
다른 곳에서 사용할 때는 항상 대문자로 시작해야 된다는 거야
이렇게 하면 그냥 HTML title 태그가 되어버려
하지만 이렇게 하면 내가 여기 만든 Title 요소가 되는 거지
아주 아주 중요해
좋아, 이제 이 부분도 바꿔줄 수 있어
이런 식으로 만들어 주는 거지
이제 새로고침하면 에러가 발생할 거야
왜냐면 이 녀석을 함수로 만들어주지 않았거든
이제 보다시피 다 똑같이 잘 작동하지
각각의 요소들이 이벤트 리스너를 잘 가지고 있고, 다 똑같아
하지만 이제 개발자들이 보기에 조금 더 정돈돼있지
자, 우리는 방금 배운 건 어떻게 하면 컴포넌트를 다른 컴포넌트 안에 넣는가야
오케이
그게 다야~
다음 강의에서 이번에 배운 걸 전부 복습해줄게
이 Title함수 부분은 이렇게 하는 거랑 같은 거야
지금 여기 세 개 아니 네 개의 글자가
function하고 괄호를 연 다음 return 하는 거랑 같은 의미야
이게 지금 function이랑 return문을 이미 포함하고 있는 거야
하는 일은 같아서 사람들이 이걸 더 선호하지
다음 복습 강의에서 보자구
바이 바이