Medal Tracker 컴포넌트 분리, 리팩토링하기

  컴포넌트 분리를 끝내고 튜터님에게 질문을 하러 갔다. 여러 가지를 물어봤는데, 그중에서 기록할만한 것들을 적는다. 장장 50분 정도 멘토링을 받았는데 내가 이해를 못해도 천천히 자세히 가르쳐주셔서 정말 좋았다. 어제 Medal Tracker 같이 한 것도 그렇고 튜터님들이 너무 좋다. 친절하고 열심히 가르쳐 주시고 알아듣기 쉽다. 코딩도 자바스크립트는 좀 힘들었는데 적응 하고 튜터님들 도움 받기 시작하니까 리액트 들어와서는 좀 속도가 나는 것 같다. 어떻게 코딩 공부를 해야 하는지 조금은 알 것 같기도 하고. 그래서 요즘 좀 재밌다. 

 

컴포넌트 분리

- App.jsx를 부모로 Input,List,Title를 .jsx 파일을 만들어 나누었다.

- 컴포넌트를 어느 정도로 잘게 나누어야 하는지 튜터님한테 물어봤는데, 너무 잘게 나누면 가독성이 떨어진다고 하시고, 또 나누어야지 가독성이 좋은 것도 있다고 하신다. 결국 (재사용성에 기반하겠지만) 코드 짜는 사람 취향이라고. 나중에 회사에 들어가면 팀에서 쓰는 방식대로 한다고 한다. 나는 눈에 보이는 섹션대로 나누는 게 편한데, 많은 경우의 수를 겪어봐야 어떤 게 제일 최적인지 알 것 같다. 

 

리팩토링

 Input.jsx에 다음과 같은 코드가 있었다. 

onChange에 들어오는 event 값을 이용해 set함수로 state를 변경하는 함수.

 - 반복되는 코드가 굉장히 불편했기에 자바스크립트 팀과제 때 처럼 하나의 함수를 만들어서 매개변수만 넣으면 되는 코드를 시도해 보았다.

시도는 좋았다.

- 그러나 변수를 매개변수로 설정해도 되는지, 저 event는 원래 매개변수였는데 어떻게 처리할건지, 등등 많은 문제가 있었다. 얼기설기 만들어 실행해 보았으나 무수한 오류를 보고 튜터님한테 물어볼 리스트에 추가했다. 

- 접근 자체는 굉장히 좋다고 하셨다. 그런데 이제 이렇게는 작동하지 않는.. useState를 countries로 묶었던 것 처럼, 데이터값을 '객체'로 하나로 묶는 방법으로 접근하자고 하셨다. 

-country를 객체로 만든 후, 스프레드 연산자로 예전 country 값을 넣고 keyName 매개변수로 event.target.value도 접근 가능하게 하자는 말씀이셨다. 

-보니까 알겠다! 이렇게 하면 되겠구나. 그러나 여전히 혼자 생각하는 건 어렵다. 이 코드를 이해하고 다음에 써먹어야지. 오늘은 과제 마감이 얼마 남지 않았으니 광복절날 리팩토링 도전해봐야겠다. 

-리팩토링에 대해 이야기하면서 떠오른 생각인데, 리팩토링 자체는 재사용성을 위한 것이며, 코드를 간단하게 하는 것임을 알겠는데, 리팩토링을 하면 오히려 코드 전체를 대공사해야하는 경우가 생길 것 같았다. 그렇다면 리팩토링을 그 때는 안하고 그냥 기존 코드를 조금만 고쳐 사용하는 것이 낫지 않을까? 튜터님에게 여쭤보니 그래서 예전 코드를 사용하게 된다고 한다. 뭐였더라 유산? 레거시 코드. 그래서 참 고민되는 문제라고 한다. 

-레거시 코드의 설명은 타 블로그 참고. 

 

 

회고

-코드를 마무리하면서 내가 짠 코드를 다시 보게 되고, 어떻게 하면 더 효율적일까 천천히 고민하게 되는 시간이 좋았다. 아무래도 부트캠프는 시간에 쫓겨서 그런가.. 광복절 지나면 리액트 숙련 주차로 들어간다는데 입문 주차만큼만 재밌었으면 좋겠다.