프로젝트를 진행중에 스프링부트로 데이터들을 프론트로 넘겨줬다.
데이터를 활용하는 곳은 상품들 리스트를 나열해 주는 페이지였고, 거기에서 map을 이용해 데이터를 가져오는 과정이었다.

async

useEffect를 사용하여 렌더링될 때, 바로 백엔드와 axios를 이용한 통신을 하는데,
상품 리스트가 나오지 않는 것이다. 데이터들은 DB에 분명히 있었고, 백엔드에서의 비즈니스 로직도 포스트맨으로 확인해본 결과 문제가 없었다.

뭐가 문제인지 찾아보니,
렌더링이 되는 과정에서 axios를 사용해 데이터를 받아올 때 그 데이터들이 아직 넘어오지 않았는데, 다음 코드로 넘어간 것이다.

오랜만에 js를 다루다 보니, 기본 개념도 까먹은거였다. 동기와 비동기(둘기와 비둘기)
약간의 기억을 더듬다가 직면했다. 아! 동기식으로 해줘야 하는구나.

바로 async와 await가 생각났지만, await는 async안에서만 사용할 수 있다. 라는 기억을 제외하고는 나머지가 다 소멸된 것이다.

그래서 정리해본다.
async는 function 앞에 붙여서 사용하고, 사용하게 되면 그 function은 항상 promise를 반환해준다.

여기서 말하는 promise는 비동기 처리에 활용되는 객체를 뜻한다.
대기, 이행, 실패의 상태가 있다.

아무튼, await는 이 promise가 처리될 때까지, 함수 실행을 기다리게 한다.
즉, axios 앞에 await를 사용한다면?
데이터를 가져올때까지 함수의 흐름은 멈추게 된다!!
간단한 이야기다.

useParams

상품의 id를 받아와서 상품의 이름을 누르거나 사진을 누르면, 상세페이지로 넘어가게 만들었다.

/detail/:productId 

위와 같은 형식을 url 파라미터를 이용해서 각 아이디별로 페이지를 구분하게 생성해줬다.
하지만, :productId부분에서는 잘만 넘어왔는데, 페이지에 productId를 출력하게 했는데도 나오지 않았다. 처음에는 undefined가 떴었고, 두번째에는 NaN이 떴다.

할당되지 않았다 와 숫자가아니다

결론부터 말하자면, 첫번째에서는 useParams를 이용해 productId를 파라미터를 받았는데, string형식인걸 몰랐고,
두번째에서는 비구조화 할당 문법을 잘못 사용했다.

useParams를 처음 써봤는데, 파라미터로 받은 값은 string으로 반환되고 있었다.
그 값을 const id에 넣으려고 하니까 undefined가 나오는거다.

parseInt를 사용해서 처리하면 되겠다 라는 생각이 나왔고 바로 실행에 옮겼다.
역시, 안됐다.
검색의 시간이 다가온 것이다.
상세페이지에 관련해서는 자료들이 굉장히 많았고, 정리도 잘 되어있었다.

우선, 비구조화 할당이란?
> 배열 또는 객체의 속성을 분해하여, 각각 변수에 담을 수 있는 표현식이라고 한다.

정말 간단하게, 감싸져 있는걸 꺼내면 된다.

{ productId } = useParams();
id = parseInt(productId, 10);

꺼내고, int로 변환하면 끝이난다.