[React] 2가지 샐랙터 핸들링 하기

이번 레벨 3 과제를 진행하면서 selector를 사용하지 않고 UI를 위해(?) button으로 작업을 해야 했다... 🥲

예전에 퍼블 국비학원때 selector 안쓰고 퍼블리싱하는걸 배웠던 것으로 기억하는데 벌써 2년전이라 기억이 안나 걱정을 했는데 차근차근 만들어 나가니까 어렵지 않게 만들 수 있었다.

하지만 역시나 어려운 부분은 기능 구현하는 부분이였는데, 지인을 통해 도움을 받아 완성해버려서... 😳 한번 코드 해석할 겸 하나하나 뜯어내서 공부해 보았다.

구현한 UI 와 컴포넌트 코드

샐랙터가 총 2개긴 한데 동일한 외형에 기능도 동일하기 때문에 소스 상 크게 다른 부분이 없어서 샐랙터 1만 캡쳐했다.

🧐 새롭게 알게 된 부분

1. 공통적인 부분은 map으로 묶어서 useState에 넣기

지금까지는 useSate에 0 아니면 빈문자열("")을 넣어서 사용했는데,
이렇게 샐랙터 2개가 똑같은 기능을 사용한다면 똑같은 함수를 2번 만들기 보다는 이렇게 묶음으로 관리를 하는게 좋다고 한다.

기초가되는 배열 study를 기준으로 배열 요소, 샐랙터 박스1, 2를 각각 지정하면 다음 함수에서 1개의 함수로 편하게 관리할 수 있다.

2. type에 따라 해당 리스트가 보이게 / 안보이게

기본적인 setListShow는 값은 false인데 이는 샐랙터를 클릭하기 전까지는 안보이는 상태로 지정했다.

그리고 샐랙터를 클릭하면 위에 만들어둔 state 값을 false에서 true로 바꿔(!listShow) 아래의 listShow &&를 통해 true일때만 나타나도록 했다. (2번 샐랙터도 동일)

그리고 샐랙터에서 선택한 study 요소를 나타나게 해야하는데 이는 find 함수를 사용했다. 그 이유로는 study 요소 중에 선택한 요소가 ture가 되고 샐랙터에 선택한 요소가 나타나게 된다. 만약 false이거나 기본값으로는 '리액트'가 오게 된다.

리스트를 나타낼때는 study 배열요소, type 을 인자로 넣어 주었다.
아까 위에서 studyName: v 라고 적었는데 v가 study 배열 요소 하나하나를 가르킨다.
그리고 두번째 인자의 의미는 1번은 첫번째 샐랙터를 의미하므로 2번째 샐랙터는 2가 들어가 있다.

🥊 잘 모르거나 어려웠던 부분

1. 공통 함수 만들기

이 부분 때문에 너무 힘들었다 ㅋㅋㅋ ㅠㅠ
ture와 false가 난무하는 이 곳...

주석도 열심히 달아두긴 했지만 해석을 간단하게 하자면
선택한 샐랙터 리스트를 보이게, n번째 샐랙터가 보이고 닫히게 하기 위해 만들어진 함수이다.

item은 샐랙터 리스트에서 선택한 값을 의미하는데 콘솔로 찍어보면 선택한 값이 item에 담긴다. 그리고 type은 1번째, 2번째를 각각 나타냈다.

둘다 공통으로 true이면 보이고 false이면 안보이는 속성처리를 해 두었기 때문에 합칠 수 있는 함수였다.

왜인지 가독성이 안좋고 처음에는 해석하기가 어려워서 도움 준 사람에게 나 스스로를 비관하면서 어렵다고 찡찡거렸는데(왜 난 저렇게 못하는가 하며...🤣)
돌아오는 대답으론, 시간이 해결해 줄꺼니 그냥 열심히나 하라고 해서 일단 도움에 감사함을 표현했다.

나도 그 사람처럼 코드를 자유자재로 다룰 수 있었으면 좋겠다. 🥹 그럴 날이 오겠지...?
부캠 끝나면 취준할 때까지 자바스크립트 위주로 더 공부를 해야겠다.