[TIL] 20230711 - 비동기함수 예외처리 (옵셔널체이닝,react query isLoading) / padStart, padEnd(es8), repeat / useNavigate 이동시 클릭한 데이터 넘겨주기 id param

errorrrrrrrrrrrrrrrrrrrrr.....

 

첫 랜딩시 data를 불러오지 못한다. null값, filter코드를 지우면 데이터를 잘 가져옴!!

코드 실행 순서의 문제!!!! 예외처리로 해결할 수있다.

 

 const { isLoading, isError, data } = useQuery('todos', getTodos);

react query는 usequery를 통해서 데이터를 어디서든 불러와서 쓸수 있다.

다만, useQuery 데이터를 불러오는 순서는 동기함수들이 전부 끝난 뒤에

서버에 'todos'이름 쿼리 있니? 그럼 데이터에 'todos'쿼리 데이터 저장해줘

하고 그 다음 data에 데이터를 할당해서 아래에서 불러와 쓸수 있다.

그렇기 때문에 예외처리를 해줘야한다!

 

1. 옵셔널 체이닝(?.)

{data?.filter((todo) => todo.isDone === !isDone)
    .map((todo) => {
        return <Todo key={todo.id} todo={todo} />;
    })
 }

앞에 (data)가  참인지 아닌지 평가한뒤에 참일경우는 실행, undefined 또는 null이라면 undefined를 반환하고 평가가 끝난다. -> 실행 X

 

이렇게  하면 단순하고 간단하게 예외처리가 가능하다

 

2. isLoading을 이용해서 데이터를 불러오기 전까지 로딩중 처리

const { isLoading, isError, data } = useQuery('todos', getTodos);
    if (isLoading) {
        return <div>로딩중입니다</div>;
    }
    return (
        <StTodoBoard>
            <StBoardTitleH3>{isDone ? 'To do' : 'Done'}</StBoardTitleH3>
            {console.log(data)}
            <StTodoWrap>
                {/* // 참일경우 실행 아님 언디파인 */}
                {data
                    .filter((todo) => todo.isDone === !isDone)
                    .map((todo) => {
                        return <Todo key={todo.id} todo={todo} />;
                    })}
            </StTodoWrap>
        </StTodoBoard>
    );

데이터를 불러오기전까지는 로딩중 처리를 걸어주면 ! null 값 filtering 오류가 안뜬다!

 

비동기 처리 관련 추가 글도 읽으면 좋을듯 싶어 링크를 남겨둔다

https://jinyisland.kr/post/react-awesome-fetching/

https://www.youtube.com/watch?v=FvRtoViujGg 

---

[ padStart / padEnd ]

 

사용법

str.padStart(targetLength [, padString])
str.padEnd(targetLength [, padString])

예시코드

// padStart

const str1 = '5';

console.log(str1.padStart(2, '0'));
// Expected output: "05"

const fullNumber = '2034399002125581';
const last4Digits = fullNumber.slice(-4);
const maskedNumber = last4Digits.padStart(fullNumber.length, '*');

console.log(maskedNumber);
// Expected output: "************5581"


-------------------------------------------------

// padEnd

const str1 = 'Breaded Mushrooms';

console.log(str1.padEnd(25, '.'));
// Expected output: "Breaded Mushrooms........"

const str2 = '200';

console.log(str2.padEnd(5));
// Expected output: "200  "

 

프로그래머스 문제 풀다가 알게된 pad 함수! 꽤나 유용하게 쓰일듯 해서 기록해두기 :)

길이가 n이고, "수박수박수박수...."와 같은 패턴을 유지하는 문자열을 리턴하는 함수, solution을 완성하세요. 예를들어 n이 4이면 "수박수박"을 리턴하고 3이라면 "수박수"를 리턴하면 됩니다.

let str = 'a';
let n = 5;
str.repeat(n) === 'aaaaa' // str n번 반복.
str.padStart(n, 'b') === 'bbbba' // str length가 n까지 앞부분을 'b'로 채움.
str.padEnd(n, 'b') === 'abbbb' // str length가 n까지 뒷부분을 'b'로 채움.

str.padStart(1, 'b') ===  'a' // n이 str lenth보다 작거나 같다면 동작x.

 

PAD(ES8)

padStart와 padEnd 함수는 ES8(ES2017)에 새롭게 추가된 기능이다. pad는 좌우에 특정한 문자열로 채우는 기능이다. 좀더 자세히 얘기하면 첫번째 파라미터인 maxLength를 받아 문자열의 길이가 maxLength보다 작을 경우 나머지를 특정한 문자열로 채워주는 기능이다. 이때 두번째 문자열을 넘겨주지 않으면 빈 공백으로 문자열을 채운다.

 

String.prototype.padStart(maxLength, ?fillString);
String.prototype.padEnd(maxLength, ?fillString);

숫자 앞에 0 붙이기

달력의 날짜를 표시 할때 01, 02 처럼 숫자 앞에 0을 붙여서 표현한다. padStart가 나오기 전에는 이러한 기능을 만들기 위해서 로직을 구현하였지만 이제는 간편하게 작업할 수 있다.

const number = 10;
const size = 4;
const result = String(number).padStrt(size, 0);

console.log(result);
// 0010

아이디를 *로 표시하기

아이디의 앞부분 일부만 표시를 하고 나머지는 *로 표시 하는 기능도 자주 사용하였다. padEnd를 이용하면 간편하게 기능을 구현할 수 있다.

 

const id = '아이디입니다'
const temp = id.slice(0, 3);
const result = temp.padEnd(id.length, '*');

console.log(result);
// 아이디***

https://velog.io/@suld2495/padStart%EC%99%80-padEnd-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

 

 

---

[ router-dom navigate 사용시 state로 값 넘겨주기 ]

 

게시글 클릭시 상세페이지 등을 보여줄때, 이동한 상세페이지에서는 해당하는 아이디의 정보을 주로 보여줘야한다.

import { useNavigate } from 'react-router-dom' 	

const navigate = useNavigate();
navigate("다음페이지로 가는 router URL", {state : {값이름: 값}}); 

-----------------------------------------
// 예시코드

const navigate = useNavigate();
 

navigate(`/detail/:${todo.id}`, {
    state: { id: todo.id, title: todo.title, contents: todo.contents, isDone: todo.isDone }
});

이동한 페이지에서는 useLocation을 통해서 state값을 받아서 사용한다.

import { useLocation } from 'react-router-dom' 

const { state } = useLocation();
const { 변수명 } = state.id; 등등

--------------------------------------
// 예시코드

const { state } = useLocation();
    
  
{state.id}
{state.title}
{state.contents}
{state.isDone.toString()}

 

https://songacoding.tistory.com/73