[React] Section 12

<input id={props.input.id} {...props.input} />

 

-> 이렇게 하면 이 객체에 있는 모든 키-값 쌍은 props로 input에 추가된다.

 

import classes from "./Modal.module.css";

const Backdrop = (props) => {
  return <div className={classes.backdrop} />;
};
const ModalOverlay = (props) => {
  return (
    <div className={classes.modal}>
      <div className={classes.content}>{props.children}</div>
    </div>
  );
};
const Modal = (props) => {
  <>
    <Backdrop />
    <ModalOverlay>{props.children}</ModalOverlay>
  </>;
};

export default Modal;

 

-> 포털을 사용하지 않는 방식

 

import classes from "./Modal.module.css";
import ReactDOM from "react-dom";
const Backdrop = (props) => {
  return <div className={classes.backdrop} />;
};
const ModalOverlay = (props) => {
  return (
    <div className={classes.modal}>
      <div className={classes.content}>{props.children}</div>
    </div>
  );
};
const portalElement = document.getElementById("overlays");
const Modal = (props) => {
  <>
    {ReactDOM.createPortal(<Backdrop />, portalElement)}
    {ReactDOM.createPortal(
      <ModalOverlay>{props.children}</ModalOverlay>,
      portalElement
    )}
  </>;
};

export default Modal;

 

-> 포털을 사용하는 방식

 

const cartReducer = (state, action) => {
  if (action.type === "ADD") {
    const updatedItems = state.items.concat();
  }
  return defaultCartState;
};

 

-> concat은 push와 다르게 새로운 원소를 추가한 새로운 배열을 반환해준다.

 

// MealItemForm.js
import { useRef } from "react";
import Input from "../../UI/Input";
import classes from "./MealItemForm.module.css";

const MealItemForm = (props) => {
  const amountInputRef = useRef();
  const submitHandler = (event) => {
    event.preventDefault();
  };
  return (
    <form className={classes.form} onSubmit={submitHandler}>
      <Input
        ref={amountInputRef}
        ...

 // Input.js      
import classes from "./Input.module.css";
import React from "react";
const Input = React.forwardRef((props, ref) => {
  return (
    <div className={classes.input}>
      <label htmlFor={props.input.id}>{props.label}</label>
      <input ref={ref} {...props.input} />
    </div>
  );
});

export default Input;

 

-> 사용자 정의 컴포넌트에 ref 전달하는 법