react에서 로그인 성공 시 새로고침 없이 메인 페이지 렌더링하는 방법?

코드를 보면서 질문을 주시면 좀 더 이해가 빠를 것 같습니다. 우선 질문만 들었을 때 드는 생각은, 로그인을 포함하는 영역 컴포넌트에서 로그인 성공 후 리렌더링을 시켜주면 될 것 같아요. 전체 페이지에 영향을 주지 않고 해당 상태가 영향받는 컴포넌트에서만 렌더링이 일어나게 만들어 볼 수 있을 것 같습니다.

form을 쓰지않거나 submit할때 event.preventDefault 를 넣어주면 새로고침을 방지할수 있는 것으로 알고있습니다

왜 새로고침이 일어나는지부터 생각해보는게 좋을것같습니다. 제가 만약 질문을 한다면 로그인할때 폼 서브밋이되면서 화면 전환이 일어났고 그것을 하지않게하려면 어떻게 해야됩니까라고 물어봤을고같네요 그리고 만약 그렇다면 ajax나 axios등의 비동기 요청을 통해서 해결 할수있다 라고 답을 할것 같습니다.

안녕하세요! 원하시는게 로그인 상호작용 후 페이지의 일부만 렌더링하는 것인가요? 로그인은 어떻게 구현되어 있나요? 만약 form을 submit하는 형태로 로그인이 구현되어 있다면 submit의 기본 동작을 조작해줘야할 것 같아요. 원치 않는 컴포넌트의 리렌더링이 문제라면 상태를 관리하는 방향으로 찾아보시면 좋을 것 같아요. 무엇보다 예시 코드를 제공해주시면 더 명확한 답변이 가능할 것 같습니다 :)

새로고침 없이 페이지를 다시 렌더링하려면, 리액트에서 제공하는 라우팅 기능을 이용하면 됩니다. 라우팅이란, 페이지 URL을 변경하면 해당 URL에 맞는 컴포넌트를 렌더링하는 것을 의미합니다. 먼저, ' react-router-dom '라이브러리를 설치해야 합니다. 설치한 후, ' BrowserRouter '컴포넌트를 사용하여 앱의 라우팅을 설정할 수 있습니다. 예를 들어, 로그인 후 메인 페이지로 이동하려면 다음과 같이 코드를 작성할 수 있습니다. 아래 코드에서 ' isLoggedIn ' 상태 값이 ' true '이면 ' MainPage ' 컴포넌트를 렌더링하고, ' false '이면 로그인 페이지로 리다이렉트합니다. ' MainPage ' 컴포넌트는 로그인한 사용자만 접근할 수 있는 페이지이므로, 로그인 상태를 확인해야 합니다. 이렇게 하면, 로그인 성공 후 새로고침 없이 메인 페이지를 렌더링할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLogin = (event) => {
    event.preventDefault();
    // 로그인 요청 보내기
    setIsLoggedIn(true);
  };

  return (
    <Router>
      <Switch>
        <Route exact path="/">
          {isLoggedIn ? <MainPage /> : <Redirect to="/login" />}
        </Route>
        <Route path="/login">
          <Login onSubmit={handleLogin} />
        </Route>
      </Switch>
    </Router>
  );
}