Redux 시리즈 - UseState() 란 무엇인가!

먼저 글을 쓰기에 앞서! 제가 하고 싶은 방식은 사람들이 코드를 직접 치면서 공부를 하는 사람들이 아마 대부분일꺼라고 생각하지만 제 깃허브를 공개해서 사람들과 함께 같이 코드 공부를 하고 싶어서 깃허브 레포지토리를 하나 개설하게 되었습니다. 이렇게 하면 개린이 분들이 저를 지적할 수도있어 개발자로서의 성장을 많이 할 수 있을꺼같아 개설하였으니 댓글의 많은 지적 부탁드리겠습니다!

---

자바스크립트

https://github.com/DongEsssss/react-study

---

 

useState()는 React에서 함수형 컴포넌트 내에서 상태 관리를 위한 훅 중 하나 입니다. 

 

역할 

컴포넌트에서 내에서 동적으로 데이터를 관리할 수 있게 만들어주는 HOOK!

가장 기본적인 훅으로 함수형 컴포넌트에서 가변적 상태를 지닐 수 있게 도와줍니다.

// 기본 형식
const [state, setState] = useState(initialState);

state: 현재 상태 값을 나타냅니다.
setState: 상태 값을 변경하는 함수입니다.
initialValue: 상태의 초기값입니다. 함수가 처음 실행될 때 이 값이 state에 설정됩니다.

특징

• 초기값 설정 : 상태의 초기 값은 컴포넌트가 처음 렌더링될 때만 적용
• 비동기  업데이트 : 상태를 업데이트하는 setState는 비동기적으로 실행
• 배치 업데이트 : 성능 최적화를 위해 여러 상태의 업데이트를 묶어서 처리 

예시

import React, { useState } from 'react';

export default function UseState() {
    const [count, setCount] = useState(0); 

  return (
    <div>
      <p>클릭한 수 :  {count}번</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

 

이런 식으로 클릭을 하면 count의 상태를  setcount 상태를 업데이트 할 수 있습니다.

 

useState 사용 시 주의 할 점

1. 반드시 컴포넌트 최상단 층에서만 불러야 합니다.

- 조건문이나 반복만 안에서 적을 경우 안에서만  Hook이 불립니다.

 

2. 함수형 컴포넌트 내부에서만 불러야 합니다.

- class형 컴포넌트 안에서 hook을 사용해서 안됩니다.

 

---

부족한 부분이 있다면 바로바로 업데이트 하겠습니다.!