React State

state

• 컴포넌트 안에서 관리되는 유동적 데이터

const [a,b, ...arr] = retArrayFunction( );
a = 1
b = 2
arr = (2) [3,4]

React component가 다시 render되는 조건 (일반적)

• prop이 update 된 경우
• state가 update 된 경우
• 부모 component가 다시 렌더된 경우 (재귀 호출)
  (위의 1번, 2번 이유 등으로 re-rendering 된 경우)

update를 판단할 때 주의할점 (참고: deep vs shallow)
primitive type인 경우 값까지 비교
reference type인 경우 참조까지만 비교

→ primitive type 값을 사용할 때는 setter함수 통해서 값을 바꿔주면되고,
reference type 값은 setter함수에 추가로 reference까지 바뀌도록 작성해야한다.

🚩 간단한 덧셈 계산기 만들기

import React from 'react';

const App = () => {
  const [result, setResult] = React.useState(0);
  return (
    <>
      <input type='number' />
      +
      <input type='number' />
      =
      <input type='number' disabled value={result} />
      <button type='button'>계산</button>
    </>
  );
}

export default App;

---

const App = () => {
  const [result, setLeft] = React.useState(0);
  const [result, setRight] = React.useState(0);
  const [result, setResult] = React.useState(0);
  return (
    <>
      <input type='number' onChange={(e) => setLeft(parseInt(e.target.value, 10))} />
      +
      <input type='number' onChange={(e) => setRight(parseInt(e.target.value, 10))} />
      =
      <input type='number' disabled value={result} />
      <button type='button' onClick={() => setResult(left + right)}>계산</button>
    </>
  );
}

• disabled에 있는 값은 드래그 불가, readonly는 드래그 가능으로 복사 가져가기 가능 = 사용자 경험 측면에서 다르게 적용 가능
• parseInt 문자열을 숫자열로 바꿔줌
• 얕은 복사와 깊은 복사

state 업데이트의 비동기성

• state가 업데이트 되는 횟수를 줄여서, render되는 횟수도 줄이고 그로인해 부하도 줄어드는 장점이 있음

const App = () => {
  const [num, setNum] = React.useState(1);
  return (
    <div>
      <div>{num}</div>
      <button
      type="button"
      onClick={() => {
        setNum(num + 1);
        setNum(num + 1);
        setNum(num + 1);
      }}
      >

      +3
      </button>
    </div>
  );
}

• 비동기성 해결 방법
  setter 함수의 인자로 함수를 넘겨줌

 onClick={() => {
        setNum(prev => prev + 1);
        setNum(prev => prev + 1);
        setNum(prev => prev + 1);
      }}

• 배치 업데이트

React Hooks

• 함수 component에서 state, side effect 등을 다루기 위해 사용하는 함수
• 일반적인 naming: use__
  ex) useState, useEffect, useMemo

---

+TIL

• useState

const [변수명, set함수명] = useState(초기값);

• useEffect

useEffect(() => {
  // 컴포넌트가 마운트 된 이후,
  // 의존성 배열에 있는 변수들 중 하나라도 값이 변경되었을 때 실행
  // 의존성 배열에 빈 배열[]을 넣으면 마운트와 언마운트시에 단 한 번씩만 실행됨
  // 의존성 배열 생략 시 컴포넌트 업데이트 시마다 실행됨
...
  return () => {
  // 컴포넌트가 마운트 해제되기 전 실행됨
  }
}, [의존성 변수1, 의존성 변수2, ...]);

• hook의 규칙
  • 무조건 최상위 레벨에서만 호출
  • 리액트 함수 컴포넌트에서만 호출