[프로젝트] 관리자 페이지 만들기

<관리자페이지>

jsp코드

<div id="user">
    <%
        if (loginsession.getAttribute("id").equals("admin")) {
    %>
    <div class="d-flex justify-content-center mt-4">
        <a class="btn btn-sm btn-outline-secondary" href="tripadmin.do">Admin</a>
        						//admin 버튼 누르면 tripadmiin 페이지로 가라!
    </div>
    <%
        }
    %>

이 코드는 JSP(JavaServer Pages) 언어로 작성된 것으로 보입니다.

해당 코드는 id 세션 속성이 "admin"으로 설정되어 있는 경우, 
관리자 페이지로 이동할 수 있는 링크를 생성하는 HTML 코드를 생성합니다.

여기서 <div> 태그는 부모 요소를 나타내며, id 속성이 "user"로 지정되어 있습니다. 
이 부분은 JSP 코드와 상관이 없는 일반적인 HTML 코드입니다.

<% %>는 JSP의 스크립트릿 구문으로, Java 코드를 삽입할 수 있습니다.

해당 코드에서는 if문으로 loginsession.getAttribute("id")가 "admin"인 경우를 판별하고 있습니다. 
loginsession.getAttribute("id")는 "id" 라는 이름으로 세션에 저장된 속성값을 반환합니다. 
따라서 이 코드는 로그인한 사용자의 ID가 "admin"인 경우에만 아래의 HTML 코드가 실행되도록 하고 있습니다.

아래의 HTML 코드에서는 d-flex와 justify-content-center 클래스를 사용하여 버튼을 가운데 정렬하고 있으며, 
btn과 btn-sm 클래스를 사용하여 버튼의 스타일을 설정하고 있습니다. 이 버튼은 "tripadmin.do" URL로 이동하는 링크입니다.

리액트 코드

스프링 부트와 리액트를 사용하여 페이지를 만들 때는 JSP 대신에 리액트 컴포넌트를 사용하게 됩니다.
아래는 JSP 코드를 리액트 컴포넌트로 변환하는 방법입니다.

1. id 속성을 가진 div 요소를 React 컴포넌트로 변환합니다.

import React from 'react';

function User({id}) {
  return (
    <div id="user">
      {id === 'admin' && (
        <div className="d-flex justify-content-center mt-4">
          <a className="btn btn-sm btn-outline-secondary" href="tripadmin.do">Admin</a>
          					//admin 버튼 누르면 tripadmiin 페이지로 가라!
        </div>
      )}
    </div>
  );
}

export default User;

2. loginsession.getAttribute("id") 대신 id라는 프롭스(props)를 컴포넌트로 전달합니다.

<User id={loginsession.getAttribute("id")} />

위의 코드는 스프링 부트에서 컨트롤러에서 모델 객체(Model)를 이용하여 loginsession 정보를 전달하고, 리액트에서는 해당 모델 객체를 프롭스로 전달받아 사용할 수 있습니다.

이렇게 변환된 코드는 스프링 부트와 리액트를 함께 사용하는 프로젝트에서 사용할 수 있습니다.