[React Hooks 총정리] useState

State

: 컴포넌트의 상태

useState

• 컴포넌트의 상태를 간편하게 생성하고 업데이트 시킬 수 있는 도구를 제공해 줌

const [state, setState] = useState(초기값);

• state : 현재 상태 값
• setState : state를 변경 시켜 주고 싶을 때 이용
• state, setState의 이름은 변경 가능

const [time, setTime] = useState(3);

• time 컴포넌트 안에 state가 생기고 초기값은 3을 갖게 됨
• 시간을 변경하려면 setTime 함수를 부르면 되고, 인자로는 변경될 값을 넣어주면 됨

setTime(4);

• 이렇게 하면 time이 4로 바뀜

• setState 함수를 사용해서 state를 변경하면 해당 컴포넌트는 화면에 다시 렌더링이 되어 시간 스테이트가 변경될 때마다 화면이 업데이트 되는 시계를 만들 수 있음

---

실제 코드로 구현 1

실제 코드로 구현 2

• 이렇게 하면 state가 업데이트 될 때마다 무거운 작업이 계속 되기 때문에
  초기값에 콜백을 넣어주고 return 값으로 무거운 작업을 하는 함수를 불러줘서
  처음 렌더링시에만 실행이 되도록 설정해줘야 함