📔 학습목표
- 알림창 >> Modal
- 주소, 우편번호 >> React-Daum-Postcode
- setState 기능 >> prevState
지난 시간 수업 코드리뷰
- 유튜브
- 좋아요/ 싫어요
- 댓글 (별)
1. 유튜브
queries 에서 YoutubeUrl을 추가로 받고 싶다면?
위처럼 추가해야 함!
데이터 안에는 YoutubeUrl이랑 좋아요/싫어요 카운트가 포함되어 있다.
YoutubeUrl이 있으면 보여지도록 조건부 렌더링을 넣어줌
📌 다시 짚고 가기
조건부 렌더링이란?
: 특정 조건에 따라 다른 결과물을 렌더링 하는 것
인라인 If-Else 패턴
삼항 연산자를 사용하여
'(조건) ? (참일 경우) : (거짓일 경우) ' 로 부분 조건부 렌더링 구현
ex) {data && data.fetchBoard.writer}
styles에 ReactPlayer을 import 해주고,
라이브러리 자체에서 width/height 를 제공해준다.
그래서 태그 안에서 사이즈를 조절해야 한다.
contents 에 defalutValue 을 넣은 것처럼 YoutubeUrl에도 써준다.
defalutValue 이 있기 때문에 수정이 가능하다
fetchBoard한 걸 defaultVaule로 보여주고
유튜브의 원래 영상을 보여주려면(= defaultVaule를 보여주기 위해서는)
index에 반드시 YoutubeUrl을 추가해줘야 한다.
기존에 작성자 패스워드를 작성하지 않으면 오류 나는 부분에 YoutubeUrl 추가!!!
제목이나 내용, 유튜브 주소가 수정되지 않으면 오류가 뜨도록 설정했다.
disable 하면 칸 색이 바뀌는데
색은 그대로 쓰고 입력은 불가능하게 하고 싶다 하면
readOnly ={true} 하면 된다.
수정할 때만 이 기능을 쓰고 싶다!
{props.isEdit ? true : false }
근데 이렇게 쓰는 게 무의미 하다
readonly={props.isEdit}
이 자체가 true / false 기 때문에 뒤에 적지 않아도 됌.
readOnly={props.data?. fetchBoard.writer}
타입을 지정해주지 않아서 any로 되어있음
readOnly={props.data?. fetchBoard.writer <span style="color:red">as string</span>}
위와 같은 방법으로 임시로 지정해줄 수도 있음.
readOnly={writer? true : false} 와
readOnly={!!writer} 는 같은 코드
이중 부정 연산자
: 있으면 true 없으면 false
원래의 값으로 돌려줌
😨 나중에 해결해야 하는 부분
지금은 타입을 지정하지 않아서 any로 되어있지만,
나중에 타입스크립트 컴파일 하면 타입에러가 날 거임.
boolean타입으로 넣어야 된다고 뜰 거임
그렇기 때문에 이중 부정연산자를 통해 해결하면 됌.
2. 좋아요 / 싫어요
클릭하면 mutation이 들어간다
DB에는 좋아요가 '1'이 추가됐는데, UI에는 좋아요 '1'이 보여지지 않아서
refetchBoard를 해야한다.
그러면 query가 두번 날라간다 (mutation이 날라가고 refetchQueries가 날라간다.)
3. 댓글 별점 추가
ant desing에서 state 부분만 필요
tooltip (마우스 올렸을 때 말풍선 나오는 기능)
value값은 없어도 됌!
state에 초기값 설정해줘야 한다.
emotion 이랑 같이 쓰고 싶으면 emotion 태그로 감싸서 쓰면 됌.
별의 색이 내가 생각한대로 정상적으로 나오지 않을 수도 있음
원인? _app.js / import를 안 해준 거!
아직 ant design 이 익숙하지 않다면?
https://ant.design/
getting started 를 읽어보면 됌! Docs 메뉴에서 찾을 수도 있음
🤓 라이브러리마다 사용법을 익히는 게 중요 !
독스 읽는 tip
위에서부터 하나하나 다 읽는 게 아니라 핵심만 보는 거!!
Ant-D를 이용한 Modal
1.alert
alert 명령이 아닌 알림창을 모달을 이용해 만들자.
코드를 먼저 살펴보자.
import { Modal } from 'antd'
export default function ModalAlertPage() {
const onClickSuccessButton = () => {
// alert ("게시물 등록에 성공했습니다")
Modal.success({content: "게시물 등록에 성공했습니다!!"})
}
const onClickFailButton = () => {
// alert ("게시물 등록에 성공했습니다")
Modal.error({content: "비밀번호가 틀렸습니다!!"})
}
return (
<div>
<button onClick={onClickSuccessButton}>성공했을 때</button>
<button onClick={onClickFailButton}>실패했을 때</button>
</div>
);
}결과
2. custom
// 내가 입력할 창을 만들 거니까 useState 를 import
import React, { useState } from 'react';
import { Modal, Button } from 'antd';
export default function ModalCustomPage() {
// boolean 타입을 false로 준 이유는 모달창을 숨기기 위해서이다.
const [isModalVisible, setIsModalVisible] = useState(false);
const [password, setPassword] = useState("");
// 클릭했을 시 실행될 변수 (보여야 하니까 true 값)
const showModal = () => {
setIsModalVisible(true);
};
// ok, cancel 을 각각 누를 시 다시 숨김.
const handleOk = () => {
setIsModalVisible(false);
};
const handleCancel = () => {
setIsModalVisible(false);
};
// 비밀번호를 입력할 input
const onChangePassword = (event) => {
setPassword(event.target.value);
}
return(
<>
<Button onClick={showModal}>Open Modal</Button>
<Modal visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
비밀번호 입력: <input type="password" onChange={onChangePassword}/>
</Modal>
</>
);
}결과
React-daum-Postcode
: 리액트에서 제공하는 라이브러리 (국내에서만 쓰임)
사용하기 이전에, 설치를 해야한다.
yarn add react-daum-postcode
import 해주고
2번에서 사용한 모달 태그 안에
DaunPostcode 를 추가해준다.
결과
이때 생기는 문제점!!
주소를 입력하고 선택하고 나서 다시 모달을 클릭하면,
이렇게 뜨는데 그 이유는,
초기값이 false 이기 때문에 화면에 보여지지 않은거임
(즉, daum-postcode는 종료 됐는데 모달이 종료가 안 돼서 그럼)
🤔 해결 방법?
handleComplete이 됐을 때 모달 Visible을 false로!
모달을 종료하는 방법 2가지
-
없애고 새로 만들기
기존 모달은 삭제하는 게 아니라 숨김 처리
숨겼던 걸 다시 키면 입력한 값이 나오는 게 당연함.
모달을 숨기는게 아니라 아예 없애고 다시 생성하게 하는게 나음 -
props 사용
autoClose [boolean] - 우편번호 검색 완료시, 자동 닫힘 여부입니다. 주소를 선택하면, 최상위 엘리먼트를 돔에서 제거합니다. 기본값: true
+ plus
조건부 렌더링을 통해 코드 리팩토링을 한다.
state - prev
: 임시 저장공간에 가서 이전 값을 가져오는 거
state는 리액트 컴포넌트에서 데이터를 담기위한 상자
상자에 담긴 내용들은 함수가 모두 끝나면 화면에 반영된다.
버튼을 누를 때마다 갯수가 하나씩 증가되는 걸 알 수 있다.
그럼, 카운트를 5개씩 증가시키고 싶다면?
setCount(count + 1) 을 다섯번 쓰면 될까?....
정답은 아니다.
카운트의 값은 0이므로 상자에는 계속 1이 담긴다.
그렇다면, 해결방법은 ?
prev라는 임시 저장공간을 사용해서 작성하면 된다.
카운터는 임시 저장공간에 들어가서 0+1 해서 1을 저장한다
그 다음엔 저장공간에 있던 1과 1이 만나 2를 저장한다.
.
.
.
만약, 임시저장공간에 있는 값이 없다면 기본 값을 불러온다.
husky
:코드를 git에 commit 하기 전에, 기존의 규칙을 지켜가면서 코딩했는지 검증해주는 도구
( 어긋난다면 commit 거절 )
비고 : 팀프로젝트나 대규모 프로젝트 할 때 필요하다
설치
lint-staged
:stage 상태의 git파일에 대해 lint와 설정해둔 명령어를 실행해주는 라이브러리
주의 사항
git add 가 안된다고 계속 시도할 경우
git에서 파일을 삭제해버릴 수도 있음.....(오호...)
