타이어 결과물 페이지 구현 #27 #30
Conversation
| <div> | ||
| <div className="t2"> | ||
| <p>패턴 디자인</p> | ||
| <p>{formatCurrency(result?.pattern.price)}</p> |
There was a problem hiding this comment.
typescript의 경우에는 타입 체크가 엄격하기 때문에 객체에 값을 할당하지 않을 경우 에러가 발생합니다. 이 경우에는 api 값을 사용하기 때문에 result의 속성인 pattern이 없을 경우 에러가 발생하기 때문에 ?를 통해 선택적 프로퍼티(Optional Properties)라는 것을 사용해줘야 합니다.
| }, [result]); | ||
|
|
||
| if (!result) { | ||
| return <div>Loading...</div>; |
There was a problem hiding this comment.
P4: result가 없을 때 저게 띄워지는데 저렇게 해보니까 페이지 뜰 때 반짝 거리더라구요?!! 안 번쩍거리기 위해서 저기에 style 입히거나 다른 방법이 있을까요? (궁금)
There was a problem hiding this comment.
API 요청을 통해 result를 받아오기 때문에 그 과정에서 발생하는 것 같습니다. 해당 이슈를 해결하기 위해서는 로딩 페이지를 별도로 만드는 방식으로 해결할 수는 있을 것 같은데, 로딩 페이지는 추후 고려해보겠습니다.
| id: string; | ||
| } | ||
|
|
||
| export interface ResultData { |
There was a problem hiding this comment.
P5: 서버에서 넘겨주는 게 있는데 타입을 따로 만든 건 타입스크립트라서 그런가요? 장점은??
There was a problem hiding this comment.
typescript 특성 상 추후 .tsx 파일을 사용할 때 Result 객체를 정의하여야 하는데 이때 이 객체의 타입을 정의하기 위해 사용했습니다. 이를 통해 테이터의 자료형을 알 수 있어 IDE의 도움을 받기 용이하고, 코드 작성을 보다 쉽고 직관적으로 할 수 있습니다.
더 관심있으시면 'TypeScript의 장점'에 대해서 알아보시면 좋을 것 같습니다.
Motivation
Problem Solving
To Reviewer