마이페이지 태그 검색 관련 오류
오류. 마이페이지에서 태그를 추가하는 부분이 하나도 없을때는 다른 화면으로 보여야 하는데 자꾸 빈문자열이 들어와서 원하는 화면으로 보이지 않는 오류 발생
-
오류가 난 이유
서버에서 받은 태그들의 값을 미리 리덕스에 넣어서 수정할때 기존에 선택했던 태그들도 보일 수 있게 했는데 리덕스에 저장될때 아무것도 없을때는 빈문자열이나 undefined로 저장이 되서 나타나 값이 있는것 처럼 보이는 예외가 생겨 수정하기 페이지에서는 보라색 빈 태그창이 계속 나타났다. -
해결방안
- 해당 컴포넌트에서 리덕스가 저장된 stack과 hobby의 0번째가 빈문자열 일때, stack과 hobby를 초기화 시켰다. hobby 같은 경우 3개까지 선택 가능하기 때문에 2개이상 선택됐을 때는 shift() 메서드로 앞에 빈문자열을 제거했다.
if (stack.length === 1) {
if (stack[0] === '') {
stack = [];
}
}
if (hobby.length === 1) {
if (hobby[0] === '' || hobby[0] === undefined) {
hobby = [];
}
} else if (hobby.length === 2) {
if (hobby[0] === undefined) {
hobby.shift();
}
}- 서버에서 받은 기존 태그값을 리덕스로 저장하는 것은 Array.isArray() 메서드를 이용했다. Array.isArray()는 인자가 array인지 판별한다. stack 같은 경우 값이 하나만 있기때문에 shift() 메서드로 빈문자열을 막고, undefined가 있을 경우 컴포넌트에서 해결이 됐기 때문에 따로 처리하지 않았다. 그치만 hobby 같은 경우 값이 3개까지 선택이 가능하기 때문에 undefined가 있을 때 오류를 컴포넌트에서 막기 어려워 undefined일때 hobby를 초기화 시켰다.
[SET_STACK]: (state, action) =>
produce(state, (draft) => {
if (
Array.isArray(action.payload.stack) &&
action.payload.stack !== ['']
) {
draft.stack = action.payload.stack;
return;
}
if (draft.stack.length !== 0) {
draft.stack.shift();
draft.stack.push(action.payload.stack);
} else {
draft.stack.push(action.payload.stack);
}
}),
[SET_HOBBY]: (state, action) =>
produce(state, (draft) => {
if (
Array.isArray(action.payload.hobby) &&
action.payload.hobby !== ['']
) {
draft.hobby = action.payload.hobby;
return;
}
if (action.payload.hobby === undefined) {
draft.hobby = [];
return;
}
위 사진을 통해 태그 검색부분에서 하나도 없을때와 하나만 들어갔을때, 모두 들어왔을때의 프로필 화면과 수정하기 화면 모두에서 잘 변경되서 적용되는 걸 확인 할 수 있다.
마이페이지 태그 검색 빈문자열이 자꾸 생기는 이부분이 가장 해결하는데 지치게했다. 해결됐다 싶으면 또 다른 예외로 빈문자열이 들어와 있어서 나를 너무 괴롭혔다. 😱😭 너무 많은 방법들을 적용해서 막상 글로 정리하려니 사실 너무 막막했다. 그리고 이번껀 글로 표현하니 생각보다 간단했던 문제들 같아서 조금 현타가오면서 속상해졌다. 특히 hobby가 undefined이면 hobby를 초기화 해주는 걸 컴포넌트가 아닌 리듀서에서 진작 했었으면 오래도록 헤매진 않았을텐데...😭 stack부분 리듀서도 undefined일때 초기화 해주면 되지만 그전에 어렵게 방법찾아서 해결했던게 아쉬워서 stack은 코드를 바꾸지 않았다.
정말 다양한 방법으로 빈문자열이 들어오는걸 없애려고 노력했고, 그만큼 삽질도했지만... 그래도 결국엔 해결이되서 정말 해피하다!😂
