팀 프로젝트 - 선수리스트

구현사항

팀 관리 페이지에 들어가면 보이는게 3가지가 있다

그중 한가지 포메이션을 만들었고, 이제 만들거는 선수리스트이다

선수 리스트 구현사항은 다음과 같다

• 전술판에 배치된 선수는 배치된 포지션과 이름이 뜬다
• 전술판에 배치된 선수는 선수 리스트 상단에 먼저 뜬다
• 전술판에 배치되지 않은 선수는 선호 포지션과 이름이 뜬다

우선 이렇게 먼저 개발을 해보도록 하자

구현

새로운 List라는 파일을 만들었고 List와 Formation을 동시에 띄워주는 TeamManage 파일도 만들었다

TeamManage.js

import React from 'react';
import Formation from "./Formation"
import List from "./List"

function TeamManage () {

  return(
    <>
      {<Formation />}
      {<List />}
    </>
  )
}

export default TeamManage

이렇게 해서 App.js에 라우터를 걸어두었다

약간 문제가 되는건 두개의 컴포넌트가 각각 위아래로 뜬다는 것인데 이건 나중에 해결해보도록 하자

두개의 컴포넌트가 둘다 PlayerList를 필요로 해서 팀매니지에서 받은뒤에 props로 넘겨줘도 될거같은데

그렇게 하려면 포메이션 코드를 좀 많이 수정해야될거같아서 일단 List를 먼저 구현을 해보기로했다

포메이션과 똑같이 useEffect로 PlayerList를 만들었다

그리고 그 배열을 map으로 화면에 띄웠다

개발을 다 완료하고 정리하면서 글을 작성하는거라 중간 결과물은 미리 찍어두지 못했다ㅠㅠ

import React, { useState }  from 'react';
import axios from 'axios';
import { useEffect } from 'react';
import './List.css'

function List () {
  const [PlayerList, SetPlayerList] = useState(null);
  useEffect(async () => {//페이지 들어가자마자 DB에서 포지션, 선수 정보 받아오고 각 원에 이름 넣어주기
    const res = await axios.get("/api/readUser")
    SetPlayerList(sort)
  }, [])
    
  return (
    <div>
      <h2>선수 리스트</h2>
      <ul>
        {PlayerList && PlayerList.map((player) => {
            return (
              <li>
                {player.name}
                {player.select}
                {player.back}
              </li>
            )
        })}
      </ul>
    </div>

  )
}

export default List

이렇게 해서 화면을 찍으면 DB에서 받아온 선수정보를 화면에 리스트로 띄운다

문제는 기배치된 선수가 상단에 먼저 올라오지 않는다

한번 정렬을 해주어야 하는데 검색을 해보니까 sort가 결과가 제일 많이 나왔다

근데 데이터가 많으면 sort하는거보다 map으로 하는게 좋다고 했다

sort의 비교함수는 매 요소 마다 하노이의 탑을 하기때문이라고 했다

자세한 정보는 링크텍스트 여기에 들어가면 나올 것이다

팀 선수들이 많아봐야 30명? 정도일 것 같아서 그냥 sort로 구현을 했고 나중에 필요하면 map으로 바꿔보도록 하자

또한 구분을 하기위해 선수 리스트를 만들어주는 map 에 분기를 줘서 className을 주었다

import React, { useState }  from 'react';
import axios from 'axios';
import { useEffect } from 'react';
import './List.css'

function List () {
  const [PlayerList, SetPlayerList] = useState(null);
  useEffect(async () => {//페이지 들어가자마자 DB에서 포지션, 선수 정보 받아오고 각 원에 이름 넣어주기
    const res = await axios.get("/api/readUser")
    const sort = res.data.sort(function(a, b){//DB에서 온 리스트 선발선수 맨위로 정렬
      let x = a.already
      if(x === true){
        return -1
      }
      return 0
    })
    SetPlayerList(sort)
  }, [])
    
  return (
    <div>
      <h2>선수 리스트</h2>
      <ul>
        {PlayerList && PlayerList.map((player) => {
          if(player.already === true){
            return (
              <li className = "selected" key={player._id}>
                선발
                {player.name}
                {player.select}
                {player.back}
              </li>
            )
          } 
          else if(player.already === false){
            return (
              <li className = "candidate" key={player._id}>
                후보
                {player.name}
                {player.like}
                {player.back}
              </li>
            )
          }
        })}
      </ul>
    </div>

  )
}

export default List

이렇게 하면 아래와 같이 나온다

이제 두개의 컴포넌트를 가로로 띄워보도록 하자