React

React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 이다.

프레임워크 도구모음 중 리액트가 가장 많이 쓰인다.

리액트의 핵심은 Component!
컴포넌트를 통해 복잡한 UI를 체계적으로 구성할 수 있다.

페이지도 하나의 큰 컴포넌트가 될 수 있다.

컴포넌트를 만드는 방법
클래스형 vs 함수형(최신, 대세!)

• 클래스형은 보다 복잡

Hooks?

React-Hooks
-> use로 시작하는 애들.
-> State(리액트 컴포넌트 전용 변수)를 만들어주는 애
ex: useState, useEffect ...

컴포넌트에서 변수를 만들려면 state를 사용해야 한다.

const[변수명 state, 변수바꾸기 setState] = 변수만들기(hooks) useState(초기값 "철수")

const[count, setCount] =useState(0)

이것을 쓰는 이유는... document.getElementById() 안써도됨!
더복잡해 보이지만 결과적으로 더 간결해진다.

html과 javascript가 하나로 합쳐짐!

리액트로 카운트 버튼 만들기

import { useState } from 'react'

export default function CounterStatePage(){

    const [count, setCount] = useState(0)

    function counterUp(){
        setCount(count + 1)
    }

    function counterDown(){
        setCount(count - 1)
    }

    return(
        <>
        <div>{count}</div>
        <button onClick={counterUp}>카운트 올리기!!</button>
        <button onClick={counterDown}>카운트 내리기!!</button>
        </>
    )

}