강신규

[React] useState + CallBack 본문

Framework/React

[React] useState + CallBack

kangnew 2024. 12. 24. 11:17

 

 

useState란 무엇인가?

useState는 React훅 중의 하나로, 함수형 컴포넌트에서 상태를 관리할 수 있습니다. 함수형 컴포넌트는 출력을 반환하는 함수로 상태를 갖지 않습니다. 하지만 useState를 통해 함수형 컴포넌트에서도 상태를 추가할 수 있습니다.

 

useState를 통해 컴포넌트의 상태를 관리하고, 상태가 바뀔 때마다 React가 자동으로 UI를 업데이트해줍니다.


함수형 컴포넌트란?

함수형 컴포넌트는 React에서 UI를 정의하는 컴포넌트 유형중 하나로, props를 받아 JSX를 반환합니다. 이 JSX는 React가 화면에 그릴 요소들을 정의하는 데 사용됩니다.

 

함수형 컴포넌트의 가장 큰 특징은 순수 함수처럼 동작한다는 것입니다. 주어진 입력에 따라 항상 동일한 출력을 반환하며 오직 매개변수를 통해 함수 내부로 전달된 인수에게만 의존해 반환값을 만든다는 점입니다.

  var count = 0;
  
  function increase(n) {
  return ++n;
  }
  
  count = increase(count);
  console.log(count);  //1

이 때문에 함수형 컴포넌트는 초기에는 상태를 가질 수 없었는데 React 훅(Hooks)이 도입되면서 변경되었습니다.

useState, useEffect와 같은 훅을 사용하여 함수형 컴포넌트에서도 상태를 관리하고, 부수 효과를 처리할 수 있게 되었습니다.


useState + CallBack

function App() {
  const [names, setNames] = useState(["홍길동", "김민수"]);
  const [input, setInput] = useState('');

  const handleInputChange = (e) => {
    setInput(e.target.value);
  };

  const handleUpload = (e) => {
    setNames((prevState) => {
      return([input, ...prevState]);
    });
  }

  return (
  <div>
    <input type="text" value={input} onChange={handleInputChange}/>
    <button onClick={handleUpload}>Upload</button>
    {names.map((name, idx) => {
      return <p key={idx}>{name}</p>
    })}
  </div>
  );
}
export default App;

 

names의 초기값에는 ["홍길동", "김민수"] 가 저장되어 있습니다. 버튼을 클릭할때 set함수 호출을 통하여 state가 업데이트가 진행된 후 렌더링을 진행합니다. 만약 names 상태를 가져올때 무거운 작업을 진행한다면은 성능에 안좋은 영향을 가져옵니다. 

function veryHeavy() {
	console.log('무거운 작업');
  	return (['홍길동', '김민수']);
}

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

맨 처음렌더링이 진행되면서 무거운 작업이 실행이 됩니다. 여기서 state를 업데이트 시켜줄때마다 veryHeavy가 호출되어 무거운 작업이 비효율적으로 호출됩니다. 여기서 우리는 가장 처음에 렌더링 될때만 불려지게 하면은 이 문제를 해결할 수 있습니다.

 

초기 값에 값을 넣어주는게 아닌 CallBack을 통해 veryHeavy를 리턴해주는 형태로 변경시 초기 렌더링에만 함수 호출이 일어나게 됩니다.

  function veryHeavy() {
    console.log("무거운 작업");
    return ["홍길동", "김민수"];
  }

  const [names, setNames] = useState(() => {
    return veryHeavy();
  });

 


결론

 초기값에 무거운 작업을 세팅해 줄때 바로안에 값을 넣어주는게 아닌 CallBack형태로 넣어주면은 맨 처음 화면 렌더링 될때만 함수가 호출됨을 알 수 있습니다.

 

 

'Framework > React' 카테고리의 다른 글

[React] useRef란  (0) 2025.01.08
[React] useEffect란  (5) 2025.01.02
[React] 상태 관리 최적화: 불필요한 리렌더링 줄이기  (0) 2024.12.04
React useRef vs 변수 vs useState  (0) 2022.11.25
React 상태관리 Context  (0) 2022.11.11