Study/React

코지코더 React 4. 리액트 훅스 useState

maino77 2021. 5. 13. 23:54

리액트 훅(hook)에 대해 알아보겠다.

React 공식 문서를 보면 훅(hook)이라는 것은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해준다.

https://ko.reactjs.org/docs/hooks-intro.html#motivation

 

Hook의 개요 – React

A JavaScript library for building user interfaces

ko.reactjs.org

 

훅 중 우리가 먼저 알아볼 것은 useState이다. 

공식 홈페이지에 나와있는 예시를 보자.

먼저 첫 줄을 보면 기존에는 React만 적여있었던 곳에 중괄호와 함께 useState가 적혀있는 것을 볼 수 있다. 이것은 훅인 useState를 호출해 사용하기 위함이다. 이렇게 호출한 훅을 컴포넌트 안에 추가하였다.

useState는 현재의 값과 이 값을 업데이트하는 함수를 쌍으로 제공한다. 위의 예시를 보면 count가 현재의 값을 나타내고 setCount가 업데이트 할 값을 나타내며 괄호에 있는 것은 count의 초기값을 나타낸다.

이것을 알고 return에 적힌 코드를 해석해보면 p태그로 출력되는 것은 "You clicked 0 times"이다. 이후 옆에 click me라고 적혀있는 버튼을 클릭하면 onClick으로 인해 함수가 작동하게 된다. 이 함수는 setCount로 인해 count값에 1을 더하여 count함수를 업데이트한다. 즉 내가 클릭한 횟수만큼 p태그 안에 있는 숫자가 카운팅된다.

 

 

예제를 통해 useState를 어떻게 사용했는지 이해한 다음 오늘 만들어 본 코드를 다시 훑어보았다.

***  import React, {useState} from 'react'

function App() {
***  const [text, setText] = useState('Kossie');
  const onSubmit = () => {
    alert('submitted');
  }

  const onKeyUp = (event) => {
    // keyCode란 자판에 주어진 코드로 13은 엔터키의 코드다
    if (event.keyCode === 13) {
      onSubmit();
    }
  }

***  const updateText = () => {
    setText('Coder')
    console.log(text);
  }

  console.log(text);

  return (
    <div className="App">
      <input onKeyUp={onKeyUp} />
      <button onClick={onSubmit}>submit</button>

      <br /><br />
      
	  {/* 변수를 넣기 위해 중괄호{}로 묶는다. */}
 ***     <span>{text}</span>
 ***     <button onClick={updateText}>Update</button>

    </div>
  );
}
export default App;

전체적인 코드는 어제 배웠던 것의 기반으로 해서 쌓아올렸기 때문에 새롭게 추가된 ***라고 적힌 부분만 살펴보겠다.

import React, {useState} from 'react'
먼저 훅을 사용하기 위해 import로 useState를 가져온다.

const [text, setText] = useState('Kossie');
현재(text), 업데이트(setText) 함수를 지정하고 초기값을 Kossie로 설정한다.

const updateText= () => {
setText('Coder')
console.log(text);
}
updateText함수를 설정. setText를 이용해 없데이트 되는 값은 Coder로 지정한다. 이후 제대로 작동하는지 확인하기 위해 console.log(text)를 이용한다.

<span>{text}</span>
<buttononClick={updateText}>Update</button>
span태그로 현재 함수를 보여주고 button의 이벤트를 이용해 누를 때 업데이트되도록 설정한다.

 

 

이렇게 만든 코드를 실행시키면 다음과 같다.

Update를 누르기 전의 모습

 

Update를 누른 후의 모습

버튼을 눌렀을 때 console.log(text)를 해놓았기 때문에 console 창에 출력되는 것을 볼 수 있다. 다만 두 개가 출력되는 이유는 React.StrictMode 때문인데... 큰 문제는 아니니 넘어가자. ㅎㅎ

 

 

React가 아니라 js로 이 방법을 해결한다면 id를 주고 document.getElementById를 사용할 수 있을 것이다.

let text = 'Kossie';

const updateText = () => {
	text = 'Coder';
    document.getElementById('text').innerHTML = text;}
    
return(
<span id='text'>{text}</span>
);

간단히 써보자면 이렇게 될 것이다.

 

 

 

⁂ 느낀 점 ⁂

먼저 영상으로는 이해하지 못했다. 그래서 일단 블로그 글을 쓰면서 리액트 공식 홈페이지에 있는 훅의 예제를 통해 useState를 이해하고 나서야 영상에서 어떻게 사용한 것인지 알 수 있었다.

그리고 이것을 순수 js로 바꾸는 방법을 떠올렸을 때 document.getElementById가 떠오르지 않아서 구글에 검색해서 찾아보았다. 한동안 사용을 하지 않다보니 한때 주구장창 썼었던 것을 까먹어버렸다. 그래도 검색으로 찾아내서 정리된 글을 한 번 싹 읽으니 다시 떠올라서 다행이었다.

 document.getElementById 이해에 참고한 블로그
https://kyounghwan01.github.io/blog/JS/JSbasic/getElementById/

 

JavaScript - getElementbyId 사용법

JavaScript - getElementbyId 사용법

kyounghwan01.github.io

 

 

⁂ 추가사항 21.5.15 ⁂

나는 이것을 useState를 이해할 때 const [text, setText] = useState('Kossie'); 가 있으면 text와 setText는 별개로 독립적으로 시행되는 것으로 이해했었다. 그러나 강의를 더 보고 여러 자료를 찾아보면서 이것이 서로 연결되어있음을 깨달았다.

text는 내게 처음 보여줄 값이자 업데이트된 값을 보여줄 함수이다. 

setText는 업데이트 할 방식이다. 여기에 업데이트 방식을 입력하면 이에 따라 text를 업데이트하고 출력한다.

usetState('Kossie')는 text의 초기값이다. 괄호 안의 값이 Kossie임으로 Kossie가 처음으로 출력된다.

정리하면 처음에 text는 useState()의 초기값을 나타내지만 setText에 적힌 코드를 따라 업데이트 되어 text의 값이 변하게 된다.

예를 들어보자 text의 초기값은 0이고 setText는 (text+6)라는 업데이트 방식을 가지고 있으면 이후 업데이트 되는 값은 6이 된다.

728x90
저작자표시 비영리 (새창열림)
댓글수0