230629 리액트 스타일드 컴포넌트 styled-component / custom Hook / 이벤트

 css 템플릿으로 만들어놓고 사용하는 것

터미널에  npm install styled-components 설치 - app.tsx에 

import { styled } from "styled-components";

import 해준다.

(*안되면 아래로 설치)

npm install styled-components@latest

import React from "react";
import "./App.css";
import { styled } from "styled-components";

const Wrapper = styled.div`
  padding: 1rem;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  background-color: lightgrey;
`;

const blockItems = [
  {
    label: "1",
    padding: "1rem",
    backgroundColor: "red",
  },
  {
    label: "2",
    padding: "3rem",
    backgroundColor: "green",
  },
  {
    label: "3",
    padding: "2rem",
    backgroundColor: "blue",
  },
];

const Block = styled.div`
  border: 1px solid black;
  border-radius: 1rem;
  color: white;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  padding: ${(props: any) => props.padding};
  background-color: ${(props: any) => props.backgroundColor};
`;

function App(props: any) {
  return (
    <Wrapper>
      {blockItems.map((blockItem) => {
        return (
          <Block
            padding={blockItem.padding}
            backgroundColor={blockItem.backgroundColor}
          >
            {blockItem.label}
          </Block>
        );
      })}
    </Wrapper>
  );
}

export default App;

---

custom Hook

import React from "react";
import "./App.css";
import { useState } from "react";

function App(initialValue) {
  const [count, setCount] = useState(initialValue);
  const increaseCount = () => {
    setCount((count) => count + 1);
  };
  const decreaseCount = () => {
    setCount((count) => Math.max(count - 1, 0));
  };
  //음수값은 출력하지 않는다. 0까지만.
  return [count, increaseCount, decreaseCount];
}

export default App;

(App.tsx 에서 custom hook을 만듬)

 

import React from "react";
import { useState, useEffect } from "react";
import App from "../App";

const MAX_CAPACITY = 10;

const Accommodate = (props) => {
  const [isFull, setIsFull] = useState(false);
  const [count, increaseCount, decreaseCount] = App(0);

  useEffect(() => {
    console.log("=========");
    console.log("userEffect is called");
    console.log(`isFull: ${isFull}`);
  });

  useEffect(() => {
    setIsFull(count >= MAX_CAPACITY);
    console.log(`current count value: ${count}`);
  }, [count]);

  return (
    <div style={{ padding: 16 }}>
      <p>{`총 ${count}명 수용했습니다`}</p>
      <button disabled={isFull} onClick={increaseCount}>
        입장
      </button>
      <button onClick={decreaseCount}>퇴장</button>
      {isFull && <p style={{ color: "red" }}>정원이 가득 찼습니다.</p>}
    </div>
  );
};
export default Accommodate;

(Accommodate.tsx에서 실행되는문)

 

---

토글버튼 이벤트를 리액트로 만들어보기

import React from "react";
import "./App.css";
import { useState } from "react";

function App() {
  const [isConfirmed, setIsComfirmed] = useState(false);
  const handleConfirm = () => {
    setIsComfirmed((prevIsConfirmed) => !prevIsConfirmed);
  };
  return (
    <div>
      <button onClick={handleConfirm}>
        {isConfirmed ? "확인됨" : "확인하기"}
      </button>
    </div>
  );
}

export default App;

---

*****폼태그 이벤트

import React, { useState } from "react";

const App = () => {
  const [value, setValue] = useState("");
  const handleChange = (e) => {
    setValue(e.target.value);
  };
  const handleSubmit = (e) => {
    alert("입력한 이름은 " + value);
  };
  //폼태그안에 버튼의 타입이 submit인경우 폼태그에 이벤트 onSubmit을 쓸수 있다.
  return (
    <div>
      <form onSubmit={handleSubmit}>
        <label>
          이름:
          <input onChange={handleChange} value={value} type="text" />
        </label>
        <button type="submit">제출</button>
      </form>
    </div>
  );
};

export default App;

---