[nextjs+ts]( 번외) tailwindCSS peer와 group을 활용하여 다른 객체의 상태값 받아오기 / peer와 group의 차이

[nextjs+ts]( 번외) tailwindCSS peer와 group을 활용하여 다른 객체의 상태값 받아오기 / peer와 group의 차이

 

#[같은 점]

peer와 group은 각각 등록을 한 후 등록된 그룹내에서 다른 곳에서 해당 객체들을 부를 수 있다

 

#[다른 점]

peer는 동일 수준의 객체

group은 하위 객체(자식)

를 각각 접근 가능하다.

 

#[peer]의 예 - 아래와 같이 input에 peer를 등록하고, span에서 input 값에 따른 예외 처리를 진행한다.

단 peer가 먼저 등록 후 하위에 이벤트처리를 해줘야한다 

<div className="flex flex-col  p-2 pt-0">
          <span className="p-1 text-sm font-normal">아이디</span>
          <input required className="peer border-2" type="text"></input>
          <span className="hidden text-xs font-medium text-red-600 peer-invalid:block">
            아이디를 입력해주세요
          </span>
        </div>

 

#[gorup]의 예 -  details에 그룹을 등록하고, 자식인 details의 상태에 따라 summary 콘텐츠를 변경한다.

 <details className='group' >
                  <summary  className='list-none outline-none cursor-pointer before:content-["+"] group-open:before:content-["-"] ' >모니터링 관리</summary>
                  <p>가나다</p>
                  <p>마바사</p>
                  <p>아자차</p>
                  </details>

 

초반에 그냥 그렇구나하고 넘어가다보니 헷갈리는 개념이었다, 잘 정리하고 넘어가면 좋을 것 같다.

 

 

#nextjs #ts #TailwindCSS  #css #js #react #join #func #form #peer #group #다른객체접근 #이벤트 #다른객체이벤트