React JS 배운 거 정리

React, ReactDOM, Babel

<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type = "text/babel">

react, reactDom과 javax를 사용하려면 위의 소스코드를 적어줘야 한다.
document.querySelector("div") 또는 document.getElementById("id") 등으로 hmtl 바디 태그 안의 위치를 지정해서 가져올 수 있다.

function, Arrow function

function App( ) { return( ); };
const App = ( ) => { }; //return 값을 지정해줘야 함
const App = ( ) => ( ); //오른쪽 ( ) 안의 코드가 return 값이 됨

위 function 함수와 아래 화살표 함수는 같은 동작을 한다.

setState 사용

const [state, setState] = React.useState(0);
const onClickButton = () => setState(current => current + 1);
return(
	<div>
  		<button onClick = {onClickButton}>Click : {state}</button>
  	</div>
      )

버튼을 클릭하면 숫자를 1씩 올려주는 코드의 일부이다.
useState를 사용할 시 나오는 두 인자를 [state, setState]로 받아준다.
state는 초기값을 나타내고, setState는 state를 바꿔주는 동작을 한다.
onClickButton 함수에서 setState를 이용해 초기값에 +1을 해주는 모습이다.