useParams/find()/useEffect 질문이요 선생님~

[심은정]

 

선생님 안녕하세요 

벌써 리액트 중반을 향해 열심히 달려가고 있습니다. 감사합니다!

중간 중간 이해가 잘 되지 않는 부분이 있어서 질문을 드렸습니다.

 

(1) useParams = 오브젝트? 질문 

useParams 구글에 검색해보니 returns an object of key/value pairs of URL parameters. 라고 하며 오브젝트를 리턴해준다고 합니다. let id 가 아니라 let {id}인 이유가 궁금해서요, 그러면 let {id} = useParams(); 여기서 destructuring이 이루어진거라고 이해하면 될까요?

(2) 가나다순정렬 

 

선생님 sort()사용하여 가나다순으로 정렬하는 버튼을 만들었을때 

버튼을 안누르면 => 순서 랜덤

버튼 누르면 => 순서 정렬,

아무 이상이 없어 보이는데 순서 정렬을 하면 

상세페이지가 불규칙해진다는게 무슨 말인지 잘 이해가 안갑니다. ㅠ

find(x => x.id == id) 이 과정이 왜 필요한거죠?  

이해가 안가니 코드도 이해가 안가서요, 버튼 누르면 순서 정렬이 잘 작동되는데 이게 왜 상세페이지가 불규칙하다는건지 잘 모르겠습니다 ㅠ 

 

(3) useEffect

1) clearTimeout

clearTimeout 을 하면 useEffect 안에 있는 코드를 실행하기 전에

return ()=>{ } 안에 있는 코드를 실행해주잖아요, 그러면 useEffect쓰기도 전에 초기화시켜버린다는 말인가요? 그러면 useEffect 2초 실행되기 전에 clearTimeout을 하니까, useEffect를 쓰든 안쓰는 소용이 없는거 아닌가요?

unmount(랜더링되는것지우기) 실행되고 나서 useEffect 실행되고 그 나서 재랜더링 될때부터clearTimeout이 실행되는 것으로 이해하면될까요? 이 과정이 머릿속에 안그려져서요 ㅠ 

(4)

input창에 숫자가 아닌 한글 입력시 alert가 안뜨고 null(흰 배경)으로 뜨면서 console에는 TypeError: alert is not a function 이 뜹니다. 구글 검색해보니 크롬팝업창허용하면 된다고해서 했는데 그대로이고, alert가 아닌 console.log('그러지마세요')입력시에는 잘 작동합니다. ㅠ 

 

감사합니다! 

 

 

 

[codingapple]

1. destructuring입니다 

2. 징렬한 후엔 첫 상품이 id가 2인 상품이 되어도 그거 누르면 /detail/0으로 접속되니까 이상해질 수도 있지 않을까요

필요없으면 안써도 됩니다 

3. 타이머삭제해주세요 다음에 타이머만들어주세요 이렇게 실행되니까 타이머는 존재할듯요 

4. alert라는 state이름을 다른걸로 바꿉시다 자바스크립트엔 alert()라는 기본함수가 있습니다 

[글쓴이]

글