분노 그 잡채

구구단

https://github.com/dodody/react-webgame/tree/react18

> 제로초님 코드 fork 해온 코드

0. 리액트를 왜 쓰는가

데이터가 바뀌면, 화면이 바뀐다. 이게 원래는 쉽지 않은거거든, 그 문제를 해결 하기 위해 spa(앵귤러, 리액트, 뷰) 프레임 워크들이 나오기 시작한것. 리액트 뷰, 스벨트 들의 다른 점은, 데이터와 화면의 일치의 문제를 다른 방식으로 해결한것.

1. 강의 수강 시 주의할 점.

제로초님은 2014년부터 하셨음.. 멋쟁이 

뷰나 스벨트가 사용성은 더 좋은데 한국의 대세가 리액트가 되어버렷어 ㅠㅜ 복잡한 웹앱에서 화면 일치 문제를 쉽게 풀어주기 위해.

네이버나 다음에서는 리액트로만 이루어진 웹 사이트 분석이 잘 안되서 검색엔진 노출이 잘 안된다. 무지성 리액트 사용을 제안하는건 아님!

리액트 배우느라 html, css, js에 소홀하신 분들이 있는데, 기본기가 없으면 훌륭한 웹어플을 만들 수 없다.

꾸준히 하셔야 한다~! 스코프나 실행콘텍스트 잘 익히고, 인간 자바스크립트 엔진 되기??? 강의를 무료로 풀어놓으셨다고 함 ㅋㅋㅋㅋㅋㅋㅋ 제로초님 다운 강의 이름이다. 자바스크립트를 못하면 리액트를 못한다.

제로초님은 기본기를 위해 CRA말고 html 부터 시작하신다고 한다. 아놔,, 이 우직함.

입문자를 교육하는 입장에서의 우직함을 2년 전부터 봐왔던거같은데 여전히 멋있으시다. 

2. 첫 리액트 컴포넌트 (아직은 class)

class 컴포넌트 엄청 오랫만에 코드를 친다. 거기에 html확장자에 리액트를 작성하는건 더더욱 오랫만인거같다. 

html 을 생성해서 리액트를 script로 불러왔다

리액트 공식사이트) https://reactjs.org/docs/add-react-to-a-website.html#step-2-add-the-script-tags

리액트가 특별한건 아니다. 웹 브라우저는 html css js 밖에 못 읽는다. 리액트도 결국 js일 뿐, js로 html 과 css를 만들어내는 것 뿐이다.

class, 함수형 컴포넌트 예시로 보여주는데 ㅋㅋㅋㅋㅋ 모른다 싶으면 다시 돌아가서 배우고 오라고 하시는 ㅋㅋ

리액트는 데이터 중심으로 움직인다~ 

3. 가독성을 위한 JSX (XML임!)

jsx는 js로 html를 표현하는 수단인데, xml은 html의 친구.

혹시 <button  onClick={() => {this.setState(liked: true)}> <button onClick={this.setState({liked: true})}> 

onClick에서 화살표함수가 들어갈 때의 여부에 차이를 모르는 분들이 있다면 바로 자스공부하러 가시랍니다~ 이유는 알려주지 않으셨다ㅋㅋㅋㅋㅋㅋ 그냥 보내만 버리시는ㅋㅋ

자바스크립트에는 태그 쓰는 문법 존재하지않는다. 위와 같이 사용했을때는 작동이 안되는 것이 맞다. 리액트에서는 어떻게 돌아가냐? 는 바벨 덕인데, 바벨 jsx 코드를 js에서 사용할 수 있는 방식으로 전환해준다. html에서는 바벨을 script로 불러오면 된다.