[코드 걸음마] 중복선언 type, List Component 렌더링 함수

---

1. 중복 선언된type은 type alias로 간략하게 사용하자

//before
const [images, setImages] =
    useState<React.DetailedHTMLProps<ImageElementType, HTMLImageElement>[]>();
const [files, setFiles] =
    useState<React.DetailedHTMLProps<ImageElementType, HTMLImageElement>[]>();

 

---

//after
type DetailedHtmlType = React.DetailedHTMLProps<ImageElementType,HTMLImageElement>;

const [images, setImages] = useState<DetailedHtmlType[]>();
const [files, setFiles] = useState<DetailedHtmlType[]>();

type을 선언할때 복잡한 타입을 여러번 선언하게되면 타입 변경시 수정 포인트가 많아지게된다. 

선언하는 곳이 몇개 안될때는 그냥 사용해도 좋지만 1얼마나 재사용하게될지 모르니 되도록이면 alias를 사용하여 수정 포인트를 한군데로 몰아주는게 코드관리에 도움이 된다.

 

---

 

2.  List 컴포넌트를 렌더링할때 List 컴포넌트 자체를 만드는 함수를 작성하지말고 Item 단위로 구성한 후 List 함수를 통해 렌더링 하자

//before

const getImageComponents = (data: Components.Schemas.Article) => {
    if (data && data.files) {
      setFiles(
        data?.files.map((file, key) => {
          return (
            <ListItem key={key}>
              <Grid container>
                <Grid item xs={9} textAlign="left" display="flex">
                  <ListItemIcon sx={{ paddingTop: "10px" }}>
                    <CropOriginalIcon />
                  </ListItemIcon>
                  <ListItemText primary={file.name} secondary={file.mime} />
                </Grid>
                <Grid item xs={3} textAlign="right">
                  <IconButton
                    aria-label="delete"
                    onClick={() => {
                      deleteFileProcess(file.id);
                    }}
                  >
                    <DeleteOutlineIcon fontSize="inherit" />
                  </IconButton>
                </Grid>
              </Grid>
            </ListItem>
          );
        })
      );
    }
  };

---

//단일 파일, 컴포넌트로 구성 -- ArticleFile.tsx
const ArticleFile = (file: FileType) => {
  return (
    <ListItem key={file.id}>
      <Grid container>
        <Grid item xs={9} textAlign="left" display="flex">
          <ListItemIcon sx={{ paddingTop: "10px" }}>
            <CropOriginalIcon />
          </ListItemIcon>
          <ListItemText primary={file.name} secondary={file.mime} />
        </Grid>
        <Grid item xs={3} textAlign="right">
          <IconButton
            aria-label="delete"           
          >
            <DeleteOutlineIcon fontSize="inherit" />
          </IconButton>
        </Grid>
      </Grid>
    </ListItem>
  );
};

export default ArticleFile;

//원하는 곳에서 재사용가능
article?.files.map((file, key) => {
  return <ArticleFile {...file} />;
})

하나의 파일안에서 모든걸 구현하면 좋겠지만

컴포넌트화 할수 있는 것은 컴포넌트화 하여 추후에 재사용 할수 있게 하면 원래 코드량도 줄고 다른 상황에서도 코드를 재사용 할 수 있다.