React ~0414 JSX, Babel + 燈下不明(등하불명)

왜 오늘 제목이 등 하 불 명이라는 사자성어가 뜬금없이 나왔는지는 글을 보다보면 알게 될 것이다.

 

자 아무튼 오늘은 저번시간에 이어 React가 상호작용하는 방식중 저번시간에 사용한 것 보다 더 간결하고 깔끔하게

작성하는 법을 볼 것이다.

기능은 저번과 살짝 다르다 버튼을 누르면  콘솔창에 메세지가 나오고, h3태그에 마우스를 올리면 콘솔창에 메세지가 출력 됨

먼저 저번시간보다 간단, 간결하게 표현하기 위해서  JSX(자바스크립트를 확장한 문법)을 이용한다. property를 HTML의

태그 속성처럼 적으면 된다.(line12~16 참고) 이 JSX를 브라우저가 온전히 이해하지 못하기에 (line9) script태그를 통해 babel.js를 설치해준다 그 후 마지막 우리의 코드가 적힌 script태그 안 type을 text/babel로 설정한다.(line10)

이와같은 방법으로 우리는 이제 JSX를 통해 createElement를 더 간단한 작성 방법(+가시성 good)으로 대체했다.

1. JSX를 통해 우리가 prop을 복잡하고 어렵게 설정했던 것을 html태그와 유사하게 간단하게 설정가능해졌다.
2. 다만 이 JSX를 통해 작성한 코드는 브라우저가 이해하지 못하기에 코드를 변환해주는 Babel을 설치한다.(line9)
3. 마지막으로 type을 Babel로 바꾸어주면 전에 작성한 코드(createElement)와 똑같이 작동한다.

+ 우리가 JS에서는 Evetnlistner를 통해 html의 버튼을 가져와서 제어했지만, React는 속성으로 Eventlistner를 추가 가능하다. 13번,18번을 각각 보면 속성값에 각각 마우스를 올렸을 때, 클릭했을 때 어떤 행동을할까 하는 함수또한 들어가있다.

이 코드를 이제 실행시켜 웹에서 요소(코드)를 보면 h3, button을 잘 갱신된 것을 확인할 수 있지만 Eventlistner는 없는 것을 볼 수 있다 React는 UI 상호작용에 힘을 많이 기울인 라이브러리인 만큼 이벤트는 감지해서 html안에 표현하지않고 스타일, 속성들만 표현한다.

 

끝~

 

자 지금까지는 내가 어제 있었던 일들 중 마지막에 순조롭게 마무리하고 이해한 내용이다.

사실 저 코드를 작성중에 계속 오류가 발생했었다. 오류의 내용은 이러했다.

 

 

구글링으로 2시간, 친구들에게도 질문을 해보고, 다시 한번 강의에 나온 코드랑 내가 작성한 코드에서 차이는 없는가

보고 또 봤다. 결국 알바전에 식사를 해야해서 오류 찾는건 잠시 접어두고 맛있는 떡볶이를 먹었다. 

보통 알바 첫 수업이 끝나면 다음 수업준비하거나 쉬는게 보통인데 어제는 오기가 생기더라 어려운 내용도 아닌데 왜

계속 오류가 발생할까? 답답해서 찾아보다가 결국 못했다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

그렇게 수업이 끝난 10시가 되서도 답답해서 찾아보다가 7,8번째줄 script태그가 둘다 >를 닫지 않은 것을 발견했다.

어이터지는 오류에 당황한 자아와 찾은게 어디야하는 자야가 충돌 쿵!

자 아무튼 우리는 코드를 작성하다가 오류가 생길 수 있다. 아니 많이 생긴다. 당장 과제랑 기초 코드만 작성하는데도

이렇게 실수를 많이하는데 실전으로 가면 오죽할까? 내가 제목에 적은 燈下不明(등하불명) 등잔밑이 어둡다

큰 실수는 찾기는 쉽지만 해결하기가 어렵다. 다만 보이지 않는, 이유를 모르겠는 실수라면 작고 작은실수일 가능성이

크다. 우리 눈을 부릅뜨고 오류가 생겼을 때는 스스로를 의심 또 의심하자!

 

다음시간에는 변수 container를 만드는 line22가 아직 createElement를 사용하고있다. 오늘과 같은 방법으로 

가시성좋고, 작성도 편리하게 끔 만들어보자ㅏㅏㅏ~! (｡･∀･)ﾉﾞ