프로그래머스 과제 테스트의 영화 좌석 페이지 구축을 풀어본 이후 react로도 한번 풀어보았다.
react로 구현할 때는 vanilla js로만 구현할 때와 얼마나 다른 관점에서 요구사항을 바라봐야 할까? 라는 생각이 들어 해당 과제테스트를 react로 다시 풀어보게 되었습니다.
시작 전
그냥 막연하게 코드 스타일만 좀 달라지고, 크게 달라질게 없을 것만 같았습니다. 그저 styled-components가 추가 되고 DOM을 직접적으로 조작하지 않는 것만 빼면 비슷할거라고 예상했습니다.
구현
요구사항은 크게 3가지 정도였습니다.
- 관람객 수 선택 + 장애인 관람객 여부 확인
- 관람객 수에 따른 좌석 활성화 및 예외사항 처리
- 선택 좌석에 따른 요금 합계표시
최초 진행한 vnilla js 코드에서는 요구사항을 위해 선택 좌석 개수가 state로 필요했습니다.
그 외의 값은 element에서 직접 가져오거나 할당하는 식으로 처리했습니다.
좌석 버튼은 class를 통해 활성화 여부와 선택 여부를 표시했습니다.
때문에 state를 통해 알 수 있는 것은 몇개의 좌석이 선택되었는가 만 알 수 있습니다.
eventHandler의 경우 특정 동작 이후 적용된 최신 값을 가져와서 조건문을 통해 처리하는 등의 로직을 통해 구현했습니다.
// 이해를 돕기 위한 예시로 실제 코드와는 다소 차이가 있습니다.
//... clickHandler
const prevClicked = document.querySelectorAll('.clicked')[targetType]; // 어른, 청소년 중 이미 선택되있던 버튼
if(!e.target.classList.contains('clicked')) {
e.target.classList.add('clicked')
prevClicked.classList.remove('clicked')
TotalMoviegoers = getTotalMoviegoers();
if(TotalMoviegoers < selectedSeatLength) { // 변경된 값을 취소시켜야 하는 경우
e.target.classList.remove('clicked')
prevClicked.classList.add('clicked')
}
}react 코드에서는 DOM을 직접적으로 조작할 수 없기 때문에 vanilla js 보다 많은 state가 필요했습니다.
선택한 관람객 수(어른: O명, 청소년: O명)선택한 좌석들과 개수(seat.A = [...], cnt: {adult: 0,...})총 요금상호작용 요소(버튼, 체크박스) 활성화 여부
이 state들은 모두 App 하단의 최상위 컴포넌트에서 관리되었습니다.
vanilla js에서 class를 통해 버튼을 스타일링했다면, react에서는 각 버튼의 값이 특정한 state에 해당하는지 혹은 특정 조건을 충족 시켰는지에 따라 스타일이 변경되도록 구현했습니다. 이를 위해 styled-components의 props에 boolean 값으로 전달해 처리했습니다.
eventHandler의 경우 특정 동작이 실행되기 전에 미리 바뀔것으로 예상되는 값을 계산하고, 조건문에 따라 event 자체를 취소해 동작시키지 않는 로직을 통해 구현했습니다.
// ... clickHandler
const {adult, youth} = moviegoers
const otherMoviegoersType = moviegoersType === 'adult' ? 'youth' : 'adult'
const expectedTotalNumOfMoviegoers = expectedNumOfMoviegoers + moviegoers[otherMoviegoersType]
if(expectedTotalNumOfMoviegoers < totalSeatCount) return;
//...제어를 한 곳에서 진행하는 react의 방식이 익숙하기에 당연히 react가 편했지만, react로 구현하기 전에 vanilla js로 구현한 경험 때문에 DOM을 직접적으로 조작하지 못해서 오는 불편함을 느끼기도 했습니다.
구현 후
-
vanilla js 구현 :
DOM Element에 어느 방식을 통해 값을 집어넣고 빼올지 (class, dataset, ...)등 주로 element를 기준으로 구현 방안을 모색했습니다.
-
react 구현 :
state를 어느 곳에 위치 시킬지 어느 것까지 state로 선언할지 등 Element를 통해 보여줄 값을 기준으로 구현 방안을 모색했습니다.
각 방식의 차이가 생각보다 극명하게 보여서 신선했었습니다. vanilla js보다 react가 조금 더 구현하기 편했지만 react도 리렌더링 등 꽤나 신경쓸 부분이 있어서 어느 것이 더 간편하고 쉽다고 구분 짓기는 어려웠습니다.
다만 선언적인 코드를 써야하는 react가 타인의 코드를 분석하기에는 더 유리하다고 생각합니다.
이렇게 두가지 방식으로 과제를 구현해보니 vanilla js나 react등 추구하는 계발 방식에 따라 같은 요구사항이라도 구현을 위한 여러가지 관점이 존재할 수 있다는 것을 조금이나마 깨닫게 되는 것 같습니다.
