로그인 Modal 연습 - 꿈을 기록하는 Blog

내일부터 본격적으로 프로젝트가 시작되기에 오늘은 팀원들과 하루 휴식을 갖기로 했다. 그래서 나는 오늘 Login Modal창 연습과 Route 복습을 해보았다.

서버가 없기 때문에 클릭했을 때 페이지만 넘어가는 것을 연습했다. 프로젝트를 시작하면 useCallback을 이용해서 비동기 요청을 onClick에 실어주면 되는데 그 부분만 뺀 것이다.

나는 먼저 CRA를 활용해서 프로젝트 첫 세팅 연습과 .eslintrc, .prettierrc 설정하는 것을 연습해봤고 그 다음 Route 복습을 해보았다.

App.tsx에서 Route 설정을 먼저 해보았다.

// index.tsx
import {BrowserRouter} from "react-router-dom";

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

// App.tsx
import {Switch, Route, Redirect} from "react-router-dom";

return (
  <Switch>
    <Redirect exact path="/" to="/Login" />
    <Route path="/Login" component={Login} />
    <Route path="/signup" component={SignUp} />
    <Route path="/workspace" component={Workspace} />
  </Switch>
);

먼저 이런식으로 로그인 페이지와 회원가입 페이지 그리고 로그인이 되었을 때 메인 페이지로 들어가는 것을 만들어 놓았다.

그 후에 데이터 요청을 하고 받아서 정상적으로 요청이 끝났다고 가정을 하고 Link를 활용해서 페이지를 이동해보았다.

<Link to="/Workspace">Login</Link>

그 다음 연습해 본 것은 Modal창을 띄우는 것인데, 모달창은 일반적으로 false, true 를 활용하여 만든다. 나도 이 로직을 이용하여 만들어 보았다.

const Workspace = () => {
  const [showUerMenu, setShowUserMenu] = useState(false);

  const onClickUserProfile = useCallback(() => {
    setShowUserMenu(prev => !prev);
  }, []);

  //생략

  return (
      <span onClick={onClickUserProfile}>Modal</span>;
  )
};

🙌 느낀점

내일 오전에 프로젝트 OT가 있고 오후부터 본격적으로 시작한다. 정말 잘 할 수 있을까? 에 대한 걱정이 정말 많지만… 그동안 해왔던 것을 잘 활용해서 팀원들과 좋은 결과를 얻길 바란다!!

← Previous Post Next Post →

👉 Route, Modal 연습

🙌 느낀점