Conversation
greatSumini
left a comment
There was a problem hiding this comment.
바쁜 일정중에도 고생 많으셨습니다 ㅠㅠ
역시 항상 기대 이상으로 잘 해주시네요! 정말 좋습니다 😊
좀 이따 스터디에서 봬요~
| import styled from "styled-components"; | ||
| import React, { useState } from "react"; | ||
|
|
||
| import LoginForm from "../src/components/login-form"; | ||
| import VoteForm from "../src/components/vote-form"; | ||
|
|
||
| import styled from "styled-components"; | ||
| import Axios from "axios"; |
There was a problem hiding this comment.
import React, { useState } from 'react';
import styled from 'styled-components';
import Axios from 'axios';
import LoginForm from '../src/components/login-form';
import VoteForm from '../src/components/vote-form';
외부 라이브러리와, 그렇지 않은 import들을 구분지어 묶어주세요!
| import Axios from "axios"; | ||
|
|
||
| export default function Home() { | ||
| const [login, setLogin] = useState(false); |
There was a problem hiding this comment.
| const [login, setLogin] = useState(false); | |
| const [isLoggedIn, setLoggedIn] = useState(false); |
boolean값을 표현하는 변수라 이름에 is를 붙여주면 더 좋을 것 같아요!
| import styled from "styled-components"; | ||
| import axios from "axios"; | ||
|
|
||
| export default function CandidateForm(props) { |
There was a problem hiding this comment.
| export default function CandidateForm(props) { | |
| export default function CandidateCard(props) { |
Form은 input으로 입력받은 정보를 제출하는 section을 의미합니다.
이 component의 역할과는 맞지 않는 것 같아요!
|
|
||
| const voteCandidate = () => { | ||
| axios | ||
| .put(process.env.API_HOST + "/candidates/" + id + "/vote/") |
| const voteCandidate = () => { | ||
| axios | ||
| .put(process.env.API_HOST + "/candidates/" + id + "/vote/") | ||
| .then(function (response) { |
| if (error.response.status === 404) { | ||
| alert("이메일이 존재하지 않습니다."); | ||
| setUserData({ | ||
| email: "", | ||
| password: "", | ||
| }); | ||
| console.log(error.response); | ||
| return; | ||
| } else if (error.response.status === 422) { | ||
| alert("비밀번호가 존재하지 않습니다."); | ||
| setUserData({ | ||
| email, | ||
| password: "", | ||
| }); | ||
| console.log(error.response); | ||
| return; | ||
| } | ||
| console.log(error); |
There was a problem hiding this comment.
switch문을 사용해 이쁘게 리팩토링할 수 있을 것 같아요 ㅎㅎ
| <CandidateForm | ||
| key={JSON.stringify(candidate)} | ||
| id={candidate._id} | ||
| rank={i++} |
There was a problem hiding this comment.
| rank={i++} | |
| rank={index+1} |
이렇게 바꿀 수 있어요!
| .sort((a, b) => { | ||
| return b.voteCount - a.voteCount; | ||
| }) |
There was a problem hiding this comment.
| .sort((a, b) => { | |
| return b.voteCount - a.voteCount; | |
| }) | |
| .sort((a, b) => b.voteCount - a.voteCount) |
화살표함수에서 바로 return할땐 중괄호와 return문을 생략할 수 있습니다~
|
|
||
| useEffect(() => { | ||
| getCandidateList(); | ||
| }, [candidateList]); |
There was a problem hiding this comment.
| }, [candidateList]); | |
| }, []); |
이 배열안에 candidateList가 들어있으면 getCandidateList 함수가 계속해서 실행된답니다 😅
참고링크
| alert(name + "님에게 투표완료."); | ||
| }) |
There was a problem hiding this comment.
투표 완료시 candidateList를 다시 가져오는 로직이 빠져있네요!
정상작동하고 있는 이유는 엄청난 우연..?! 덕분인데, 오프라인 스터디에서 자세히 설명해드리겠습니다 ㅋㅋㅋㅎ
https://react-vote-11th-seven.now.sh
제한기간을 못맞춰서 죄송합니다 ㅠㅠ.
아무래도 저번 주 스터디도 참여 못했고, 중간고사 기간이랑 겹쳐서 좀 고생했네요 ㅎㅎ;
그래도 이번과제를 하면서 asyn과 await를 왜 쓰는지 알게 됬고 재밌었습니다.
단, reactMemo는 아직 어떻게 쓰는지 모르겠고, axios로 데이터 받아오는 부분에서도 아직 궁금한게 많습니다. 또 하면서 느꼇던 점은 아직도 인자전달부분을 최대한 깔끔하게 하고 더블 화살표함수로 함수도 전달하고 싶었는데 결국 못했네요..