th 문법(with)

  th:with="s_id=${session?.loginMemberShip?.memberId},
    s_email=${session?.loginMemberShip?.memberEmail},
    s_name=${session?.loginMemberShip?.memberName}"
    th:data-member-id="${s_id}"
    th:data-member-email="${s_email}"
    th:data-member-name="${s_name}">

th:with은 변수를 선언하고 초기화 한다.

?은 Nullable연산자. null일 경우 메소드 진행 안하고 null값 반환.

예를 들어서

s_id=${session?.loginMemberShip?.memberId}

이 경우 `session`이 `null`이면 `session.loginMemberShip`을 호출하지 않고 바로 `null`을 반환 함. 이렇게 하면 `NullPointerException`을 방지할 수 있음.

마찬가지로, `session.loginMemberShip`이 `null`인 경우, memberId 속성에 접근하지 않고 `null`을 반환.

`th:data-*`HTML5 `data-*속성을 동적으로 설정 가능하게 함. 아래의 코드가 있다고 가정.

th:data-member-id="${s_id}"

th:data-member-email="${s_email}"

th:data-member-name="${s_name}"

이 경우, `th:data-*`속성을 사용하여 HTML 요소에 회원정보 저장함.

즉, data-member-id 에는 {s_id}이 저장되는 거임

s_id 변수의 값이 1234라고 한다면, 최종적으로 생성되는 HTML 요소는 다음과 같다.

data-member-id="1234"

    th:fragment="main(title,styles,scripts,style,script,upm,header,nav,main,footer)">

이 속성은 'main'이라는 이름의 프래그먼트를 정의하고, 여러 개의 파라미터를 전달할 수 있도록 설정한다. 이 프래그먼트는 다른 페이지에서 th:replace나 th:insert를 사용하여 가져올 수 있다.

이것은 mainAterLogin에 쓰인 html이다.

th:fragment="main(title,styles,scripts,style,script,upm,header,nav,main,footer)">으로 fragment="main"으로 main에 main html의 값들을 넣어줘서

replace로 가져올 수 있었다.

그런데 ~{}도 있는데, 그것은 해당 fragment를 사용하지 않겠다는 것이다.

여기서는 style,styles,script를 사용하지 않는 것으로 본다.