[TIL] DAY12 리액트 - useState, components

[TIL] 2023-03-31 DAY12

리액트

함수 만들기

const onClickAdd = () => {
    console.log("Clicked!");
  };
  return (
      <button
        className="bg-green-300 w-12 h-12 rounded-full"
        onClick={onClickAdd} >
        +
      </button>

-> 주의할점 : 리액트에서는 'onClick' 이라는 카멜 표기법을 써야함

useState

html 값 변경을 위해 기존 document로 접근하던걸 리액트에서는 useState로 접근
형태 : [현재값(html), 업데이트값(react)], (초기값)

리액트 훅스(Hooks) 사용

import { useState } from "react";
 const [count, setCount] = useState(0); // [현재값, 업데이트값]    초기값
  const onClickAdd = () => {
    setCount(count + 100);
  };

-> html에 직접 접근하던 기존과는 다르게 useState 사용

Input 값 업데이트

const [num1, setNum1] = useState("어떻게");
const onChangeNum1 = (e) => {
    setNum1(e.target.value);
  };
return (
        <input
          className="border-2 focus:outline-none focus:border-purple-400 rounded-lg px-4 py-2 text-xl"
          type="text"
          value={num1}
          onChange={onChangeNum1}
        />

 <input
          className="border-2 focus:outline-none focus:border-purple-400 rounded-lg px-4 py-2 text-xl ml-4"
          type="text"
          value={num2}
          onChange={(e) => {
            setNum2(e.target.value);
          }}

-> 화살표 함수로도 표현 가능(useState는 선언한 상태에서)

components

컴포넌트를 이용하면 main파일을 깔끔하게 하고 관리하기 쉬워짐
-> 잘게 쪼개기 가능

• 컴포넌트화

// A.jsx
const A = () => {
  return (
    <div className="bg-blue-300 w-full h-60">
      {/*  */}
      {/*  */}
      {/*  */}
      {/*  */}1{/*  */}
      {/*  */}
      {/*  */}
      {/*  */}
    </div>
  );
};
export default A;
// App.jsx
import A from "./components/A";
const App = () => {
  return (
      <A />
      );

-> 컴포넌트 폴더에 파일 여러개 생성하여 메인 jsx에 import 후 사용