Updated 2023/02/23
React Hook은 함수형 컴포넌트에 기능을 추가할 때 사용하는 함수다. 함수형 컴포넌트에서 상탯값을 사용할 수 있고 자식요소에 접근 할 수도있다.
내가 이해한 상태값?
사용자가 웹에서 뭔가 클릭도하고 입력도 하고 이것저것 하면서 일어나는 모든 동작이 상태라고 뭉뚱그려 이해를 하였다.
웹이랑 사용자랑 데이터로 핑퐁하는 와중에 당연히 값을 데이터에 넣어서 보내겠지. 그게 상태값인 것 같다.
useState
- useState는 컴포넌트에서 state값을 추가할때 사용된다. 함수형 컴포넌트에서는 클래스형 컴포넌트처럼 state를 사용할 수 없어, Hook을 사용해서 state와 같은 기능을 할 수 있도록 만들어주었다.
- 하나의 useState 함수는 하나의 상태 값만 관리를 할 수 있어 만약에 컴포넌트에서 관리해야 할 상태가 여러 개라면 useState 를 여러번 사용해야 한다.
1. import 해오기
import React, { useState } from 'react';
2. useState 선언하기
const [count, setCount] = useState(0);
- const[count, setCount]
useState()가 호출되면 배열을 반환하는데, 그 배열의 첫번째 원소는 상태값이고, 두번째 원소는 상태를 업데이트하는 함수이다. 이 함수에 파라미터를 넣어서 호출하게 되면 전달받은 파라미터로 값이 바뀌게 되고 컴포넌트는 정상적으로 리렌더링 된다.
- count 는 state 값을 의미
- setCount
count값을 업데이트하는 함수. 클래스 컴포넌트에서의 this.setState는 이전 state와 새로운 state를 합치지만 얘는 이전값을 덮어쓴다.
- useState(0)
숫자 0은 초기값을 의미. useState는 인자로 초기 state 설정값을 하나 받는다. 이 초기값은 첫 번째 렌더링 시에 딱 한 번 사용된다.
3. setCount 사용해서 상태값 변경하기
여기서 setCount는 비동기로 처리가 된다. 비동기는 응답과 상관없이 다음 동작을 처리하는 방식이다.
비동기로 처리되는 이유는 이 함수가 호출될 때마다 화면을 다시 그리기 때문에 성능이슈가 생길 수 있어서 그렇다.
function Example() {
const [count, setCount] = useState(0); // "count"라는 새로운 상태 값을 정의하겠습니다. 땅땅땅
return (
<div>
<p> You clicked {count} times</p> //상태값은 {count} 대괄호 안에 넣어서 쓰자.
<button onClick={() => // onClick 이벤트 함수를 정의해주자
setCount(count + 1) // 위에서 count 초기값이 0 이니까 0 + 1 은 1 !
}> Click me </button> // setCount 함수 내용으로 count 상태값이 바뀐다.(update)
</div> );
}
.
.
.
그로부터 2년 뒤, 초심을 잃지 않기 위해 새발자는 업그레이드된 beta 공식문서를 보면서 다시 한번 useState 를 복기해보았다.
'React' 카테고리의 다른 글
React(26) 리액트 훅 Context API 란 (0) | 2021.03.08 |
---|---|
React(25) 리액트 훅 useEffect란 (0) | 2021.03.05 |
React(23) 리액트 훅이란? (0) | 2021.02.25 |
React(22) <b> <br> 등 HTML 태그 제거하기 (0) | 2021.02.22 |
React(21) <img> 태그 추가하기 (0) | 2021.02.16 |
댓글