[1] state 변경

• state란 react 객체로 컴포넌트 내에서 정보나 데이터를 보관하는 용도로 사용이 됩니다.

• react에서 state가 변경이 되면 리렌더링을 요청하게 되고 virtual DOM에서 변경이 된 부분에서 모든 자식 부분을 렌더링 하게 됩니다.

• setState()는 state객체를 변환시키게 하고 이전 state와 새로운 state값을 비교해서 state변경을 할 수 있습니다.

const [number,setNumber] = useState(0);

const onClickAddCount = () => {
    setNumber((prev) => prev + 1);  
}


return  (
    <div> 
        <h1> {number} </h1>
        <button onClick={onClickAddCount}> 카운트 증가 </button>
    <div>
);

[2] props 변경

• props는 부모가 자식에게 주는 요소로써 props 변경이 감지되면 리렌더링이 발생한다.

• state와 달리 처음에 준 상태 이후로 변경을 할 수 없다.

• 클래스와 함수형 컴포넌트에서 둘 다 사용가능하다.

[부모컴포넌트]

const [parentNumber,setParentNumber] = useState(5);

return  (
    <div> <ChildComponent number={parentNumber} <div>
);

[자식컴포넌트]

const ChildComponent = (props) => {

    const [number,setNumber] = useState(props.number);

    const onClickAddCount = () => {
        setNumber((prev) => prev + 1);  
    }


    return  (
        <div> 
            <h1> {number} </h1>
            <button onClick={onClickAddCount}> 카운트 증가 </button>
        <div>
    );

}

[3] forceupdate

• 강제적으로 리렌더링을 하는 방법

• forceUpdate(callback)

• 리액트에서도 권장하지 않는 방법이며 state와 props를 이용해서 렌더링을 하는 것을 권장하고 있다. 여태까지 단 1번도 사용해본적이 없다.

const onClickRerender = () => {
    forceUpdate();
}

[4] 새로고침

• 새로고침을 하게되면 dom이 모두 초기화 되어서 새롭게 모두 리렌더링이 된다.