* 리액트 - 현재 18버전까지 나옴.
리액트는 특별한 것이 아니다. 결국엔 자바스크립트, html, css 결과물이 나오는 것이다.
즉 자바스크립트, html, css를 잘해야 한다.
실무에서는 create react app 을 사용하지만 여기는 입문자 강의이므로 원시적인 형태로 시작한다.
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!--<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>-->
<!--<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>-->
<script>
'use strict';
React
ReactDOM
</script>스크립트에서 React 라이브러리와 ReactDOM 라이브러리를 사용할 수 있는데, 실무에서는 ReactDOM을 쓰는데 그러면 저 주석처리된 걸로 바꿔줘야 한다. 물론, 실무에서는 저렇게 스크립트로 사용하기 보다는 웹팩, 바벨 방식으로 사용하기때문에 저렇게 구현하는 경우는 거의 없다.
리액트는 크게 클래스 방식과 함수 방식이 있다.
지금은 클래스 방식은 99.9% 확률로 사용안한다.
1. 리액트는 자바스크립트이다.
2. 리액트는 데이터 중심으로 움직인다.
컴포넌트는 데이터와 화면을 하나로 묶어준 덩어리인다.
여기서 데이터는 state, 화면은 render의 return 부분.
리액트는 좀 더 쉽게 화면을 그릴 수 있도록 아래와 같은 문법을 제공한다. (JSX)
즉, 아래의 1번 방식은 2번 방식처럼 표현할 수 있다. 좀 더 익숙한 버튼 태그 html 방식으로 표현되기에 가독성이 좋다.
물론, 일반적인 html 에서 위 코딩은 돌아가지 않는다. 일반적으로 스크립트에 태그가 올 수 없기 때문이다. (브라우저가 해석을 못한다.)
그래서 바벨을 사용한다. 바벨은 사용자 모르게, 2번으로 작성된 문법을 1번으로 변경해주는 작업을 한다.
여기서 기본적으로 바벨을 적용할 수 있는 간단한 방법은 바벨 스크립트를 추가한다.
그리고 script 타입을 text/babel 로 해준다.
그러면 바벨은 text/babel 이 적용된 스크립트 내에서 특정 리액트 문법을 만나는 경우 브라우저가 해석할 수 있도록 자동으로 변환해주는 작업을 해준다.
위 소스가 정상 실행은 되지만, 브라우저 콘솔 오류가 나는 이유는 문법이 리액트 18 버전에서 달라졌기 때문이다.
ReactDOM.render is no longer ....
<script type="text/babel">
// ReactDOM.render(<LikeButton/>, document.querySelector('#root')); // 17 버전
ReactDOM.createRoot(document.querySelector('#root')).render(<LikeButton/>); // 18 버전
</script>
컴포넌트는 대문자로 시작하지만,
return의 html 태그는 소문자로 해야한다.(일반적인 html에서는 태그를 대문자로 작성해도 무방하지만, 리액트에서는 소문자로 해야한다.)
input 태그 같은 경우 닫는 태그로 해줘야 한다.
JSX 에서는 for, if 문 사용에 제한이 있어서 삼항연산자, map 을 많이 사용한다.
3. 리액트에서는 객체를 함부로 변경해서는 안된다.(불변성). 객체를 복사해라.
참고: js문법
pop, push, shift, unshift, splice -> 배열을 직접적으로 수정. 리액트에서는 이 문법들은 웬만해선 쓰면 안된다.
concat, slice -> 새로운 배열을 만들어냄. 리액트에서는 이런 문법들로 사용을 해야 한다.
객체를 변경하기 위해서는 setState를 사용해라.
리액트는 객체를 바꾸면 화면을 바꾸는거다.
바뀔 화면을 state로 만들어놔야 하고, data를 setState로 이용해서 바꾼다.
위 소스를 함수 컴포넌트 방식으로 바꾸면 아래처럼 되다.
태그 사이에 중괄호 {}를 넣으면 자바스크립트를 사용할 수 있다.
<React.Fragment>
<div>{first} 곱하기 {second}는?</div>
<form onSubmit={onSubmitForm}>
....
구구단 함수 컴포넌트 소스
돔에 직접 접근을 위해서는 ref 를 사용한다.
setState를 하면, render 함수가 다시 수행된다.
출처 : 인프런 - 제로초님의 웹 게임을 만들며 배우는 React 강의
https://www.inflearn.com/course/web-game-react/dashboard