What is React

리액트는 자바스크립트 라이브러리로 UI 유저 인터페이스를 빌딩할때 사용 한다.
페이스북에 의해 2013년도에 개발 되었다!
리액트가 가장 영향력있는 UI 라이브러리 라고 해도 과언이 아니다.
리액트를 사용하여 컴포넌트를 제작한다.
이러한 컴포넌트들은 UI의 logical, reusuable 논리적이고 재사용성있는 파트를 나타낸다.
리액트의 장점이자 리액트의 아름다운 점은 바로 컴포넌트를 제작할때 javascript function으로 손쉽고 가볍게 만들 수 있다는 게 바로 리액트의 가장 큰 장점이다.

function Cart() {
	return (
    	<p></p>
    )
}

이렇게 자바스크립트 함수가 리턴하는 값이 바로 html ui인데 이것은 special syntax인 jsx로 작성 됐다.

jsx는 javascript와 html markup을 손쉽게 결합시켜준다.

function Cart(props) {
	return (
    	<p>{props.price}</p>
    )
}

만약에 데이터를 컴포넌트로 넘기고 싶을때는 props argument를 넘겨주고 만약에 값이 변할 경우에는

react에서 반응을 해서 ui를 업데이트 한다

우리가 만약에 컴포넌트에게 데이터를 넘겨주는게아니라 데이터를 갖고 있게 하려면

state hook이라는 React Hook을 사용한다

import { useState } from 'react';

function Cart(props) {
  
  const [count, setCount] = useSTate(0);
	return (
    	<p>{props.price}</p>
    )
}

state hook은 단지 그냥 function으로 value와 value를 바꿀수 있는 function을 return한다

count는 React의 State이고 setCount로 State의 값을 변경 할 수 있다.