Class / Functional Component

리액트의 핵심은 Component이다.

컴포넌트를 만드는 방법

: Class Vs Functional Component

• 클래스형은 보다 복잡
• 함수형이 대세, 최신!

class 컴포넌트의 생명주기(Life Cycle)

컴포넌트의 생명주기는 컴포넌트가 브라우저에 나타나고 업데이트 되고, 사라지게 될 때 호출되는 메서드이다.
특정 시점에 코드/원하는 작업이 실행되도록 설정할 수 있다.

1. 그리기 → render
2. 그리고 난 뒤 → componentDidMount
3. 그리고 난 뒤 변경 → componentDidUpdate
4. 그리고 난 뒤 사라짐 → componentWillUnmount

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

const[count, setCount] =useState(0)
이를 쓰는 이유는... document.getElementById() 안써도 된다. 간결!

카운트가 1씩 올라가는 컴포넌트 버튼 만들기

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>
        </>
    )
}