style props 로 받을때 type 설정

인프런 커뮤니티 질문&답변

작성한 질문수

핸즈온 리액트 네이티브

7.5 :: 상태에 따른 색 변경과 style props

작성

301

안녕하세요 멋쟁이 선생님.

타입스크립트를 이용해서 작업중인데요.

SignInScreen 에서 styles props 를 보내고

Input 컴포넌트에서 styles props 를 받을때

type InputProps = {  
  placeholder: string;
  value: string;
  styles?: object
};

이렇게 하고 아래 View에 스타일을 적용했더니,

<View style={[common.inputWrapper, styles?.inputWrapper]}>

위의 styles?.inputWrapper 의 inputWrapper 가 붉은 밑줄이 생기고 툴팁을 보니

TS2339: Property 'inputWrapper' does not exist on type '{ styles: string; }'.

라고 안내가 뜨는데요.

제가 무엇을 놓치고 있는건지요..?

답변 1

지식공유자

안녕하세요,

강의를 벗어난 질문에 대해서는 답변하지 않고 있습니다. 그리고, 강의에서 타입스크립트를 사용하지 않습니다. 이 부분 이해해 주시면 감사하겠습니다.

간단하게 설명드리면, styles에 어떤 값들이 들어올 수 있는지 알려주면 됩니다.

예를 들어, 다음과 같이 작성하시면 됩니다.

type InputStyles = {

inputWrapper?: object,

}

type InputProps = {

value: string,

styles?: InputStyles

}

이렇게 하면, InputProps로 전달된 styles 객체에 inputWrapper가 있다는것을 알려주게 됩니다.

강의를 벗어난 부분에 대한 답변은 하지 않는 부분 양해 부탁드립니다.

타입스크립트에 관련된 질문은 타입스크립트쪽에서 진행하시기 바랍니다.

즐거운 하루 되세요

감사합니다.

작성한 질문수