Hooks-1

useState

useState는 가장 기본적인 Hook 이다. 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다.

어떻게 사용할까요 ?? 일단 완성된 코드를 보면서 하나하나 분석을 해보겠습니다.

파일위치 : src/Counter.js

1   import React, {useState} from "react";
2
3   const Counter = () =>{
4       const [value, setValue] = useState(0);
5   return(
6       <div>
7           <p>현재 카운터 값은 <b>{value}</b>입니다.</p>
8       <button onClick={()=>{setValue(value+1)}} > +1 </button>
9       <button onClick={()=>{setValue(value-1)}} > -1 </button>
10       </div>
11     )
12   }

export default Counter;

위에 쓰여진 코드는 redux 에서도 사용된 Counter 입니다.

한줄한줄 코드 분석

1   import React, {useState} from "react";

react에서 {useState}를 import 해서 사용할 수 있게 해줍니다.

3   const Counter = () =>{
4       const [value, setValue] = useState(0);
5   return(
6       <div>
7           <p>현재 카운터 값은 <b>{value}</b>입니다.</p>
8       <button onClick={()=>{setValue(value+1)}} >+1</button>
9       <button onClick={()=>{setValue(value-1)}}>-1</button>
10       </div>
11     )
12   }

line3 에서 Counter 라는 이름으로 함수형 컴포넌트를 만들어 줍니다.

line4 에서 중요한 useState를 사용한다.

4      const [value, setValue] = useState(0);

위와 같이 사용한다. 이 함수를 분석해보면,

• useState의 파라미터에는 상태의 기본값을 넣어준다. 여기서 기본값은 (0)일 것이다. 카운터의 제일 초기 값은 0 이라는 것.
• 이 함수(useState)가 호출되면 배열(array)을 return 하게 된다. line4와 line5사이에 console.log(useState(0))를 입력한 뒤에, 새로고침 하여 console 창을 확인해 보자.
• (2) [0, ƒ] 라고 나올 것이다. 첫번째 원소에는 상태 값이 들어 있고, 두번째 원소는 상태를 설정하는 함수가 들어있다.
• 이 두번째 원소인 함수에 파라미터를 넣어서 호출하면 전달 받은 파라미터로 값이 바뀌고 컴포넌트가 정상적으로 리렌더링 된다.

이제 line5 ~ line11을 분석해보자.

5   return(
6       <div>
7           <p>현재 카운터 값은 <b>{value}</b>입니다.</p>
8       <button onClick={()=>{setValue(value+1)}} >+1</button>
9       <button onClick={()=>{setValue(value-1)}}>-1</button>
10       </div>
11     )

먼저 line8을 보자. <button onClick={ () => {setValue(value+1)} } >+1</button> 버튼을 클릭하게 되면 함수가 실행되는데, useState에 사용된 두번째 인자인 바로 그 함수이다.

• setValue(value+1) : setValue는 useState의 첫번째 인자인 value를 1씩 더해주는 함수인 셈이다.
• line9의 빼기도 같은 방식인 셈.

value = state라고 생각하고, setValue = setState 라고 생각해도 될 지 모르겠다…

• line7의 {value}는 현재 value를 그대로 보여준다.

여기까지 가장 기본적인 Hook인 useState를 사용해 보았습니다.

• 정리 : const[value, setValue] = useState(0)의 형식을 눈에 익혀두자..