useState의 무거운 작업에 대한 초기화

[yunseorim1116]

useState 무거운 작업에 대한 초기화

[yunseorim1116]

import React, { useState } from 'react';

// 무거운 작업 함수
const heavyWork = () => {
  console.log('엄청 무거운 작업!!!');
  return ['홍길동', '김땡떙'];
};

function App() {
  const [names, setNames] = useState(heavyWork()); // 초기 상태를 heavyWork()의 결과로 설정
  const [input, setInput] = useState('');

  // 입력 변경 핸들러
  const handleInputChange = (e) => {
    setInput(e.target.value);
  };

  // 업로드 핸들러
  const handleUpload = () => {
    setNames((prevState) => {
      console.log('이전 state: ', prevState);
      return [input, ...prevState]; // input을 names 배열의 앞에 추가
    });
    setInput(''); // 입력 필드 초기화
  };

  return (
    <div>
      <input type="text" value={input} onChange={handleInputChange} />
      <button onClick={handleUpload}>Upload</button>
      <ul>
        {names.map((name, index) => (
          <li key={index}>{name}</li> // 이름 리스트 렌더링
        ))}
      </ul>
    </div>
  );
}

export default App;

[yunseorim1116]

[yunseorim1116]

이렇게 변경해주면 ?

import React, { useState } from 'react';

// 무거운 작업 함수
const heavyWork = () => {
  console.log('엄청 무거운 작업!!!');
  return ['홍길동', '김땡떙'];
};

function App() {
  _**const [names, setNames] = useState(()=> heavyWork());**_ 
  const [input, setInput] = useState('');

  // 입력 변경 핸들러
  const handleInputChange = (e) => {
    setInput(e.target.value);
  };

  // 업로드 핸들러
  const handleUpload = () => {
    setNames((prevState) => {
      console.log('이전 state: ', prevState);
      return [input, ...prevState]; // input을 names 배열의 앞에 추가
    });
    setInput(''); // 입력 필드 초기화
  };

  return (
    <div>
      <input type="text" value={input} onChange={handleInputChange} />
      <button onClick={handleUpload}>Upload</button>
      <ul>
        {names.map((name, index) => (
          <li key={index}>{name}</li> // 이름 리스트 렌더링
        ))}
      </ul>
    </div>
  );
}

export default App;

[yunseorim1116]

[yunseorim1116]

핵심코드 : const [names, setNames] = useState(()=>heavyWork());
딱 한번만 실행됨.

[yunseorim1116]

• 복잡한 데이터 처리할때 유용할듯 하다..

[Duck-98]

위와 같은 상황이 발생하는 이유를 추가적으로 설명하자면 자바스크립트의 함수 실행 순서에 의해서 발생하는 것 같습니다!

첫 번째 방식

const [names, setNames] = useState(heavyWork());

이 코드가 실행되는 순서를 살펴보면

1. heavyWork()를 먼저 실행
2. heavyWork()의 반환값이 계산
3. 그 결과값이 useState()의 인자로 전달

즉, React의 useState가 호출되기 전에 이미 heavyWork()가 실행되어 있습니다. 컴포넌트가 마운트될 때마다 이 코드 라인이 다시 실행되므로, heavyWork()도 매번 실행

---

두 번째 방식

const [names, setNames] = useState(() => heavyWork());

1. () => heavyWork라는 함수 자체가 useState에 전달
2. React는 이 함수를 컴포넌트의 첫 번째 렌더링에서만 실행
3. 이후 렌더링에서는 이 함수를 실행하지 않고 저장된 상태값을 사용

[lukasjhan]

Right, using the return value of function or function itself.

[yunseorim1116]

lgtm~!