react에서의 Typescript 사용 - props 관련
2023. 4. 28. 11:17ㆍReact
props를 type정의시 참고할 점
props를 타입정의 할 때 interface / type으로 정의를 해서 넘기곤 합니다. 타입정의는 정확하게 해야합니다. 그리고 선택적인 prop은 type 정의 시
?:를 사용 합니다.props를 직접 전달하는 경우도 있고, 따로 props 객체를 만들어서 전달하는 경우도 있습니다. 개인적인 의견으로는 함수 인자에 직접 넣는 것도 일반적이지만 따로 빼서 객체로 정의하는 것이 가독성이 더 좋게 느껴졌습니다.
기본값을 정의할 때는 component 정의 뒤에 defaultProps를 이용해서 props의 기본값을 설정해줍니다.
MyComponent.defaultProps = {
title: 'Default Title',
text: 'Default Text',
};- props의 불변성을 지켜줘야 합니다. 직접 수정/변경 하면 안됩니다.
typescript type 정의 방식
타입 정의에는 엄격한 타입 정의와 느슨한 타입정의가 있습니다.
엄격한 타입 정의
- 엄격한 타입 정의 : 모든 속성에 대한 타입정의를 합니다.
장점
- 코드 안정성 향상 : 런타임 오류 방지
- 유지보수성 향상 : 더 쉽게 이해할 수 있고 코드 변경 필요할 때 타입정의를 수정해서 빠르게 반영할 수 있다.
- 개발 생산성 향상 : 자동완성 기능 활용가능
- 가독성 증가 : 타입의 명시적인 정의로 가독성 향상
- 리팩토링 편의성 : 변경 필요한 부분 빨리 찾을 수 있음
- 안정성 향상 : 컴포넌트 간 타입 호환성 오류를 사전에 방지
단점
- 코드 복잡도 증가 : 코드가 길어지는 문제로 가독성 하락할 수 있음
- 유연성 감소 : 다른 타입 데이터 전달 어려움
- 타입 오류 : 컴파일 타임 오류 증가해서 데이터를 확인하는 추가작업을 필요로 한다.
느슨한 타입 정의
- 느슨한 타입 정의 : 일부 속성에 대한 타입을 지정하지 않고 any로 처리합니다.
장점
- 개발 생산성 향상 : 덜 엄격한 정의로 코드 작성시간이 줄어들고 타입오류를 빠르게 해결 가능
- 유연성 : 코드를 유연하게 만들어줌. 그래서 프로젝트 초기에는 덜 엄격하게 정의하고, 안정화되면 타입을 엄격하게 정의할 수 있음.
- 코드 가독성 향상 : 타입정의가 과도하게 복잡하거나 길지 않아서 코드를 읽기 쉬워짐
단점
- 코드 가독성 : 코드가 추상화되고 추론하기 어려워지는 측면
- 디버깅의 어려움 : 타입 오류시 느슨한 정의면 오류를 빨리 발견하기 어려움
- 유지보수성 하락 : 새롭게 투입된 개발자가 코드를 보고 이해하려면 타입의 느슨한 정의시 문제가 발생할 수 있다. 코드가 커지면 더 문제가 커진다.
엄격한 타입정의 / 느슨한 타입정의 간 장단점이 있습니다.
특히 가독성부분에서는 여러 측면에서의 가독성 간 트레이드오프가 발생하기에 이 점에서 각자 상황에 맞는 균형점을 찾는것이 중요합니다.