강사님 궁금한 것이 있습니다!

Question

저 문제가 좀 많더라고요 ㅠㅠ 1번 문제 왜 제가 dayjs를 적용하면 아예 사라지더라고요! ㅠㅠ 2번 문제! src\product\index.js Line 42:6: React Hook useEffect has a missing dependency: 'id'. Either include it or remove the dependency array react-hooks/exhaustive-deps src\upload\index.js Line 3:10: 'ForkOutlined' is defined but never used no-unused-vars Search for the keywords to learn more about each warning. To ignore, add // eslint-disable-next-line to the line before. 라고 터미널에 써졌더라고요 ㅠ 그런데 막상 React App을 실행하면 메인도 잘 나오고, 상품을 클릭해도 잘 나오는데 뭐가 문제인지 모르겠습니다 //CSS를 적용하려면, import "./index.css" import { useParams } from 'react-router-dom' ; import axios from 'axios' ; import { useEffect , useState } from 'react' ; function ProductPage (){ //const prams = useParams(); // console.log(prams); //이제 상품을 선택을 할 때 콘솔창에 id: 0, 1, 2.. 상품 숫자가 나온다. //const params = useParams(); //console.log(params); //id를 출력하는 것을 확인할 수 있다. >> 콘솔창에 {id : 2} 이런식으로! const { id } = useParams (); const [ product , setProduct ] = useState ( null ); //처음엔 null이 나타나고 렌더링이 되고 나서 서버에서 상품을 받아오고 호출됨. //useState는 데이터를 받아주는 역할인데 쉽게 말을 하면 네트워크를 받아 상품을 보여줄 때 쓰임 // 콜백 함수 useEffect ( function (){ // useEffect를 통해 1번만 통신해 네트워크를 호출을 해준다. << 쉽게 말을 하면 1f의 형식이다. // axios.get('https://4326fdea-003a-4291-b8b3-b8e47b10723c.mock.pstmn.io/products'+ id) // axios.get(`https://4326fdea-003a-4291-b8b3-b8e47b10723c.mock.pstmn.io/products/${id}`) axios . get ( `http://localhost:8080/products/ ${ id } ` ) // 프로미스(promise) . then ( function ( result ){ // 익명함수에 result의 인자를 넣는다. // setProduct(result.data); postman을 통한 작업을 했을때는 이렇게 간편했지만 // 이제는 server.js > product에서 데이터를 받아야 하기 때문에 작성을 조금 더 추가해야 함. setProduct ( result . data . products ); // console.log(result); }) // 프로미스(promise) . catch ( function ( error ){ console . log ( error ); }) },[]); // console.log(product); // return

상품 상세 페이지{id} 상품

//js문법 if ( product == null ){ return < h1 > 상품 정보를 받고 있습니다... } // {/* const [product, setProduct] = useState(null); 를 비동기 처리방식으로 작동이 되기 때문에 당연히 product.imageUrl은 null로 처리가 된다. 따라서 오류가 발생이 되는 것은 당연한 원리이다. */} return ( < div > < div id = "image-box" > < img src = { "/" + product . imageUrl } alt = "" /> < div id = "profile-box" > < img src = "/images/icons/avatar.png" alt = "" /> < span > { product . seller } < div id = "contents-box" > < div id = "name" > { product . name } < div id = "price" > { product . price } 원 < div id = "createdAt" > 2021년 06월 15일 < div id = "description" > { product . description } ); } export default ProductPage ; import { Form , Divider , Input , InputNumber , Button } from "antd" ; import "./index.css" ; import { ForkOutlined } from "@ant-design/icons" ; function UploadPage () { // return

업로드 화면

; // const onSubmit = function(){//평상시 함수 표현식이다. // 이것을 람다함수 표현식으로 바꾸도록 하자 const onSubmit = ( values ) => { //이것이 람다 함수 표현식! console . log ( values ); }; return ( < div id = "upload-container" > < Form name = "상품 업로드" onFinish = { onSubmit } > { /* 익명함수를 넣은 것과 동일하다. onFinish={onSubmit} */ } < Form.Item name = "upload" label = { < div className = "upload-label" > 상품 사진 } > < div id = "upload-img-placeholder" > < img src = "/images/icons/camera.png" alt = "" /> < span > 이미지를 업로드해주세요. < Divider /> { /* Divider는 콘텐츠의 영역을 나누는 컴포넌트이다. >> 선을 그어준다.

태그와 비슷하지만 다른 속성이다. */ } < Form.Item label = { < div className = "upload-label" > 판매자 명 } name = "seller" rules = { [{ required : true , message : "판매자 이름을 입력해주세요" }] } // rules이라는 프롭이 있는데 여기에는 {}안에서 배열[{}]로 작업해야 한다. > < Input className = "upload-name" size = "large" placeholder = "이름을 입력해주세요." /> < Divider /> < Form.Item name = "name" label = { < div className = "upload-label" > 상품 이름 } rules = { [{ required : true , message : "상품 이름을 입력해주세요" }] } > < Input className = "upload-name" size = "large" placeholder = "상품 이름을 입력해주세요" /> < Divider /> < Form.Item name = "price" label = { < div className = "upload-label" > 상품 가격 } rules = { [{ required : true , message : "상품 가격을 입력해주세요" }] } > < InputNumber defaultValue = { 0 } className = "upload-price" size = "large" /> { /* 숫자형 input */ } < Divider /> < Form.Item name = "description" label = { < div className = "upload-label" > 상품 소개 } rules = { [{ required: true , message: "상품 소개를 입력해주세요." }] } > < Input.TextArea size = "large" id = "product-description" //showCount={true} << react에서 기본형이다. 이것을 아래와 같이 생략할 수 있다. showCount maxLength = { 300 } placeholder = "상품 소개를 적어주세요." /> < Form.Item > < Button id = "submit-button" size = "large" htmlType = "submit" > 문제 등록하기 ); } export default UploadPage ;

그랩 · Answer

안녕하세요 건우님! 1번의 dayjs는 아래 커밋(변경사항)대로 잘 적용했는지 본인 코드와 비교를 해보셨을 때 다른 게 있을까요? https://github.com/yansfil/grab-market-client/commit/55807e8164ad9ba346d7481338c4b423c8ce7e2d 2번의 경우, 보이는 로그의 의미는 useEffect를 사용하실 때 내부에서 state인 id를 사용하게 되면 useEffect 두번쨰 인자(현재 [])에 id를 넣어주라는 의미입니다! 뒷 강의를 더 들으시면 [id] 이렇게 넣어주긴 합니다 :) 만약 두번쨰 인자가 빈 array이면 딱 한 번만 호출되고 다시 호출되지 않지만, 그 안에 state가 있다면 state가 변경될 때마다 useEffect 호출이 됩니다!