[리액트 / material-ui] DialogTitle에 HTML 태그 포함하기

1. <DialogTitle>태그 안에서 직접 HTML 태그 사용

<DialogTitle> 다이얼로그<br/>타이틀 </DialogTitle>

 

2. DialogTitle에 들어갈 값을 prop이나 변수로 받을시 <> </> 빈 태그로 감싸기

render() {
  let title = <>[이름]<br/> 필수항목이 모두 입력되지 않았습니다.</>;

  return (
    <Dialog open={isOpen} onClose={handleClose}>
      <DialogTitle>{title}</DialogTitle>

      <DialogActions className={classes.dialogActions}>
          <Button variant="contained" onClick={handleClose}>확인</Button>
      </DialogActions>
    </Dialog>
  );
}

 

3. DialogTitle에 들어갈 값을 prop이나 변수로 받을시 array 형태 이용

render() {
  let title = [ '[비밀번호]' , <br/> , '필수항목이 모두 입력되지 않았습니다.' ];

  return (
    <Dialog open={isOpen} onClose={handleClose}>
      <DialogTitle>{title}</DialogTitle>

      <DialogActions className={classes.dialogActions}>
          <Button variant="contained" onClick={handleClose}>확인</Button>
      </DialogActions>
    </Dialog>
  );
}

 

 

- 신기했던 점

 

1,2,3 번의 방법으로 DialogTitle을 넘기고, 개발자모드에서 디버깅으로 확인해본 결과 props.children이 array형태로 넘어가는 것을 확인하였다

 

빈태그 이용시에는 array 사이즈가 5인 배열로 넘어가는데 괄호,문자,괄호,HTML태그,문자 이런식으로 나뉘어졌다

 

반면 string 문자 만을 넘긴다면 array가 아닌 stirng으로 받는다

 

디버깅을 이용해서 눈으로 한번 확인해보면 나름 흥미롭기때문에 한번쯤은 해보길 추천드린다