react

이벤트 연결

함수를 바인딩 할 때 () 괄호를 쓰면 자바스크립트가 코드를 계산할 때 같이 실행된다. 버튼을 클릭할 때 함수가 실행되도록 해야하니 () 괄호를 쓰면 안된다.

import { useState } from "react";

function test() {
  const [click, setClick] = useState(false);
  
  function handler() {
    setClick(true);
  }
  
  return (
    <button onClick={handler}>이벤트</button>
  )
}

삼항연산자

{ click ? <Modal /> : null }

클릭이 true일 때 <Modal /> 컴포넌트 바인딩, false일 때 null 바인딩

{ click && <Modal /> }

컴포넌트 함수는 항상 true이기 때문에 논리곱 연산자에 의해 두 조건이 모두 true일 경우 마지막 조건이 반환

import { useState } from "react";
import Modal from "./components/Modal";

function test() {
  const [click, setClick] = useState(false);
  
  function handler() {
    setClick(true);
  }
  
  return (
    <button onClick={handler}>이벤트</button>
    { click ? <Modal /> : null }
    { click && <Modal /> } 
  )
}

props로 함수 전달

props로 값을 키와 value 형태로 내려주는 것과 같이 사용하면 된다.
부모 컴포넌트에서 설정한 키 이름으로 자식 컴포넌트에서 사용 가능

import { useState } from "react";
import Modal from "./components/Modal";

function test() {
  const [click, setClick] = useState(false);
  
  function handler() {
    setClick(true);
  }
  
  function closeModal() {
    setClick(false);
  }
  
  return (
    <button onClick={handler}>이벤트</button>
    { click && <Modal onClose={closeModal}/> } 
  )
}

Modal 컴포넌트

Modal 컴포넌트 부분을 클릭했을 때 부모 컴포넌트에서 내려온 onClose가 실행

function Modal(props) {
  return <div className="modal" onClick={props.onClose} />;
}

react-router-dom

react-router-dom 버전이 업그레이드 되면서
Switch -> Routes
component -> element={<component />} 로 변경되었다.

변경 전

import { Route, Switch } from "react-router-dom";
import MeetUpPage from "./pages/MeetUp";

function App() {
  return (
    <div>
      <Switch>
        <Route path="/">
          <MeetUpPage />
        <Route>
      </Switch>
    </div>
  );
}

export default App;

변경 후

import { Route, Routes } from "react-router-dom";
import MeetUpPage from "./pages/MeetUp";

function App() {
  return (
    <div>
      <Routes>
        <Route path="/" exact element={<MeetUpPage />} />
      </Routes>
    </div>
  );
}

export default App;

'Switch' is not exported from 'react-router-dom' 에러가 난다면 버전이 업그레이드 됐으니 위와 같은 형식으로 바꿔야한다.