[React] React Hooks - useState 실습

react

어제 수업시간에 배운 것과 리액트 훅스 시리즈를 토대로 useState의 간단한 예제를 만들어보았다. 

const [상태, set상태] = useState(초기값)

 

useState는 상태가 변하면 다시 렌더링을 한다. 그래서 엄청 무거운 데이터의 경우 초기값에 값을 직접 넣어주거나  다른 변수로 선언한 뒤에 바로 전달하면 리렌더링을 할 때마다 렌더링을 할 때 마다 엄청무거운 초기값을 계속해서 불러와야한다. 

무거운 데이터를 사용해야 한다면, 초기값에 무거운 데이터를 바로 전달하지 말고 화살표함수로 전달해주어야 한다. 이렇게 하면 처음에 페이지가 불러와졌을 때만 데이터를 불러오고 상태가변할때마다 데이터를 다시 불러오지 않아서 효율적이다. 

//BAD
const heavyWork = () => {
  console.log('엄청 무거운 데이터!!! ');
  return [
    { id: uniqid(), n: 'JB' },
    { id: uniqid(), n: 'MARK' },
  ];
};

export default function App() {
const [names, setNames] = useState(heavyWork());
}


//Good!!
const heavyWork = () => {
  console.log('엄청 무거운 데이터!!! ');
  return [
    { id: uniqid(), n: 'JB' },
    { id: uniqid(), n: 'MARK' },
  ];
};

export default function App() {
  const [names, setNames] = useState(() => {
    return heavyWork();
}