에러 ts(2746) 해결

에러: 이 JSX 태그의 'children' 속성에는 'ReactNode' 형식의 자식 하나가 필요하지만, 여러 자식이 제공되었습니다.ts(2746)

원인: JSX문법 안에서 중괄호로 js를 사용하는 코드를 작성할 때 노드가 여러개 생기게 되는데, 중괄호를 상위태그 하나로 묶지 않고 & 중괄호를 연속하여 사용해서 발생

해결방법: 중괄호 전체를 하나의 태그로 묶어서 노드로 만들어준다

import React from 'react';

const example = () =>{

	return(
    
에러 발생-> <S.EmailContainer>
           <S.EmailTitle>아이디</S.EmailTitle>
           <S.EmailInputBtnDiv>
            <S.EmailInputDiv>
              <input
                type="email"
                placeholder="이메일을 입력하세요."
                {...register('email', {
                  required: '아이디 필수입력',
                  pattern: {
                    value: EMAIL_REGEX,
                    message: '이메일형식이 올바르지 않습니다.',
                   },
                 })}
               />
             </S.EmailInputDiv>
             <button type="button">중복체크</button>
           </S.EmailInputBtnDiv>

			<>
중괄호를 하나의-> {console.log(watch('email'))}
태그로 묶어준다   {console.log(errors.email?.message)}
            </>            
          
          <S.EmailValidMsg>사용 가능 || 불가능 아이디입니다.     
          </S.EmailValidMsg>
        </S.EmailContainer>
    );
};