강신규
[React] useState + CallBack 본문

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 |