데이터바인딩 관련 질문입니다!

[김건오]

map 함수 안의 map 함수에서 특정 변수값( 이 코드에서는 rank )에 따라 RankBox 컴포넌트의 배경색이 바뀌게 만들어봤습니다.

저 RoomHeader 밑으로 무수한 let들을 밖으로 빼서 함수처리를 하고 싶은데 생각처럼 잘 되지가 않습니다...

어떻게 함수를 만들어야할까요...? 아니면 아예 다른 방법을 쓰는 것이 나을까요?

 

{room.userlist.map(userlist => {

                let ironColor = props.tier.iron.findIndex(v => {

                  return v == userlist.rank;

                });

                let bronzeColor = props.tier.bronze.findIndex(v => {

                  return v == userlist.rank;

                });

                let silverColor = props.tier.silver.findIndex(v => {

                  return v == userlist.rank;

                });

                let goldColor = props.tier.gold.findIndex(v => {

                  return v == userlist.rank;

                });

                let platinumColor = props.tier.platinum.findIndex(v => {

                  return v == userlist.rank;

                });

                let diamondColor = props.tier.diamond.findIndex(v => {

                  return v == userlist.rank;

                });

                let masterColor = props.tier.master.findIndex(v => {

                  return v == userlist.rank;

                });

                let grandmasterColor = props.tier.grandmaster.findIndex(v => {

                  return v == userlist.rank;

                });

                let challengerColor = props.tier.challenger.findIndex(v => {

                  return v == userlist.rank;

                });

                let findColor = [

                  ironColor,

                  bronzeColor,

                  silverColor,

                  goldColor,

                  platinumColor,

                  diamondColor,

                  masterColor,

                  grandmasterColor,

                  challengerColor,

                ];

                let pushColor = findColor.findIndex(v => {

                  return v >= 0;

                });

                function coloring(pushColor) {

                  switch (pushColor) {

                    case 0:

                      return '#eeeeee'; //아이안

                    case 1:

                      return '#888800'; //브론즈

                    case 2:

                      return '#CCCCCC'; //실버

                    case 3:

                      return '#FFFF00'; //골드

                    case 4:

                      return '#66AA88'; //플레티넘

                    case 5:

                      return '#0066AA'; //다이아

                    case 6:

                      return '#770000'; //마스터

                    case 7:

                      return '#770000'; //그마

                    case 8:

                      return '#770000'; //챌린저

                    default:

                      return '색을 찾지 못했어요';

                  }

                }

                return (

                  <RoomBox>

                    <div className="item1">{userlist.nickname}</div>

                    <div className="item2">

                      <RankBox aside={props.aside} color={coloring(pushColor)}>

                        {userlist.rank}

                      </RankBox>

                    </div>

                  </RoomBox>

                );

              })}

            </Box>

          </div>

        );

      })}

[김건오]

tier Data 파일

 

 

 

var iron = ['I1', 'I2', 'I3', 'I4'];

var bronze = ['B1', 'B2', 'B3', 'B4'];

var silver = ['S1', 'S2', 'S3', 'S4'];

var gold = ['G1', 'G2', 'G3', 'G4'];

var platinum = ['P1', 'P2', 'P3', 'P4'];

var diamond = ['D1', 'D2', 'D3', 'D4'];

var master = ['M'];

var grandmaster = ['GM'];

var challenger = ['C'];

var tier = {

  iron: iron,

  bronze: bronze,

  silver: silver,

  gold: gold,

  platinum: platinum,

  diamond: diamond,

  master: master,

  grandmaster: grandmaster,

  challenger: challenger,

};

export default tier;

[김건오]

export const RoomBox = styled.div`

  padding: 5px;

  text-align: center;

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: space-around;

  .item1 {

    flex-basis: 100px;

  }

  .item2 {

    flex-basis: 30px;

  }

`;

[김건오]

export const RankBox = styled.span`

  display: inline-block;

  background: ${props => props.color};

  padding: 1px;

  border-radius: 4px;

  margin: auto;

  width: 28px;

  text-align: center;

`;

[김건오]

일단 함수를 밖으로 빼는건 성공했습니다!!!

[글쓴이]

글