React Hooks🪝useState

리액트로 개발할 때 함수형 컴포넌트를 사용한다면, 리액트의 hooks를 활용할 수 있다.

그중에서도 useState에 대해 알아보자! 🤩

 

State란

먼저 State란, 컴포넌트가 가질 수 있는 상태를 의미한다. 

예를 들어 시계라는 컴포넌트가 있다면 이 시계는 상태값으로 현재 시간을 가지고 있을 것이다. 

useState가 컴포넌트의 상태를 간편하게 생성, 업데이트할 수 있도록 도구를 제공해 준다. 

 

위와 같은 방식으로 state 생성과 동시에 가져야 할 초기값을 useState 함수의 인자로 넣어주면 state와 setState라는 두 가지 요소를 배열 형태로 리턴해준다. 

현재 상태값은 state 변수에 들어있고, state를 변경시키고 싶을 때는 setState를 이용하여 변경시켜 줄 수 있다. 

state와 setState의 이름은 쓰임에 맞게 변경가능하다! 

ex)

// time이라는 상태를 가지며 초기값은 5
const [time, setTime] = useState(5);

// 시간을 변경하고 싶다면 setTime 함수의 인자에 변경할 값을 넣어준다.
setTime(6);

 

setState 함수를 이용해서 state를 변경하면 해당 컴포넌트는 다시 렌더링 된다 
즉, 상태가 업데이트 되면 화면도 다시 렌더링 된다는 뜻! 

 

 

콜백함수 활용

만약 상태 업데이트가 이전 상태에 의존할 때, 

ex) 

const [names, setNames] = useState(['가', '나']);
const [input, setInput] = useState('');

const handleUpload = () => {
	setNames(['가', '나', '다']);

 

위의 코드를 살펴보면 새로 업데이트할 state가 이미 존재하는 state에 의존하고 있으므로, setNames 인자 안에 직접 값을 넣어주는 것이 아니라 콜백함수를 전달해 주는 것이 좋다.  👇🏻

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

 

또한 names State의 초기값을 가져올때, 위 코드의 예시처럼 간단한 문자열(ex) 가, 나)이 아닌 무거운 작업을 해야 한다면 컴포넌트가 렌더링 될 때마다 계속해서 무거운 작업 또한 렌더링 되는 문제가 발생하여 성능 문제가 발생할 수 있다.

이런 상황의 경우에도 초기값에 값을 넣어주는 것이 아닌, 콜백함수를 활용하여 작성해주면 맨 처음 화면이 렌더링 될 때만 함수가 호출되어 성능을 개선할 수 있다. 👇🏻

// 초기값을 나타내는 인자에 값을 넣는 방법 ❌
const [names, setNames] = useState(heavyWork())


// 콜백함수를 넣어 불필요한 렌더링 방지
const [names, setNames] = useState(() => {
	return heavyWork();
})

 

 

 

 

 

 

 

✨별코딩님의 useState 강의를 수강하면서 정리한 내용입니다. ✨ 

잘못된 내용이나 부족한 부분에 대한 피드백은 언제나 환영입니다!