[PROJECT] React | Select Box의 Option 값 전달하기

일단 구현해야하는 화면부터 봐보자!

구현할거 ㅎㅎ..

사진에서 보다시피, drop down 버튼을 누르면 TEAM1의 학생들, TEAM2의 학생들이 팀목록 안에 들어와야 한다!

 

 

그리고 이 데이터들은,

이런 형태!

 

---

 

일단 컴포넌트는 두개로 구성되어있다.

• P07_05.js : Select-Box의 값을 이벤트 객체로 받기 -> TeamList에 team 배열 전달하기
• P07_TeamList.js : P07_05.js 로부터 props로 해당 team 배열 받아오고 그 안에 학생들 map으로 돌려서 보여주기

 

어떻게 구현했는지는 코드로 설명

P07_05.js 코드는 다음과 같다.

import React, { useState } from "react";
import { useTeams } from "../../../components/Use";
import StudentList from "./P07_StudentList";
import TeamList from "./P07_TeamList";

function P07_05() {
  const { teamList, listAllTeams } = useTeams();

  const fetch = async() => {
    try{
      await listAllTeams(code);
    } catch (e) {
      alert(e);
    } 
  }

  const [students, setStudents] = useState(teamList.results[0]);

  const teamClick = (e) => {
    setStudents(teamList.results[Number(e.target.value)-1]);
  }

  useEffect(()=> {
    fetch();
  },[])
  

  return (
      <ListText>팀목록</ListText>
        <Select onChange={teamClick} name="team" id="team">
           {teamList.results.map((data) => {
             return ( 
              <option value={data.name}>
              	TEAM {data.name}
              </option>  
            )})}
         </Select> 
       <TeamList students={students}/>
  );
}

export default P07_05;

• <Select onChange={teamClick}> : Select 의 값이 바뀌는 경우에 네모박스에 보여지는 팀당 학생들이 바뀌어야 하기 때문에 onChange={teamClick}으로 주었다. 
• <option value={data.name}> : data.name은 1부터 2,3,4,... 순으로 team이름을 나타낸다. 이것을 onChange에서 value로 받아야한다.
• useState(teamList.results[0]) : 처음 화면이 렌더링이 되는 시점에, 초깃값을 설정해두지 않아 계속 오류가 떴었다! 화면이 가장 처음 렌더링 되는 시점에는 results 배열의 가장 첫팀이 먼저 자동으로 나와야하기 때문에 [0]값으로 초깃값을 설정하였다.
• teamClick의 setStudents(teamList.results[Number(e.target.value)-1]
  • Number(e.target.value) : 여기서 Number 는 괄호 안의 값을 숫자 값으로 바꿔 작업할 수 있게 해주는 래퍼 객체이다. e.target.value로 받아오는 {data.name} 은 string 형태이므로 숫자로 바꿔주어야한다.
  • Number(e.target.value)-1 : -1을 해주는 이유는 {data.name} (= team.name) 은 1부터 시작함으로, results의 첫인덱스부터 받아오기 위해서는 모든 e.target.value에 -1한 값이 results 배열의 인덱스로 들어가야하기 때문이다.
• <TeamList students={students} /> : useState의 Setter함수(=setStudents)를 통해 새로 얻어진 students 값을 TeamList 컴포넌트에 전달한다.

 

 

이제 {students} 를 받은 TeamList 컴포넌트의 코드를 살펴보자!

P07_TeamList.js

import React from "react";
import { Form, FormGroup, Label, Input } from "reactstrap";
import {useTeam} from "../../../components/Use";

function P07_TeamList({ students }) {
  
  return (
    <>
      <Box>
      <Form>
        {students && students.team.map((student) => {
             return(
                <StudentBox>   
                <FormGroup>
                  <Label check>
                  <Input
                        type="checkbox"
                        name={student.id}
                        // onChange={checkStudent}
                      />
                      {student.name}({student.grade}학년)
                  </Label>
                </FormGroup>
              </StudentBox>
                   )
           })}  
        </Form>
      </Box>

    </>
    
  );
}

export default P07_TeamList;

• students를 받아와서, 그안의 team배열을 map으로 돌려 화면에 출력한다!

 

---

 처음에는 서버코드의 문제가 있기도 하고,, team.name의 값이 1,2,3,... 으로 자동 정렬이 되는 형태가 아닌 사용자가 직접 입력한 string 값으로 정렬돼서 머리가 아팠다..

 results의 index를 어떻게 가져올지 고민하다가.. (결국 어떻게 가져오는지 아직도 모르겠음 ㅠ)

"team.name을 results의 인덱스로 연결시키면 어떨까?" 하고 경미가 얘기를 꺼냈고 재영오빠가 1,2,3으로 팀의 이름을 자동정렬하도록 다시 짜주어서, 혼자 끙끙 고민하던 시간에 비해 빠...른것 같진 않았지만 그래도 금방 문제를 해결할 수 있었다!

 

 

 내일은 꼭 팀 생성이든,, 체크박스든,, 팀 자동 구성이든,, 다른 뭐라도 얼른 구현해야겠다,,

아직 할일이 많다구 ㅠㅜㅠ😂