버튼 클릭 시 해당 버튼 배경색 변경 State로 저장

태민·2022년 11월 22일
0

우선 나는 지금 영화예매 페이지를 만들고있다

어느정도 다 만들어졌고 해당 기능적인 부분을 수정하고 있는데

버튼을 클릭 했을 경우 해당 버튼의 백그라운드 컬러를 변경해서

사용자 입장에서 내가 클릭한 버튼이 어떤 버튼인지 보다 명확하게 알게 해주고 싶었다

처음에는 단순히 클릭할 때 백그라운드 컬러만 변경하면 되는거아닌가? 라는 생각을 했는데

간단하게 보이는걸 되게 어렵게 가는건지 쉽지 않았다

첫번째 문제점은 일단 내가 부모페이지에서 4개의 컴포넌트를 import해서 쓰고있는데

해당 컴포넌트는

예매할 영화리스트
상영관 리스트
달력에서 선택하는 예매일
상영시간표 리스트

총4개의 리스트가 전부 map으로 뽑아져있고

각각 클릭 시 버튼마다 정보를 담아서
좌석선택 버튼을 누르면 해당 페이지로 모았던 정보를 던져줘야한다

영화 pk넘버와 영화제목 연령대부터 시작해서
나머지 컴포넌트 클릭 시 받아오는 정보를 던져야해서

부모페이지에서 만든 이벤트함수를 각 자식 컴포넌트에 넘겨서 값을 부모에게 전달해서
던지는데 onClick이벤트를 2개를 사용할 수 있는지 몰랐기 때문에 해당 버튼을 클릭하면
추가되는 이벤트를 달았더니 정보를 담지 못하는 상황이 생겼다

구글링을 통해서 두개의 이벤트를 달아도 데이터를 잘 담을 수 있게 되었는데

버튼을 클릭하는 로직을 삼항연산자를 써서 나름대로 만들었지만

버튼을 클릭하니까 해당 map으로 뽑은 모든 리스트의 배경색이 변경되었다

나는 클릭 한 하나의 버튼의 색만 변경하는 것이 목표였기에 무엇이 문제인지 찾아야했다

getElement를 이용해서 class를 하면 배경색 변경이 되지 않고 id를 주면 하나의 버튼만 값이 변경되기는 하지만 그건 내가 첫번째 id의 값만 넘겼기 때문에 50개의 영화리스트중에 무조건 1번의 해당하는

버튼만 클릭 시 변경되는 상황이고 2번부터 50번 까지는 눌러도 무반응이였다

id를 맵으로 돌리면 같은 번호만 나오고 모든 버튼이 동일한 id로 뽑히기 때문에

map에서는 되도록 id를 쓰지 않는 것이 맞다고 배웠는데 클래스가 먹지 않으니

아이디라도 써야겠다는 생각으로 아래와 같이 작성했더니

1~50까지 다른 id값을 부여하는 것은 성공하게 되었다

id={i+1}

이렇게 작성하니까 맵으로 돌려서 뽑아낸 리스트가 1~50까지 다른 id 값으로 출력되는데

왜 버튼 클릭 시 모든 버튼의 배경색이 바뀌는지 원인을 파악해야한다

물한잔 마시고 고민하다가 너무 어렵게 돌아갔다는 것을 알게되었다

생각보다 너무 간단한 것을 아주 크게 돌아갔었다..

자 이제 결과를 보자

  <div>
            <p style={{ paddingTop:'10px',fontSize:'20px', textAlign:'center'}}>극장</p>
            {mloc.map((list,i)=>(
                <ul key={i} style={{padding:'0' , textAlign:'center'}}>
                    <li style={{listStyle:'none', width:'100px', clear:'both', textAlign:'center', marginLeft:'13%'}}>
                <button key={i} value={JSON.stringify(list)} style={{fontSize:'15px',textAlign:'center',width:'100px', margin:'0,auto'}} className={color === list ? "select-clicked" : "select-default"} name={'location'} onClick={(e)=>{

                    onChangeTitleBg(list)
                    changeData(e)}
                }>{list.the_name}</button>
                    </li>
                </ul>
            ))}
        </div>

우선 map으로 axios로 받아온 DB데이터를 버튼으로 뿌려준다

그리고 해당 버튼을 클릭할 경우 기존에는 부모 함수에 데이터를 던져줬는데
추가로 버튼클릭 이벤트를 하나 만들어줬다

그리고 useState를 하나 선언하는데

const [color, setColor] = useState("");
이렇게 기본값을 공백으로 준다

const onChangeTitleBg = (list) => 

        setColor(list);
      
            setColor(list);


     

    };

함수를 하나 만들어서 버튼 클릭 시 list를 넣어주는데

삼항연산자를 통해서 컬러가 리스트냐? 그러면 색상을 줘라

그렇지 않으면 기본값을 줘라 라고 해줬고 함수이벤트에서는

실행즉시 리스트를 넣어서 색상변경이 되도록 하고

만약 색상변경이 되어서 list===color가 되면

다시 상태값을 공백을 주게 했다

그래서 다시 클릭하면 기존 색상으로 돌아가서

토글처럼 클릭하면 색상이 변경되고 다시 클릭하면 돌아오게 된다

그런데 이 코드는 list(객체 -> 참조타입) 과 color(문자열 -> 원시타입)을 비교하는데 여기서부터 개발자의 의도대로 움직이지 않을 코드인데 작동이 된다

작동이 되서 안도했지만 매개변수..참조타입.. 내가 모르는게 너무 많다

시간을 내서 다시 공부하면서 검수하는 과정을 더 거쳐야겠다

profile
몰입이 즐거운 개발자

0개의 댓글