2일차 / React, 컴포넌트의 이해

대표적인 프론트엔드 도구로는 React, Angular, Vue가 있지만
가장 많은 사용자 수를 보유하고 있어 커뮤니티가 가장 활발하다.

또한 React(웹) React-Native(모바일 앱), Electron+React(데스크톱 프로그램)으로 활용가능해 React를 잘 하면 웹, 안드로이드, IOS, 데스크톱 서비스 모두를 만들 수 있다.

React의 핵심은 Component
컴포넌트는 부품을 가져와 조립하는 방식이다.
복사/붙여넣기로 코드를 만들면 하나하나 수정해야하지만,
컴포넌트는 원본 하나를 만들어 뿌려주는 개념이기 때문에 각 컴포넌트에 맞게 변경하여 사용할 수 있다.
요즘에는 클래스형 컴포넌트에서 함수형 컴포넌트로 바꾸는 추세이다.

let은 화면에 반영되지 않아 화면과 연동이 되는 state를 활용한다.

<let이 화면에 반영이 안되는 사례>
import { useState } from 'react'

export default function CounterStatePage(){
let count = 0

function counter(){
    count = count + 1
    console.log(count)
}

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

}

<스코프체인 사례>
import { useState } from 'react'

export default function CounterStatePage(){
let count = 0
const apple = 3

function counter(){

    console.log(apple)

    count = count + 1
    console.log(count)
}

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

}