[TIL] 240119(금) React / 간단한 숫자 카운터 앱 만들기

📌 State

React에서 State와 Hook에 대해서 간단히 정리해보고자 한다.

State는 컴포넌트 내부에서 바꿀 수 있는 값으로, UI를 바꾸기 위하여 사용한다.

State를 만드는 방법은 useState() 를 사용하는데, 기본 구조식은 다음과 같다.

const [value, setVaule] = useState('초기값')

1) const로 선언하고, 빈 배열 []을 생성한다.
2) 빈 배열의 첫 번째 자리에는 state의 이름, 두 번째 자리에는 set + state 이름을 넣는다.
3) useState( ) 안에는 state의 초기값을 넣어준다.

▶️ State를 변경하고 싶을 때는, setValue(바꾸고 싶은 값)를 사용한다.

 

📌 useState 와 onClick Event를 활용 할 수 있다.

<button>태그를 활용하여, onClick을 사용하여 이벤트 핸들러를 구할 수 있다.

// <button> 에 onClick Event를 달아주면, 버튼을 클릭하면, onClickHandler 함수가 실행된다. 
<button onCLick={onClickHandler}>클릭</button>

onClickHandler 함수를 선언해보자.

const [name, setName] = useState("홍길동"); // State를 만들어준다.

function onClickHandler() {
    setName("홍길순"); // onClickHandler 함수는 "홍길동" 이라는 이름을 -> "홍길순" 으로 바꿔준다. 
}

💻 useState와 onClick Event를 활용하여 숫자 카운트를 할 수 있는 모습을 만들어보자.

import React, { useState } from "react";

function App() {
  // State를 생성해준다. 
  const [num, setNum] = useState(0);  // 초기값은 숫자 0으로 설정한다. 

  // onClick Evnet가 발생할 때 실행되는 함수를 선언해준다. 
  function onPlusHandler() {
    setNum(num + 1);        
  }
  function onMinusHandler() {
    setNum(num - 1);
  }

  return (
    <div
      style={{
        textAlign: "center",
      }}
    >
      <div>{num}</div>
      <button onClick={onPlusHandler}>+1</button> // 각각의 버튼에 onClick event를 생성해준다. 
      <button onClick={onMinusHandler}>-1</button>
    </div>
  );
}

export default App;

 

하루를 마치며...🤔

React 강의를 수강하다보니 역시나 javascript 문법이 정말 중요하고 기본적인 부분이구나를 느끼고 있는 것 같다. 물론 react에서는 잘 사용하지 않는 개념이 있다고 할지라도, javascript 언어 자체가 가지고 있는 문법을 기반으로 사용하기 때문에 그만큼 더욱 중요하고 많이 복습을 해야겠다고 생각한다.
그래도 그나마 다행인 것 중에 하나는, 얼마 되지 않았지만 javascript 강의를 들었다고 react에서도 물론 새로운 내용들을 많이 배우고 있지만, js 강의를 처음 들었을 때 만큼 힘들고 어렵게 느껴지지는 않는 것 같다. 물론 이제 시작이겠지만,,ㅎ 앞으로 더더욱 배우고 해야 할 것들이 많다는 것을 알기에, 지금 이 내용 역시 잘 복습하고 넘어가야겠다.