확인버튼을 누르면 alert가 생성되게 해보자. 이를 위해서 뭐가 필요할지.. 상상해보자. alert는 이벤트인가? 이벤트라면 이벤트 객체가 요구되는가?

리액트에서 alert를 위해선 컴포넌트를 만든다. 왜?

아마 내생각엔… alert박스 디자인을 커스텀하기 위해서인듯 함…

참고로 리액트 스니펫에서 함수형 컴포넌트는 rafc 로 만든다… 하지만 이번엔 직접 쳐보자.

import React from "react";
import "./Alert.css";

const Alert = ({ type, text }) => {
  return (
  <div className={`alert alert-${type}`}>{text}</div>
);
};

export default Alert;

클래스 네임에 el같은 표기법을 이용해 props에서 값 꺼내올 수 있는 듯 하다…

또한 text요소도 {} 문법으로 props에서 꺼내온 값을 넣을 수 있다.

클래스에 type으로 몇가지 붙일 수 있음. css에서 이를 다음처럼 활용할 수 있다.

.alert-danger {
  background-color: var(--mainRed);
}

.alert-success {
  background-color: var(--mainGreen);
}

type에 내용이 붙으면 각각 위의 css가 적용된다.

이제 조건에 맞게 type을 내려보내면 된다. 변화하는 값이므로 state를 먼저 생성해주자.

const [alert, setAlert] = useState({ show: false });

show의 값이 true이면 alert박스를 보여주고, false이면 보여주지 않게끔 해야한다. true일때만 props로 내려보내도록 해보자.

import Alert from "./Alert";

...

 <main className="main-container">
      {alert.show ? <Alert /> : null}

alert.show가 true이면 <Alert/> 를 props로 내려주고, 아니면 null로 내버려두게끔 하자.