이 글은 React 공식 홈페이지를 참고하여 작성되었습니다.
처음 Velog를 생성할 때 꼭 해야겠다라고 생각했던 것이 바로 Hook에 대한 정리였다.
왜냐하면,
언젠가 부터 당연하게 Functional Component 형태로 개발을 하게 되면서 필요할 때마다 매번 공식문서를 켰었고,
이전에 분명이 이해했던 내용이 자주 헷갈리는 상황들이 생겼었다.
공부를 목적으로 문서를 보는게 아니라, 당장 눈앞에 있는 이 프로젝트에 대한 문제를 풀기위해서만 보아서 그런지 머리에 남는 것이 없는 느낌이었다.
그래서! Velog를 하게 된다면 완전 처음부터 Hook을 파보자 라고 결심했고, 이제 시작하려한다!
다소 기초적인 내용도 포함될 것이기에 하나하나 다루어 보고자 한다.
오늘은 Hook의 useState를 정리해보겠다.
import React, { useState } from 'react';
function Example() {
// "count"라는 새 상태 변수를 선언합니다
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}일단 위를 예시로 간단하게 기존의 클래스형 컴포넌트와 다른 점들을 보자면,
- 컴포넌트의 선언 방식이 함수 선언 방식으로 되어있다.
- state 값을 선언하고, 수정하는 방식이 다르다.
- 하나의 함수 형태로 컴포넌트가 구성되기에 render 가 아닌 return 으로 태그들을 감싼다.
크게 보자면 이렇게 세가지 인 것 같다.
좀 더 자세하게 살펴보자면,
클래스형 컴포넌트에서는 this.state에 state 값들을 선언하고, setState를 통해 state 값을 수정했다면,
함수형 컴포넌트에서는 state값과 그 값을 수정할 수 있는 함수를 쌍으로 선언하게 된다.
여기서 선언된 setCount 함수는 다른 곳에서도 호출이 가능하다.
그럼 setState와 useState의 함수의 가장 큰 차이점은 state 값을 수정할 때 이전 state와 새로운 state를 합친다는 것이다.
또한, 선언하는 형태가 배열형식으로 선언하게 되는데 요것을 배열 구조 분해 문법이라고하고,
배열 구조 분해(destructuring) 문법은 useState로 호출된 state 변수들을 다른 변수명으로 할당할 수 있게 해준다.
이 변수명은 useState API와 관련이 없다. 대신에 React는 매번 렌더링할 때 useState가 사용된 순서대로 실행하게 된다.
useState와 this.state의 차이점을 좀 더 자세하게 알고 싶다면 클릭 👈
useState를 통해 새로운 다수의 state 값을 선언하고 싶다면
import React, { useState } from 'react';
function Example() {
const [age, setAge] = useState(0);
const [genter, setGender] = useState(false);
const [phone, setPhone] = useState('010-1234-1234');
return (
<div>
</div>
);
}위와 같이 다중으로 사용하면 되고, 초기 값은 useState() 안에 선언해주면 된다.
이번 글에서는 Hook의 가장 기초인 useState를 살펴보았다.
처음 Hook을 접했다면, 코드는 이해가 되는데 무슨 말인지 하나도 안들어올 수 도 있다.
괜찮다! 공식문서에도 처음에 모든 것을 받아들이라는 말은 없다. 하나씩 하나씩 이해하다보면 자연스럽게 알게 될 내용들이다!
처음 Hook에 대해 포스팅하면서 생각이 든게, TypeScript를 이용했을 때 어떤 방식으로 해야되는지 막막했던 내가 떠오르면서 추후에 그것도 하나하나 정리해야겠다는 생각이 든다.
이상 끝!
