[React] State & 이벤트 핸들러 : 모달 열고 닫기, 입력 받기

State

컴포넌트 내부에서 읽고 업데이트 할 수 있는 값

• 하위 컴포넌트에 상속 가능
• state값이 변경되면 리렌더링 발생

useState

리액트의 내장 Hooks, 컴포넌트 내부에서 상태를 정의하고 이를 관리할 수 있게 해줌
const [state,setState]=useState("초기값");

모달 열고 닫기

const [modal,setModal]=useState(false);
모달 컴포넌트를 관리하는 state 값 선언
{modal ? <Modal setModal={setModal} /> : null}
삼항연산자 ➡️ modal state값이 참이면 모달 컴포넌트를 보여주고 거짓이면 아무것도 보여주지 않음

모달 컴포넌트 생성

• setModal을 props로 전달함

const Modal = (props) => { 
  const { setModal } = props;
  const style = {
    width: 200,
    height: 200,
    display: "flex",
    backgroundColor: "skyblue",
    marginTop: 30,
    justifyContent: "center",
    alignItems: "center",
  };
  
  const closeModal = () => {
    setModal(false);
  };
  
  return (
    <>
      <div style={style}>
        <button onClick={closeModal}>모달 닫기</button>
      </div>
    </>
  );
};
export default Modal;

input 입력 받기

상태 관리 변수

  const [message, setMessage] = useState("");
  const [username, setUsername] = useState("");

input 태그로 입력 받기

     <input
        type="text"
        name="message"
        value={message}
        placeholder="입력해 보세요."
        onChange={handlerChange}
      />
      <input
        type="text"
        name="username"
        value={username}
        placeholder="입력해 보세요."
        onChange={handlerChange}
      />

이벤트 핸들러 함수

e.target.name 이 message 인지username 인지에 따라 다르게 처리

입력창의 이름을 관리하는 상태 변수를 추가

const { message, username } = form; 객체 비구조화

• form 객체의 사본을 만들고, 그 사본에 변경을 반영
• 세터 함수를 이용해서 사본을 저장