타입 스크립트

왜?

• 정말 큰 서비스에서 오류가 난다면? 에러는 곧 지뢰밭
• 이런 사태를 사전에 예방하기 위한다면 무조건 타입스크립트
• 자바스크립트보다 불편하더라도 실무에선 오류방지를 위해타입스크립트를쓴다

어떻게?

• 설치하기(https://www.typescriptlang.org/download)
• 파일명변경 (.js -> .tsx, .ts)
  container, presenter -> .tsx
  queries, styles -> .ts
• 자바스크립트보다 불편하더라도 실무에선 오류방지를 위해타입스크립트를쓴다

tsconfig

• tsconfig.json 파일 만들기 -> yarn dev 하면 타입스크립트 설정창 입력됨
  지금까지 .js 는 yarn으로 불러온 jsx 이다.
• 타입스크립트는 이렇게 불러오지못하기때문에 .tsx 로 써줘야한다.

타입 추론

let aaa =" 안녕하세요"

라고 했으면 aaa : string이 자동으로 달려 문자열이라는 타입추론이 실행된다.
그래서 aaa = 3 하면 에러가 난다. aaa = "반갑습니다"는 에러가안난다.

interface IProps
props -> props: IProps

게시글 수정하기에 기존 등록데이터 남아있게 하기

📔 등록 페이지

작성시에 입력한 데이터가

📔 상세 페이지

상세페이지에서 조회가 되고

📔 수정 페이지

수정페이지에서 기존값으로 그대로 남아있게 하는 법

💻 게시물 등록/수정 Container

  const { data } = useQuery(FETCH_BOARD, {
    variables: { boardId: router.query.number },
  });

useQuery 기능을 이용해 data 를 선언해준다.
variables는 boardId 를 이용해 넣어준다.

💻 게시물 등록/수정 Presenter

 <Writer
            name="writer"
            type="text"
            placeholder="이름을 적어주세요."
            onChange={props.onChangeWriter}
            defaultValue={props.data?.fetchBoard.writer}
	/>

defalutValue란 다음의 값을 기존값으로 띄우겠다는 말이다 .
data에서 가져온 작성자 값을 받아온다.