[React] 올바른 초기값 설정하기

 

 

1. 초기 렌더링 시

function App() {
  const [list, setList] = useState();

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch("https://api.example.com/data");
      const result = await res.json();
      setList(result);
    };
    
    fetchData();
  }, []);

  return (
    <>
      {list.map((item) => (
        <Item key={item.id} item={item} />
      ))}
    </>
  );
}

위 코드는 useState훅을 사용해서 list라는 상태 변수를 만들고 데이터를 비동기적으로 가져와 list상태를 업데이트 하게 된다.

하지만, 상태변수를 만들 때 괄호가 비어있으면 초기값이 undefined로 설정되어 초기 렌더링 시 undefined.map()가 되어 오류가 발생한다.

그렇기 때문에 초기값을 빈배열 '[]'로 설정하면 초기 렌더링시에도 list가 유효한 배열이 되어 오류를 방지할 수 있다.

 

const [list, setList] = useState([]);

 

 

2. 이전 값을 활용해서 연산

function App() {
  const [count, setCount] = useState("0");

  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>버튼</button>
    </>
  );
}

useState 훅을 사용해서 count 변수를 만들고 버튼을 클릭할 때 현재 count에 1을 더한 값을 나타내려고 한다.

하지만, 초기값을 문자열로 설정했기 때문에 문자열 결합이 일어나 01, 011 이런식으로 증가하여 원하는 동작이 이루어지지 않는다.

 

const resetState = () => {
  setCount(INIT_COUNT);
};

만약 연산을 다하고 초기값으로 다시 설정하고 싶을 때 INIT_COUNT가 숫자인 경우 React는 내부적으로 타입 변환을 한다지만 일관성 없는 코드가 될 수 있다.

 

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