Chapter03. 리엑트 훅 / useState 훅 기초

<< 학습 목표 >>

1. useState 훅을 사용해야하는 이유를 설명할 수 있다.

2. setter 를 사용해 usState훅으로 선언한 변수의 값을 변화시킬 수 있다.

3. useState 훅으로 선언한 변수에 저장된 값을 화면에 출력할 수 있다.

---

전 글 ( https://codingaja.tistory.com/77 ) 에서 마지막으로 만들었던 Component5 컴포넌트 코드를 보자

import React from 'react';

function Component5() {
    let changeUrl = (event) => {
        changeATag(event.target.value);
    };

    let changeATag = (url) => {
        let aTag = document.getElementById("anchor");
        aTag.setAttribute("href", url);
        aTag.textContent = url + " 으로 이동~!";
    }

    return(
        <div>
            <input type="url" placeholder="이동하고 싶은 URL을 입력하세요." onChange={changeUrl} />
            <br />
            <a href="#" id="anchor"></a>
        </div>
    );
}

export default Component5;

이 컴포넌트에서 화면에 출력할 값은 사용자가 입력한 URL로 changeUrl 함수를 거쳐 changeATag 함수로 전달되고 있음

이렇게 화면에 출력할 값이 변할 때는 반드시 훅(Hook)으로 관리를 해야함

 

훅은 다음과 같은 것들이 있음

- useState

- useEffect

- useContext

- useReducer

- useCallback

- useMemo

- useRef

 

이 훅 모두를 반드시 알아야하는건 아니고 useState, useEffect 훅은 반드시 알아야하고 나머지 훅들은 "이런게 있다" 정도로만 기억하면 됨

 

이번 글에서는 가장 많이 사용하는 useState 하나만 알아보자

---

<< useState 훅 >>

useState 훅은 출력할 값을 등록하고 변화시킬 때 사용하는 훅임

 

useState 훅을 사용하려면 import { useState ] from 'react'; 로 불러와야함

useState 훅을 불러왔다면 리엑트 코드 내에서 const [ 변수명, set변수명 ] = useState(초깃값); 으로 사용함

 

useState를 사용하지 않은 컴포넌트를 보고 그 컴포넌트에서 useState를 사용해야하는 이유와 useState를 사용한 컴포넌트로 바꿔보자

1. useState를 사용하지 않은 컴포넌트

프로젝트 -> src -> chapter03 -> Component6.jsx 파일을 추가하고 아래 코드를 추가하자

import React from 'react';

function Component6() {
    let count = 0;

    let clickBtn = () => {
        count++;

        let pTag = document.getElementById("panel");
        pTag.textContent = "버튼을 " + count + "번 클릭했습니다";
    };

    return(
        <div>
            <p id="panel">버튼을 {count} 번 클릭했습니다</p>
            <button type="button" onClick={clickBtn}>클릭</button>
        </div>
    );
}

export default Component6;

 

<< 코드 설명 >>

(1). "버튼을 n번 클릭했습니다" 를 출력 할 태그

  먼저 "버튼을 0번 클릭했습니다" 를 출력하기 위해 초기 텍스트를 갖고 있음

(2). 버튼을 클릭할 때 마다 (4)의 함수를 호출

(3). 버튼을 몇 번 클릭했는지 저장하기 위한 변수

(4). 버튼 클릭 횟수를 증가시키고 "p 태그에 버튼을 n번 클릭했습니다" 를 출력

 

2. 이 컴포넌트에서 useState 를 사용해야하는 이유

  count 변수는 화면에 출력할 값을 갖고 있는 변수임

  useState 훅을 사용하지 않아도 이와 같이 구현할 수 있지만 useState의 시작에서 언급했던것 처럼 리엑트를 사용해서 개발한다면 count 변수는 반드시 useState 훅을 사용해 선언해야하고 count 변수의 값을 증가시킬 때도 useState 훅을 사용해 증가시켜야함

 

3. useState 훅을 사용한 컴포넌트

Component6.jsx의 코드를 아래와 같이 바꾸자

import React from 'react';
import {useState} from 'react';

function Component6() {
    const [count, setCount] = useState(0);

    let clickBtn = () => {
        setCount(count+1);
    };

    return(
        <div>
            <p id="panel">버튼을 {count} 번 클릭했습니다</p>
            <button type="button" onClick={clickBtn}>클릭</button>
        </div>
    );
}

export default Component6;

 

<< 코드 설명 >>

(1). useState 훅을 사용하기 위한 import

(2). useState 훅을 사용해 count 변수를 선언하고 count 변수에 0을 저장함 

  또한 "count변수의 값을 변화시킬 때는 setCount 라는 이름의 함수를 사용하겠다" 는 것

(3). "버튼을 n번 클릭했습니다." 를 출력할 태그

(4). 버튼을 클릭할 때 마다 (5)의 함수를 호출함

(5). 함수가 호출될 때 마다 useState 훅을 사용해 등록해준 setCoun 함수를 호출함

  setCount 함수를 호출해 count변수의 값을 하나씩 증가시키고 있음

 

useState를 사용해야하는 컴포넌트에서 useState를 사용하지 않았을 때와 사용했을 때 코드를 비교해보자

useState를 사용하지 않아도 똑같은 역할의 컴포넌트를 구현할 수 있음

useState를 사용했을 때 가장 눈에 띄는 변화는 코드 수가 감소했다는 것

 

또한 리엑트 코드에서 JS 코드를 최대한 뺄 수 있음

이것 저것 왔다 갔다 하면 개발 할 때 힘듬

소스 파일에 JS 코드만 있거나 리엑트 코드만 있는 상황이 가장 이상적인 상황일 것

왜? 이것 저것 생각할 필요 없이 JS 나 리엑트만 생각하면 되므로

이렇게 useState 훅을 사용해서 화면에 출력할 값을 관리하면 JS 코드를 최대한 생략할 수 있으므로 가독성 높은, 개발하기 편한 코드가 됨

 

useState 훅을 사용한 코드를 좀 더 자세히 설명해보자
(1). count 변수를 선언

(2). count 변수의 값을 변화시킬 때 사용할 함수

  이 함수의 이름은 일반적으로 set으로 시작하고 뒤에 변수이름이 붙음

  그래서 이 함수를 setter 함수라고 부름

  count 변수의 값을 변화시킬 때는 반드시 setter 함수를 사용해야함

(3). count변수의 초기값

  (1), (3)을 합쳐 JS 코드로 바꿔보면 let count = 0; 과 같음

(4). setter 함수를 사용해 count 변수의 값을 하나씩 증가시키고 있음

(5). count 변수의 값을 출력함

  count 변수의 값이 변하면 변한 count 변수의 값을 출력함

 

아래와 같이 (4)에서 setter 함수를 사용하지 않고 직접 count 변수의 값을 변화시키려고 하면 문제가 생김

 

여기서 많이 하는 실수가 아래와 같이 setter 함수를 사용하긴 했지만 증감 연산자를 사용하는 실수를 함

증감 연산자를 사용해도 당연히 문제가 생김

만약 "어 왜?" 라는 생각이 든다거나 증감 연산자를 잘모른다면 반드시 리엑트를 잠시 멈추고 연산자 파트 전체를 공부하고 와야함

 

setter 함수는 반드시 함수 안에서만 호출해야함

아래와 같이 함수 바깥에서 호출(1)하면 문제가 생김