🗿 오늘의 목표
- 함수의 재사용
- 컴포넌트 재사용
- 등록 컴포넌트를 수정에 재사용하기
- defaultValue 사용하기
자바스크립트에서 리액트, 앵귤러, 뷰로 넘어오게 된 핵심적인 이유 중 하나 인 컴포넌트 기반의 개발 방식을 알아보자.
기존에는 수정하기 컴포넌트를 개발한다고 하면 등록하기 페이지 따로 수정하기 페이지를 따로 총 두개를 만들었다면 리액트, 앵귤러, 뷰는 컴포넌트 기반의 개발 방식으로 등록하기에서 만들었던 페이지를 수정하기에 똑같이 import해서 사용할 수 있다.
1. 함수의 재사용
컴포넌트의 재사용을 알아보기 전에 함수를 재사용하는 방법과 예시에 대해서 알아보자.
게시글 목록을 불러와보면 날짜가 이런식으로 나올 수 있다. 게시글 목록 뿐만이 아니라 작성 날짜 등이 필요한 곳에서는 날짜가 이런식으로 알아보기 어렵고 길게 나올 수 있다. 사실 slice(0,10) 메서드를 사용해서 열자리를 잘라서 표현할 수도 있지만 매번 slice를 사용해주는 것도 번거로울 수 있기 때문에 다른 방법으로 구현해보자.
이 컴퓨터식 날짜표현에서 연도, 월 그리고 날짜를 뽑아서 원하는 방식으로 표현한 함수를 만들어 준다. 그 함수를 다른 곳에서도 사용할 수 있도록 파일을 따로 빼보자.
src - commons - libraries - utils.js
파일 위치는 이렇게 정해줬다.
이 공통 함수는 import 해서 사용하면 된다.
함수를 불러오고 그 안에 인자 값을 넣어준다.
날짜가 원하는대로 정상적으로 보인다!
이제 이 함수를 다른곳에서도 불러와서 사용할 수 있다.
2. 컴포넌트 재사용
이와 비슷하게 컴포넌트도 재사용할 수 있다.
이런식으로 게시글 등록과 게시글 수정페이지 두개가 있다면 둘 중 하나만 만들어서 재사용하면 훨씬 효율적일 것이다.
이 때 등록과 수정 각각의 페이지에 isEdit을 props로 내려주고 '등록'과 '수정' 이름만 다르게 만들어주면 된다.
3. 등록 컴포넌트를 수정에 재사용하기
1. 하나의 기본 컴포넌트를 만든 뒤 각각을 import 해준다.
2. isEdit을 각각 다르게 내려준다.
3. isEdit을 내려받은 컴포넌트에서 삼항연산자로 isEdit이 true일 때와 false일 때를 구분해준다.
이 때 isEdit이 Boolean 값이기 때문에 === true? 라는 조건을 굳이 달아주지 않아도 된다.
이렇게 하면 하나의 컴포넌트를 만들었지만 두개로 재사용한 모습을 확인할 수 있다.
하지만 이 상태로 게시글을 수정하려고 한다면 원래 작성해놓은 값이 들어가 있지 않고 화면에 빈 값으로 나오는 문제가 있다. 또한 한 개만 수정하고 저장한다면 나머지 값들이 또 빈 값으로 저장된다. 이를 해결하기 위해서는 defaultValue를 사용해야 한다.
4. defaultValue 사용하기
결론부터 이야기 하자면 다음과 같이 input의 옵션으로 defaultValue를 적어주게 되면 그 값이 말 그대로 default 값으로 화면에 출력된다.
이를 이용해서 fetch한 데이터를 defaultValue로 설정해보자.
우선 수정하기 페이지에서 data를 fetch해서 이 data를 컨테이너 컴포넌트로 넘겨준다. 이 때 컨테이너 컴포넌트에서 data를 직접 fetch 하지 않는 이유는 이 컨테이너 컴포넌트가 작성(create)할 때도 쓰이기 때문이다.
이렇게 데이터를 프리젠터 컴포넌트까지 내려보내준다.
그럼 이 props에 담긴 데이터를 이런식으로 사용할 수 있을 것이다.
이제 이걸 defaultValue로 넣어주면 된다.
하지만 등록하기(create) 페이지에서는 data가 당연히 없기 때문에 data가 있을 때만 보여주라는 조건을 달아줘야한다. 옵셔널체이닝의 ?를 달아주자.
그런데 결과가 이 모양이다.
수정한 내용은 변경되었지만 수정하지 않은 작성자랑 제목은 아예 비워져 버렸다. 이 이유는 defaultValue는 들어갔지만 onChange가 일어나지 않아서 state가 없기 때문이다.
🌋 defaultValue 사용시 문제점 해결하기
이를 해결하기 위한 방법은 두가지가 있다.
1. 수정페이지에 왔을 때 data가 있으면 state에 처음부터 강제로 넣어준다.
2. updateBoard api를 보낼 때 변경된 것만 보내준다.
하지만 글의 내용이 길어진다면 2번의 방법이 훨씬 효율적일 것이다.
이제 방법을 알았으니 해결해보자.
updateBoard api를 보낼 때 variables 부분에 비어있지 않은 state만 넣어주도록 하면 된다.
[1] 객체 만들기
수정한 내용을 담아줄 새로운 빈 객체를 하나 만들어준다. 이때 number는 필요하므로 그냥 바로 넣어준다.
[2] 조건 주기
만약에 작성자가 있으면 넣고 없으면 넣지 말아라는 조건을 준다. 내가 만들어 놓은 state 값이 있으면 그걸 그대로 새로 만든 객체의 state로 넣어주라는 조건이다.
[3] 객체 넣어주기
이 객체를 variables안에 고대로 넣어주면 된다.
이제 정상적으로 작동 될 것이다.
실제로 number랑 수정한 contents만 요청간 것을 볼 수 있다.
