[React TIL] State

220403

• 합입 크기로 잘라 먹는 리액트(React.js) 'state' 강의 수강

JSX

index.js는 최상위 컴포넌트를 생성하여 정의할 수 있다.
app 함수는 반드시 최상위 '태그'로 감싸주어 반환해야한다. (없으면 error)
태그 쓰기 싫으면, react.fragment 쓰거나 빈 태그여도 상관 없음
자바에서 class가 예약어이기 때문에 className으로 div의 id를 주어야 함
jsx 내에 존재하는 중괄호 내에는 숫자나 문자열만 가능함
삼항연산자도 활용가능 <- 조건부 렌더링 !
css import해서도, inline으로도 모두 사용 가능

State

계속해서 변화하는 특정 상태
상태에 따라 다른 동작을 수행 ex.다크모드

const Counter = () => {
    return (
        <div>
            <h2>0</h2>
            <button>+</button>
            <button>-</button>
        </div>    
    )
}

export default Counter

• 이 상태에서 우리는 버튼을 누르면 h2태그의 값이 바뀌는 카운트 컴포넌트를 만들것 이다.

const [count,setCount] = useState(0)

• 여기서 count라는 변수는 상태가 된다.
• 조건 : 0에서 출발, 1씩 증가하고, 1씩 감소한다
• useState 함수 활용
• setCount는 count라는 상태를 변화시키는 상태변환 함수로써 사용될 수 있음

import React,{useState} from 'react';

const Counter = () => {

    //0에서 출발
    //1씩 증가하고 1씩 감소하는
    //count 상태

    const [count,setCount] = useState(0);

    const onIncrease = () => {
        setCount(count+1);
    };

    const onDecrease = () => {
        setCount(count-1);
    };
        
    return (
        <div>
            <h2>{count}</h2>
            <button onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
        </div>    
    )
}

export default Counter

• counter 컴포넌트가 화면을 계속 새로그림 (상태가 변화할 때마다)

• rerender된다. 따라서 실시간으로 값을 바꿀 수 있는 카운터 구현이 가능한 것임

• react는 여러개의 state를 하나의 컴포넌트에서 가져도 전혀 문제가 되지 않음 !