230508 - useState, sass/scss

백승연·2023년 5월 9일

React Sass scss

국비지원 프론트엔드 과정

목록 보기

68/97

개인사정으로 하루 결석하여 나중에 추가 예정

🚩 React

useState

📝 설명

useState 함수를 사용하면 컴포넌트에서 변경되는 값을 관리할 수 있음 (동적)

클릭할 때마다 값이 1씩 올라가는 컴포넌트

✒️ 코드 작성

입력

App.js

import { useState } from "react";
import Count from "./Count";
import "./styles.css";

export default function App() {
  const [count, setCount] = useState(0); // 초기값 설정
  const handleClick = () => {
    setCount(() => count + 1);
    console.log("handleClick 작동");
  };
  return (
    <div className="container">
      <div className="banner">
        Total Count : {count} {count > 10 ? "🧨" : "💦"}
      </div>
      <div className="App">
        <Count clickFunc={handleClick} total={count} />
        {/* 함수명 변경 가능(이벤트 함수 아님) */}
        {/* 컴포넌트에 직접 주는게 아니라 props 사용해야 작동 */}
        <Count clickFunc={handleClick} total={count} />
      </div>
    </div>
  );
}

Count.jsx

import React, { useState } from "react";

const Count = ({ clickFunc, total }) => {
  const [num, setNum] = useState(0);
  //useState -리액트에서 제공해주는 유용한 react hook
  //const [상태값변수, 상태값을 업데이트하는 함수] = useState(상태초기값)

  return (
    <div className="counter">
      <p className="number">
        {num} / <span>{total}</span>
      </p>
      <p>
        <button
          className="btn"
          onClick={() => {
            setNum((prev) => prev + 1);
            clickFunc(); // 외부로부터 받아온 onClick 함수 호출
          }}
        >
          +1
        </button>
      </p>
    </div>
  );
};

export default Count;