Dev_log 타입스크립트 key,value 타입 선언과 클래스 컴포넌트에서 라우트 props사용

@glassestae·2020년 5월 22일
0

Dev

목록 보기
1/3

1.typescript

오늘 타입스크립트를 쓰면서 가장 당황했던 부분은 크게 두곳으로, 먼저 첫번째는
key in loof로 다이나믹하게 props를 넘겨주는 부분이 에러가 난 것이다.

1.key,value 타입 선언

//미리 작성해놓은 인터페이스 
interface values {
  email: string;
  user_name: string;
  password: string;
  passwordCheck: string;
  err: any;
}

for(let key in obj){
  <Input
	name={key}
	key={key}
	value={values[key]} <---이 부분이 타입스크립트 에러 출력
	onChange={this.handleChange}
	/>
}

이부분에서 key의 타입 어노테이션 해주는 부분이 헷갈려서 이곳 저곳 넣어보다 도저히
안돼서 구글링을 통해 알아보니

interface values {
  email: string;
  user_name: string;
  password: string;
  passwordCheck: string;
  err: any;
  [key: string]: any;
}

이런식으로 키 값 자체도 저런식으로 어노테이션을 해줘야 타입이 제대로 적용된다

key 자체는 스트링으로 타입 선언을 하고 value는 여러값이 믹스되어 있는 경우라
일단은 편의상 any로 해주었다.

2.class component에서 history 타입 선언하기

리액트 dev툴로 확인한 컴포넌트 props에 match,history,location이 전부다 있었는데
막상 history 를 사용하려고 보니 타입 선언이 안돼서 사용할 수 없다는 에러가 출력되는 문제였다.

interface Props extends RouteComponentProps {}
export default class extends React.Component<Props, values> {
constructor(props: Props) {

react-router-dom에서 RouteComponentProps를 import로 가져온다음
내가 Props라는 이름의 인터페이스의 부모로 extends 시켜 사용했더니 정상적으로
history를 사용할 수 있었다.

지금은 router props 외에 달리 받는 props가 없어 바로 중괄호를 닫아줬지만
중괄호 안에 추가로 타입을 선언해서 사용가능 하다.

2.axios 기본 사용법

이전까진 계속 fecth만 사용하다 이번 프로젝트에서는 axios를 사용하기로 결정했는데
훨씬 간편하고 클린한 코드가 작성되었다.

 // axios({
  //   method: "post",
  //   url: "url/path",
  //   headers: { "content-type": "application/json" },
  //   data: { email, username, password },
  // })

  let data = { email, username, password };
  let opt = {
    headers: { "content-type": "application/json" },
  }
  axios.post("url/path", data, opt)

위에 주석처리 한 곳이 axios 의 기본 사용법으로 함수를 호출하고
안에 객체로 메소드와,url,헤더,바디 를 작성하는 방법이 있고
아래처럼 post메소드를 사용해 더 간단하게도 작성이 가능하다.!

약간 헷갈려서 실수했었는데 헤더가 들어가는 위치를 두번째 파라미터 위치로 착각해서
계속 서버에서는 500번 에러 코드를 출력 했다.
그래서 기본 문법으로 작성을 해보고 아래처럼 제 위치에 변수로 담아서 보내주니
정상적으로 서버에 요청을 보낼 수 있었다.

profile
프론트엔드 디벨로퍼 지망 :D

0개의 댓글