TIL_2023_08_11
Today 요약
- 피드백 해결하기
1. What I did?
1. 1 피드백 해결하기
오늘 피드백을 답변하면서 느낀건, 내 코드는 그냥 생각 닿는데로 구현하는데 바쁘기만 한 코드라는 생각이 많이 들었다. 불필요하게 변수를 쓰는 건 없는지, 이 코드가 정말 이 컴포넌트에서 호출하는 게 적절한지, 공통으로 묶어서 해결할 수 있는 건 없는지 등 좀 더 코드를 클린하게 작성하려고 하는 노력이 거의 없었다고 본다.
처음에는 누구나 그럴 수 있지만 프로젝트가 거의 완성되어가는 시점에서는 그런 고민은 충분히 했어야 했다. 이번 일을 계기로 반성을 많이 해보자.
진짜로 프로젝트를 여러 개 하는 게 중요한 게 아니다. 원티드로 시작한 간단한 TodoApp이지만 이 프로젝트 하나에서 엄청나게 많은 걸 배워가는 것 같다.
강의를 보고 따라하는 클론 코딩이나 간단한 프로젝트의 경우는 그냥 가볍고 빠르게 하고 지나갈 수 있겠지만, 적어도 내가 직접 하는 프로젝트에 대해서는 앞으로 그냥 대충 하지 말자. 이번 프로젝트를 교훈 삼아, 좀 더 나은 코드를 작성하기 위해 노력하자.
자주 호출하는 setState 함수 묶어서 관리하기
한 가지 기능?을 위한 두 가지 setState 함수를 묶어서 관리하는 게 좋지 않을까 하는 피드백이 있었다. 처음에는 굳이 그렇게 까지 할 필요가 있을까?라는 생각이었다. 하지만 그 함수를 호출하려는 상황이 나중에 갈 수록 기하급수적으로 많아진다면 함수로 묶어서 관리하는 것이 편리해진다는 사실은 명백하다는 생각이 문득 들었다. 멘토님이 이런 의도로 피드백을 준 건지는 모르겠으나, 여기서 중요한 건 지금은 간단할지 몰라도 나중에 복잡해질 수 있는 코드는 미리 함수로 같이 관리하는 것이 중요하다라는 점이라고 생각한다.
리다이렉션 처리
현재 accessToken을 언제 불러오고 특정 페이지에서 그게 존재하는지 확인한 뒤에 존재한다면 todo 페이지로 리다이렉션 될 수 있도록 해야 하는 상황이다.
이때 accessToken을 언제 불러오게 해야하는지 그 적절성에 대해서 명확한 결론이 도출되지 않았다. 멘토님이 주신 피드백으로 오늘 생각해 본 고민을 기록해본다.
현재 로컬 스토리지로 토큰을 관리하고 있다. 로컬 스토리지는 브라우저의 기능이다. 즉, 클라이언트에서 처리되는 부분이기 때문에 CSR에서 동작하는 코드일 것이다. 그래서 토큰을 불러오는 과정이 처음에 마운트 될 때 이루어지는 것이 적절하고 그렇게 되기 위해서는 localToken을 get해오는 로직이 useEffect의 로직 안에 담겨 있어야지 안정적이지 않을까?라는 생각까지 진행해봤다. 그래서 get해오는 모든 코드를 일단 useEffect 안에서 관리할 수 있도록 수정해보았다.
상태관리할 변수란..
const btnDisabled = !isValidEmail || !isValidPassword{
!value && <Message>{CHECK_TODO_INPUT}</Message>
}위의 코드를 보자. 원래 기존에는 btnDisabled는 useState로 상태관리 되고 있었고, value는 isInputEmpty라는 변수를 만들어서 상태관리를 하고 있었다.
하지만 멘토님 피드백은 굳이 상태 관리가 필요할까요?였다. 처음에는 이해가 안되었다. 잘 동작하고 있는 코드고 토글하는 부분을 상태관리하지 않고 어떻게 UI를 변경 할 수 있을까? 라는 생각 뿐이었다.
그런데 잘 생각해보니까btnDisabled의 경우 useState로 관리되고 있는 email, password에 종속적인 isValidEmail과 isValidPassword로 true, false값을 할당 할 수 있었고, isInputEmpty란 변수도 input 창이 비어있는지 아닌지를 단순히 체크만 하는 변수였기 때문에 input창의 value값이 존재하는지 안하는지만 알고 있었으면 되었기에 isInputEmpty 변수를 제거하고 value 값의 유무로 처리할 수 있었다.
이쯤에서 정말 머리를 한 대 얻어맞은 기분이었다. 나는 그냥 UI에 기능을 구현하기에 급급했고, 기존에 있던 변수들로 해결할 수 있는 부분은 없었는지에 대해서는 전혀 생각을 안하고 있었다.
정말로 리액트에서 상태관리란 무엇이고, 어떤 때 하는 것이 좋은지에 대해서 다시 한 번 생각하고 고민을 해봐야 할 것 같다. 너무나 기초적이라고만 생각했던 부분이지만 정말 아무렇지 않게 막 쓰고 있었다는 생각이 든다.
