[React] #03 useState와 onChange

왜 useState를 사용할까?

  흔히 React에서 중요한 기능을 꼽으라면 다들 어렵지 않게 useState를 뽑을 것이라고 생각한다. React에서 useState가 필요한 이유에 대해서 알아보자.

  React를 처음 접했고, useState의 존재를 모른채로 jsx 카운터 코드를 작성한다면 아마 대부분이 이런 코드를 작성할 것이다.

export default function App () {
  let i=0;

  const Count = () => {
    i++;
  }

  return (
    <div>{i}</div>
    <button onClick={Count}>+</button>
  );
}

  하지만 이 코드는 리액트에서 동작하지 않는다. 정확히 말하면, 동작하지 않는 것은 아니다. Count함수 내부에 console.log(i)를 넣어보게 되면, i의 값은 정상적으로 오르는 것을 볼 수 있다.

  그렇다면 왜 i 의 값이 오르는 것이 화면에 표시되지 않는 것일까? 답은 '렌더링'이라고 하는 React의 페이지 표시 방법에 있다.

  React에서는 렌더링이 일어나야 페이지가 새로고침되어 변경된 사항들이 페이지에 적용된다고 생각하면 쉽다. 하지만 이 '렌더링'이 일어나는 조건에 '일반변수의 변경'은 없다. 따라서 위 코드에서 일반변수인 i 의 값이 바뀐다고 해도 페이지는 렌더링 되지 않아 값이 변하지 않은 것처럼 보이는 것이다.

  이쯤되면 왜 useState를 사용하는지 대강 알게 되었을 것이다. React페이지는 useState변수가 변경되었을 때 페이지를 리렌더링 한다. 따라서 useState 변수를 사용하면 + 버튼을 눌렀을 때 값이 변경되는것을 볼 수 있다.

useState?

  useState를 사용하기 위해서는 먼저 import 구문으로 useState를 불러와야 한다.

import { useState } from "react"; 

  불러왔다면, useState 변수를 선언해주자. useState 변수는 값을 담을 state 변수와, state 변수의 값을 변경하는 함수부분으로 나뉜다.

const [count, setCount] = useState();

  위의 코드에서 count 는 state값을 담는 변수이고, setCount 는 count를 변경시키는 함수이다. 변경함수의 이름은 state 변수의 이름 앞에 'set'키워드를 붙이고 'camelCase' 로 적는다. 말로만 들어선 잘 와닿지 않는데, useState를 활용해 위의 카운터 코드를 다시 재구성해 보겠다.

import { useState } from "react";

export default function App () {
  const [count, setCount] = useState() //초기값 설정(필수 아님)

  const addCount = () => {
    setCount(count++); // setCount함수로 count값 변경
  }

  return (
    <div>{count}</div> //햇갈리지 말자! 실제 값은 count변수 안에 들어가 있다.
    <button onClick={addCount}>+</button>
  );
}

  위의 코드를 보면서 useState 변수를 왜 상수형 (const )으로 선언했는지 궁금할 것이다. React 가 state가 변경되었다는 것을 인식하기 위해서는 반드시 state를 변경하는 함수 ( 위 코드의 setCount 함수 )로 값을 변경해야 한다.

  만약 실수로라도 state변수의 값을 함수없이 바꾸게 된다면 에러가 발생한다. 따라서 코드를 깔끔하게 하기 위해 const형으로 선언한 것이라고 생각할 수 있다.

onChange?

  onChange 이벤트는 대상 Input 태그의 내부 값이 변경될 때마다 실행된다. 일반적으로 onChange태그를 사용할 때의 형태는 이렇게 된다.

<input type="text" onChange={}></input>

  onChange 이벤트 중괄호 안에는 실행할 함수가 들어간다. useState와 onChange 이벤트를 사용해서 input태그 내의 값이 변할 때마다 이를 실시간으로 출력해주는 코드를 작성해보자.

import { useState } from "react";

export default function App () {
	const [text, setText] = useState();
  
    const changeText = (e) => {
    	setText(e.target.value);
    }
  
  	return (
    	<>
        	<input type="text" onChange={changeText}></input>
        	<h2>{text}</h2>
        </>
    );
}

  이 코드는 input태그 내부의 값이 변경될 때마다 changeText() 함수를 호출하고, changeText() 함수로 useState 변수인 text 변수의 값을 이벤트 객체를 활용하여 input태그 내에 있는 값에 접근해 그 값을 기반으로 변경한다.