React useState

안녕하세요! 오늘은 제가 React를 공부하면서 가장 먼저 마주한 React Hook 중 UseState에 대해 이야기 해보려고 합니다.

---

useState가 뭐길래? 🤔

React에서 가장 기본이 되는 Hook인 useState!
쉽게 말하면 우리가 만드는 컴포넌트에 "기억력"이라는 능력을 주는건데요.

코드 구조부터 알아보겠습니다.

const [count, setCount] = useState(0);

 

• count: 우리가 기억하고 싶은 값
• setCount: 그 값을 변경할 수 있는 함수
• useState(0): 처음 시작할 때의 값

* 두 번째 자리에는 통상적으로, 첫 번째 변수앞에 set을 붙이고 대문자로 시작하는 방법을 사용한답니다!

---

실전에서는 이렇게 사용합니다.

보통 사용하는 예시를 보여드리겠습니다.

function LikeButton() {
  const [likes, setLikes] = useState(0);

  return (
    <button onClick={() => setLikes(likes + 1)}>
      좋아요 {likes}개 👍
    </button>
  );
}

 

버튼을 클릭할 때마다 좋아요 수가 1씩 증가하는 간단한 컴포넌트예요. 너무 쉽죠?

• 초기 likes 값은 useState(0)으로, 초기값을 0으로 설정합니다.
• onClick동작이 발생되었을때, setLikes()함수에서 likes값에 1을 더하여 상태를 업데이트합니다.

---

!!! 주의사항🚫!!!

1. 초기값은 신중하게!

// 이렇게 무거운 계산은 콜백으로!
const [data, setData] = useState(() => heavyCalculation());

2. 이전 상태 활용하기!

// 이렇게 하면 더 안전해요
setCount(prevCount => prevCount + 1);

3. 여러 상태를 한번에 관리!

const [user, setUser] = useState({
  name: '',
  age: 0,
  hobby: ''
});

---

자주 하는 실수들 🚫

1. 상태 업데이트는 비동기로 처리됩니다.

// ❌ 이렇게 하면 안 돼요
setCount(count + 1);
console.log(count); // 바로 반영 안 됨!

// ✅ 이렇게 하세요
setCount(prevCount => prevCount + 1);

count+1이 업데이트 후, 출력되는 것이 아닌, 업데이트와 동시에 출력하기 때문이다.

2. 객체 상태 변경할 때는 스프레드 연산자를 사용하자.

// ✅ 이렇게 해야 해요
setUser(prevUser => ({
  ...prevUser,
  name: '치킨브랜드'
}));