JSF(JavaServer Faces)의 prependId와 자동 ID 생성에 대한 정리

기록원장 2025. 1. 8. 22:39

◆ prependId 란??

prependId는 JSF(JavaServer Faces)의 컴포넌트에서, 자식 컴포넌트의 렌더링 된 HTML id값 앞에 부모 컴포넌트의 id를 접두사로 추가할지를 제어하는 속성으로, 이 속성을 통해 페이지 내에서 컴포넌트 id 충돌을 방지하고, JSF의 상태 관리 및 요청 처리 과정에서 각 컴포넌트를 고유하게 식별할 수 있다.

다만, JSF의 prependId 동작은 JSF 컴포넌트 내에서만 작동하기 때문에 하위 컴포넌트라 할지라도 JSF 태그로 생성된 요소들에만 <h:form> 태그의 id가 하위 컴포넌트에 접두사로 붙으며, 일반적인 HTML 태그의 경우는 JSF의 컴포넌트 트리와 별도로 동작하기 때문에 영향이 미치지 않는다.

◆ prependId 의 동작

prependId는 true 또는 false로 설정할 수 있으며, 명시적으로 지정하지 않을 경우 기본값인 true로 동작한다.

1. prependId="true" (기본값)

<h:form> 컴포넌트의 id가 <h:form> 안의 모든 하위 컴포넌트의 id앞에 접두사로 붙는다.

이를 통해 id가 충돌하지 않도록 보장해 주며, 다수의 form이 있는 페이지에서 컴포넌트 id 충돌 방지에 유용하다.

JSF에서 부모 요소의 id가 자식 컴포넌트의 id에 붙을 때는 콜론(:)으로 구분된다.

- JSF 코드 -
<h:form id="form1" prependId="true">
<h:inputText id="text1" value="#{userBean.name}" />
</h:form>

- 렌더링 결과 -
<form id="form1">
<input type="text" id="form1:text1" name="form1:text1" value="#{userBean.name}" />
</form>

위 예제에서 하나더 눈여겨봐야 할 것이 name속성인데, JSF 태그에서 name속성을 명시적으로 지정하지 않은 상태에서 prependId가 true일 경우 name이 id와 동일한 값으로 자동 지정된다.

JSF 태그에 name속성이 명시적으로 지정돼 있는 경우는 상위 컴포넌트의 id와 상관없이 그대로 유지된다.

2. prependId="false"

<h:form> 컴포넌트의 id가 <h:form> 안의 모든 하위 컴포넌트의 id앞에 접두사로 붙지 않는다.

하위 컴포넌트에서 지정한 id로만 생성되기 때문에 CSS나 자바스크립트에서 id의 직접 참조할 때 적합하다.

- JSF 코드 -
<h:form id="form1" prependId="false">
<h:inputText id="text1" value="#{userBean.name}" />
</h:form>

- 렌더링 결과 -
<form id="form1">
<input type="text" id="text1" value="#{userBean.name}" />
</form>

◆ id 자동생성

prependId="true"를 설정한 경우 <h:form> 태그에 id를 명시하지 않거나 <h:form> 태그 하위 컴포넌트에 id를 명시적으로 지정하지 않으면, JSF는 해당 컴포넌트에 대해 자동 생성된 고유한 id를 부여하고 이 고유 id는 보통 접두사(j_idt)와 숫자 조합(j_idt1, j_idt2, j_idt3)으로 생성된다.

다만, 자동 생성된 id는 예상하기 어렵기 때문에 CSS나 JavaScript에서 직접 참조하기 어렵고, 디버깅할 때 가독성이 떨어져 복잡해 지므로 명시적으로 id를 지정하는 것이 좋다.

<prependId="true" + 상위 컴포넌트 id 미지정 시>
1. 하위 컴포넌트 id가 지정 된 경우
상위 컴포넌트 id만 자동생성 되며, 하위 콤포넌트 id의 접두사로 자동생성 된 상위 컴포넌트 id가 붙는다.

2 하위 컴포넌트 id가 미지정 된 경우
상위, 하위 컴포넌트 둘 다 id가 자동생성 되며, 하위 컴포넌트 id의 접두사는 자동생성 된 상위, 하위 컴포넌트 id가 합쳐진다.

<prependId="true" + 상위 컴포넌트 id 지정 시>
1. 하위 컴포넌트 id가 지정 된 경우
상위 컴포넌트 id와 하위 컴포넌트의 id를 합친 값이 하위 컴포넌트의 id가 된다.

2 하위 컴포넌트 id가 미지정 된 경우
하위 컴포넌트 id만 자동생성 되며, 상위 컴포넌트 id와 자동생성된 하위 컴포넌트의 id가 합쳐져 하위 컴포넌트 id가 된다.

글 내용 중 잘못된 부분이 있거나, 첨부하실 내용이 있으시면 댓글로 남겨주세요. 공부하는데 많은 도움이 됩니다.
-- 기억의 유효기간은 생각보다 짧다. --