09) 목요일

이희주·2022년 5월 19일

React typescript 게시물수정

React

1.이걸 쓰면 더 안전하다고? >>> typescript
2.기존의 javascript를 typescript로 바꾸자 !

지난시간 코드리뷰

등록하기에서는 모두 다 입력을 해야만 버튼을 활성화 시켰지만
수정하기에서는 바꾸고 싶은 부분만 변경할 수 있기 때문에 버튼을 활성화 시킴

수정페이지 실습

1. 기존 내용 보여주기

수정하기 페이지에 들어갔을 때 기존에 입력했던 내용(디폴트값) 보여주기
게시판 내용을 fetchboard 한 다음 그 내용을 다시 받아와서 props로 container에 보낸다음 그걸 다시 props해서 presenter의 defaultValue에 보내주기 상세페이지에서 초기 데이터를 받아오기 (import, FETCH_BOARD, router, data) 요청해서 받아온 data를 다시 넘겨주기 위해 props 해줌!

이렇게 하면
등록페이지와 수정페이지의 차이를 알 수 있다
기존페이지는 등록만,
수정페이지는 기존값을 가져와서 화면에 넘겨주는 것까지 들어있음

props한 내용을 드릴링으로 presenter에 보여주기

근데 이렇게 하면 등록페이지에도 이게 뜰 수 있다(그러면 오류뜸)
그래서 옵셔널체이닝으로
props.boardData가 있으면 보여주고, 없으면 안보여주게 해줌

2.골라서 수정하기

수정하고 싶은 내용만 골라서 수정하기 (변경 안 한 내용은 수정되지 않도록)

1번에서 기존값을 가져오는것까지 했는데, 수정하기를 하고 등록하면 값이 다 사라지게 된다

문제는?
html에는 default 값을 가져왔는데, 실제로 state들은 비워져 있기 때문에 빈값이 들어가 있는 것! 이상태에서 수정하기를 누르면 빈값이 들어간다

어떤 값을 하나라도 입력해야 onchange 함수가 실행되는데, onchange함수가 실행돼야 state가 실행되게끔 한것이기 때뮨에 이렇게 되는거임

state가 기존값을 유지하는 방법은

mutation 날릴 때 빈값은 빼고 number랑 변경된 부분만 날리기 (변경한 내용만 바뀌고 나머지는 mutation에서 제외시켜 기본값을 유지하게끔)

수정하기가 날릴 state를 처음부터 빈 문자열이 아닌 초기값 자체를 props.boardData.fetchboard.wrter로 넣어주기 (title만 바꿔도 writer, contents에 state 초기값이 들어있게 됨)

더 좋은 방법은? 1번!
이유는 2번을 하게되면 바꾼적 없는 내용도 다 딸려들어가서 네트워크비용이 많이 발생하게됨

1번 방법대로 해보기!

실제로 안에 내용이 들어있는 것들만 editvariables에 채워지게 하기

그다음, result의 variables를 EditVariables로 변경해준다

결과 : 기존값을 유지하고 잘 수정됨

Typescript

: 자바스크립트의 타입을 강제시키는 언어

let aaa = "안녕하세요"
aaa = 123 를
typescript 로 지정하기 : string 이 typescript 부분
let aaa: string = "안녕하세요" 하면 값이 들어가지만
aaa = 123 을 넣으면 에러메세지가 뜬다

typescript를 쓰는 이유는?

ex. 한 사람당 게시물 다섯개까지 쓸 수 있는 경우 
게시물 수가 5개 이하일 때까지 작성을 할 수 있는데 자바스크립트에서는
"0"+1 을 하게 되면 01 이 나와서 5 이하가 된다 "01" "01111" "01111111" 등으로 게시물을 계속 작성하게 된 것

단편적으로는 이렇게 까지만 볼 수 있지만 서비스가 커지게 되면 이런 경우가 오조오억개 생길 수 있기 때문에 사전에 타입을 지정한 typescript로 방지해준다 !

typescript 사용 방법

얘는 문자, 숫자에요 하고 상자를 하나 만들어 준 다음 그 안에 집어넣어주면 된다

let aaa : string = "hi"
let bbb : number = 123
let ccc : boolean = true
let ddd : boolean = false

근데 객체의 타입은 어떻게 지정하지?

객체의 타입은 정해져있지 않기 때문에, 나만의 타입을 만들어서 객체에 지정해줘야 한다
let profile : Iprofile = {name:"철수", age:13}
profile 객체의 타입을 지정해주려면?
Interface Iprofile {
	name: string
    age: number
}

앞에 Interface 를 써주고, Iprofile 이라는 나만의 타입 이름을 써준다(나만의 타입 이름은 마음대로 지정이 가능하지만 profile이라는 객체이름을 따오고 Interface의 I를 따서 Iprofile로 만드는게 관례)