styled-components

참고링크:
https://react.vlpt.us/styling/03-styled-components.html

[설치법]

npm install styled-components
npm install --save-dev prettier
npm install --save-dev eslint

💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨

🍒 정원 수용 인원 입퇴장 버튼

Index.tsx

import Accommodate from './Component/Accommodate';
(...)
root.render(
  <React.StrictMode>
    <Accommodate />
  </React.StrictMode>
);

Accommodate.tsx

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("useEffect() 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

App.tsx

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

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

export default App

💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨

↓ useState 예제들 ↓

🍒 토글버튼 만들기

App.tsx
import React from 'react'
import { useState } from 'react'

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

export default App

💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨

🍒 로그인/로그아웃 토글버튼

App.tsx

import React from 'react'
import LoginControl from './Component/LoginControl'

const App = () => {
  return (
    <div>
      <LoginControl />
    </div>
  )
}

export default App

Greeting.tsx

import React from 'react'
const UserGreeting = () => {
  return <h1>다시 오셨군요!</h1>
}
const GuestGreeting = () => {
  return <h1>회원가입을 해주세요!</h1>
}
const Greeting = (props: any) => {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />
  }
  return <GuestGreeting />;
}

export default Greeting

LoginControl.tsx

import React, { useState } from 'react'
import Greeting from './Greeting'

const LoginButton = (props: any) => {
  return <button onClick={props.onClick}>로그인</button>
}

const LogoutButton = (props: any) => {
  return <button onClick={props.onClick}>로그아웃</button>
}

const LoginControl = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const handleLoginClick = () => {
    setIsLoggedIn(true);
  }
  const handleLogoutClick = () => {
    setIsLoggedIn(false);
  }
  let button;
  if (isLoggedIn) {
    button = <LogoutButton onClick={handleLogoutClick} />
  } else {
    button = <LoginButton onClick={handleLoginClick} />
  }

  return (
    <div>
      <Greeting isLoggedIn={isLoggedIn} />
      {button}
    </div>
  )
}

export default LoginControl

💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨

🍒 입력값 알림창에 출력하기

App.tsx

import React, { useState } from 'react'

const App = () => {
  const [value, setValue] = useState('');
  const handleChange = (e) => {
    setValue(e.target.value);
  }
  const handleSubmit = (e) => {
    alert(`입력한 이름: ` + value);
  }
  return (
    <form onSubmit={handleSubmit}>
      <label>
        이름: 
        <input onChange={handleChange} value={value} type="text" />
      </label>
      <button type='submit'>제출</button>
    </form>
  )
}

export default App

💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨

🍒 입력값 알림창에 출력하기2

App.tsx

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

const App = () => {
  const [value, setValue] = useState(`요청사항을 입력하세요`);
  const handleChange = (e) => {
    setValue(e.target.value);
  }
  const handleSubmit = () => {
    alert(`입력한 요청사항: ` + value);
  }
  return (
    <form onSubmit={handleSubmit}>
      <label>
        요청사항: 
        <textarea value={value} onChange={handleChange} />
      </label>
      <button>제출</button>
    </form>
  )
}

export default App

💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨

🍒 select 태그 선택값 출력하기

App.tsx

import React, { useState } from 'react'

const App = () => {
  const [value, setValue] = useState('grape');
  const handleChange = (e) => {
    setValue(e.target.value);
  }
  const handleSubmit = () => {
    alert(`선택한 과일: ` + value);
  }
  return (
    <form onSubmit={handleSubmit}>
      <label>
        <select value={value} onChange={handleChange}>
          <option value="apple">사과</option>
          <option value="banana">바나나</option>
          <option value="grape">포도</option>
          <option value="watermelon">수박</option>
        </select>
      </label>
      <button>제출</button>
    </form>
  )
}

export default App

💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨

🍒 체크박스&숫자 입력값 출력하기

App.tsx

import React, { useState } from 'react'

const App = () => {
  const [haveBreakfast, setHaveBreakfast] = useState(true);
  const [numberOfGuest, setNumberOfGuest] = useState(2);
  const handleSubmit = (e) => {
    alert(`아침식사 여부: ` + haveBreakfast + `, 방문객 수: ` + numberOfGuest);
  }
  return (
    <form onSubmit={handleSubmit}>
      <label>
        아침식사 여부: 
        <input
          type="checkbox"
          checked={haveBreakfast}
          onChange={(e) => {
            setHaveBreakfast(e.target.checked);
          }}
        />
      </label>
      <br />
      <label>
        방문객 수: 
        <input
          type="number"
          value={numberOfGuest}
          onChange={(e: any) => {
            setNumberOfGuest(e.target.value);
          }}
        />
      </label>
      <button type='submit'>제출</button>
    </form>
  )
}

export default App