데브코스 12주차 Day4 - state의 이해 (사용이유, 동작 원리)

State 사용 이유

let [cnt , setCnt] = useState(0);

 

일반 변수 대신 state를 이용해서 변경할 수 있다.

 

=> 왜 useState를 사용할까?

바로 재렌더링이 된다.

setState를 사용하지 않는다면 새로고침을 해야 변경이 된다.

 

• 변경이 자주 있는 변수들은 state를 사용한다.
• 변경이 자주 있지 않을 데이터는 일반 변수 또는 직접 쓴다.

 

 

State 변경함수의 동작원리

1. 기존 state와 신규 state와 비교/검사
2. 바뀐 값이 있으면 재렌더링한다.

하지만 이는 주소값기준이다.

 

예시

  const handleLike1 = (idx: number): void => {
    let cpLike = [...like];
    cpLike[idx] = like[idx] + 1;
    setLike(cpLike);
  };

 

만일 cpLike = [...like]이 아닌 cpLike = like로 한다면 같은 주소값을 가지게 된다.

왜냐하면 like는 배열이므로 call stack영역에 배열의 내용이 담긴 메모리 Heap영역의 주소가 들어있는데 cpLike에 이 주소를 넘기기 때문이다. 따라서 다음 줄에서 배열의 내용을 바꾸더라도 callStack에 저장된 주소는 달라지지 않기 때문에 상태가 바뀐 것을 인지하지 못한다.

 

spread문법을 사용하면 괄호를 벗겨 새로운 주소에 사본을 만들기 때문에 다른 주소값을 가지기 때문에 state가 바뀌었다고 인식하여 리렌더링이 된다.

 

 

 

배열과 같은 경우는 

 

이전에 작성하였던 포스트인데 이해에 도움이 될 것이다.

 

https://bsu0404.tistory.com/108

데브코스 11주차 Day1 - 컴파일, 변수와 메모리영역 with C

예시

 

spread를 쓰지 않은 경우 b와 a가 같다.

spread를 쓴 경우 a와 c는 같다.

 

 

컴포넌트

html 문법 자체가 길어질수록 매우 복잡하다.

리액트에서는 이러한 html문법을 한 단위로 묶어주는 기능이 있는데 컴포넌트이다.

함수와 흡사하나 html의 내용을 묶어놓는 것이다.

 

컴포넌트를 왜 사용하는가?

반복되는 것들을 간단하게 사용할 수 있다.

재사용을 위해서 

컴포넌트 안 return 문 안에서는 하나의 태그로 묶어야한다.

모듈화할 수 있다.

 

단점이 있다.

state변수를 공유하기가 불편하다는 단점

 

예시

const Timer: React.FC = () => {
  const [second, setSecond] = useState<number>(0);
  return (
    <div>
      <h1>타이머 : {second}초</h1>
      <button
        onClick={() => {
          setInterval(() => {
            setSecond((second) => second + 1);
          }, 1000);
        }}
      >
        {" "}
        시작{" "}
      </button>
    </div>
  );
};