[React] Redux 라이브러리 사용해서 Notes 앱 만들기 7📒

📒 6탄 이전 벨로그

...

👑FiltersModal 정렬 선택한 걸로 적용되게 하기

이 정렬을 바꿈으로 인해서

MainNote 부분에서 어떻게 보여주는지가 변경이 되는 것
MainNote 에서 어떻게 얘네를 보여주는지 보면

이 데이터들이 mainNotes에 있는거고,

filter 같은 경우엔 그냥 string 데이터임

getAllNotes로 이동해서 보자

여기서 이런식으로 보여주기위해

mainNotes에 있는 애들을 다 순서대로 나열하고 있음
NoteCard 이부분을 바꿔줘야 선택한 거에 따라서 정렬이 되는 것🔥

✅핀 되어 있는 애들은 정렬 안 시킬거고, 안 되어 있는 애들만 정렬되게 할 것📌

✍그러기 위해 우선 핀 되어 있는 애랑 안 되어 있는 노트들을 나눠줘야함❗

▫ src>utils>getAllNotes.jsx

여기서 먼저 핀 된 애들이랑 안 된 애들을 나눠주는 로직을 짜야함🐱‍💻

📌pinned : 핀 된 애들, normal : 핀 안 된 애들
👉 둘 다 핀이 됐든 안 됐든 어디에 있냐면 mainNotes에 있음✔

mainNotes 에서 filter 이용해서
하나의 note 에서 필요한 애가 isPinned니까➡ { isPinned }
isPinned가 true인 애만 넣어야하니까 isPinned 어처피 true 아님 false임

isPinned가 true인 애만 새로운 배열을 만들어서 여기에 객체들을 넣어주는 것😎

여기엔 isPinned가 false인 애만 넣어줘야하니까 반대로 해주면 됨✨

👾 경우의 수 3개 👾

☝ 모든 노트가 핀이 안 된 경우

핀 안 된 애들이 normal.leng가 0️⃣이 아니거나,
핀 된 애들 pinned는 length가 0️⃣이어야함❗

All Notes가 위에 있으므로 이게 먼저 와야하고
그 옆에 normal의 노트가 몇 개 있는지 알기 위해
normal.length를 span 태그 안에 써줌

그 밑으론 NotesContainer 컴포넌트가 와야함
여기서 이제 정렬이 된게 하나씩 와야함

👉 정렬한 담에 NoteCard 해서 하나씩 렌더링 해줘야함💻

이부분은 어떠한 함수를 만들어서 정렬해주고 처리해주는거 다 한 담에 넣어줄거임👌

라디오 버튼을 클릭했을 때 이거에 맞게끔 필터링 한 담에 보여주는 로직을 만들거임

filteredNotes 이 함수에선 normal( 배열 )엔

노트가 2개 들어있을건데 normal을 넣어줄것

그리고 이 배열을 어떻게 컨트롤할건지

🖱라디오 버튼 클릭하면 해당 value 값이 있는데 이 value 값을

filter 에서 가져올거임

여기에 filter를 넣어줄거임

이 함수 안에서 가져오는게➡notes( 배열 ), filter( string )🔥
💧filtering 한 담에 notes를 return 할 것🔁

그러면 얘가 배열

배열에서 map 메소드 이용해서 note 해주고
NoteCard 컴포넌트 넣어주고 그 안에 필요한 key, note, type 넣어주면 됨😎

그럼, filteredNotes 함수 안에 filtering은 어떻게 해줘야할까❓

Low to High 라디오 버튼 누르면 value가 low로 올거임

low로 온다는건 filter가 low로 온다는 것⚡

High to Low 라디오 누르면 value가 high니까 filter가 high로 온다는 것⚡

이 두개의 데이터는

notes에 있음⭕

notesList > mainNotes에 있는 2번 인덱스에서 priority가 "low",
3번 인덱스에선 priority가 "high"

✅ priority가 low 아니면 high니까 나눠주면 됨

나누는건 어떻게 할까❓

👉 note( 배열 ) filter 메소드 이용해서 하나의 note인데
여기서 필요한 프로퍼티는 priority만 필요하니까 ({ priority })

클릭한 라디오 버튼이 Low to High면 filter가 input의 value인 "low"니까
🔁return을 low 먼저 해주고 다음은 high로 정렬해주면 됨👍

High to Low 라디오 버튼 클릭했다면 value가 "high"니까
high 먼저 정렬하고 그담으로 low 오게 하면 됨

"latest" 이건 최신으로 생성된 순으로 정렬

notes( 노트 하나의 객체 )에서 어떤 걸 비교해야 최신인지 알 수 있을까❓
🎆 노트가 생성된 시간➡createdTime ( 숫자가 더 크면 클수록 더 최신인 것 ) ⌚

✅ 숫자를 이용해서 나열해주면 됨

notes가 여러개의 배열이고,
이중에 하나하나의 노트에 있는 createdTime으로 비교해서 나열할 것❗

notes( 배열 ).sort 하고 화살표 함수 사용할거임🙂

notes 안에 여러 개의 노트 객체가 있는데 이것들을 하나씩 비교하는거임
비교하려면 note 하나의 객체 가져오고, 두번째 노트 객체 가져오고
여기에서 createdTime을 비교를 하는 것🔥

😯 큰 숫자가 최신이니까 b - a 하는거임 💡

🚂 sort

👉 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환하는 메소드

a - b : 오름차순b - a : 내림차순

"created"는 "latest"와 반대로 해주면 됨👌

5개의 노트 중 Edit 눌러서 노트 수정한 건 이 두개의 노트임
수정한 노트만 editTime 나오고 수정 안한 노트는 null로 나옴
정렬은 마지막에 수정한 노트가 첫번째로 정렬 되고
나중에 수정한게 두번째로 나머지 수정안한 순으로 정렬 되는 걸 확인할 수 있음

1️⃣ edited( 수정 )된 애들과 안 된 애들 나누기

나눌 땐 editedTime을 가지고 나누면 됨
👉 null | 12143545243

notes.filter 사용해서 먼저 하나의 note 가져오는데
여기서 필요한건 editedTime 이니까 ({ editedTime }) 해주고
editedTime이 32423545354 이거면 ( 있기만 하면 null이 아니니까 )➡editedTime🤓

normalNotes는 똑같이 해주되 null인 애들이니까 !editedNotes 이렇게 해주면 됨😎

2️⃣ edited 된 애들끼리 비교하기

✅ edited 된 애들끼리 비교해야하니까 editedNotes로 정렬( sort )해주면 됨

큰 숫자부터 정렬해줘야해서 b - a로 해준 것

✌ 모든 노트가 다 핀이 된 경우

pinned의 length는 0️⃣이 아니어야함❌ ( 핀드만 있으니까 0️⃣보단 클거임⤴ )
&&( 그리고 ) normal은 length가 0️⃣이어야함 ( 핀 안 된 애들이 normal이기에 0️⃣ )

Pinned Notes 라고 할거라 div 태그 안에
Pinned Notes 쓰고 span 태그 안에 핀드된 노트가
총 몇 개인지 알려주기 위해 ({ pinned.length }) 해주면 됨🤓

div 밑에다 NotesContainer 컴포넌트 넣고 노트들 하나씩 나열해주면 되는데
📌Pinned 되어있는 애들은 정렬없다고 했었음🙅‍♀️

✅ 그래서 그냥 핀드되어있는 애들 나열해주면 됨

🗺 정렬 없으니까 바로 map 메소드 이용해서 나열해주기
NoteCard에 필요한 props들은 key, note, type임
👉 key는 note.id, note 객체 데이터, types는 "notes" ( 메인 노트에서 보여주기 때문 )

🤟 핀이 된 노트 & 안 된 노트가 같이 있을 경우

Pinned의 length가 0️⃣❌ && normal의 length도 0️⃣❌

위에 있는 div는 핀드 된 애들 Pinned Notes, 밑엔 핀드 안 된 애들 All Notes

filteredNotes 함수 로직은 위에 있음 ( ☝ 모든 노트가 핀이 안 된 경우 )

이렇게 해주면 됨

---

🎋setFilter 이용해서 라디오버튼 클릭했을 때
이거의 value가 filter로 되게하기🐱‍👓

▫ src>pages>AllNotes>AllNotes.jsx

우선 filter props 내려주고

바로 setFilter 내려줘도 되는데 handleFilter 함수 만들어서 내려줄 것⭕

🤔 여기에 뭐 넣어줘야할까 ❓

라디오 버튼 클릭할 때 e.target.value가 되는 것

👉 왜냐, e.target이 input 이고 input의 value를 filter로 넣어주기 때문❗

FiltersModal로 와서 받아와야하니까 이동하기🌫🐱‍🏍

▫ src>components>Modal>FiltersModal>FiltersModal.jsx

handleFilter랑 filter를 받아오기⚡

🤷‍♀️ headleFilter를 어디다 넣어줘야할까 ❓

👉 input들에 넣어주면 됨 ❗

---

🦥라디오 버튼 선택한게 그대로 남아있게하기

라디오 버튼 눌렀었는데 다시 들어오면 남아있어야 하는데 왜 그럴까❓

Low to High 라디오 버튼 클릭하면 현재 filter는 "low"로 바꼈을 것

"low"였을 땐 Low to High인 input이 checked가 되어야함✔

⬇모달창 닫고 들어가도 라디오 버튼 선택했던 게 남아있을 걸 볼 수 있음👀

---

🖱정렬 모달창 CLEAR 클릭하면
선택했던 라디오 버튼 초기화되게 하기🔮

▫ src>pages>AllNotes>AllNotes.jsx

filter에 라디오 선택한게 있다면 해당 'low'든 'high'든 있을텐데
그걸 setFilter( '' ) 초기화 해서 없애버리면 됨👻

만든 함수 handleClear를 FiltersModal 컴포넌트 안에 넣어주고 컴포넌트로 이동하기🌫🐱‍🏍

▫ src>components>Modal>FiltersModal>FiltersModal.jsx

handleClear 함수 받아오기

🖱CLEAR 눌렀을 때니까 onClick 하고 { 이 안에 만든 함수 handleClear 넣어주기 }

---

🖱메인에서 노트에 있는 Archive 아이콘 누르면
Archive로 이동된 노트 화면에 보이게 하기💻

여기서 Archive 아이콘 누르면

Archive 에서 노트 보여주게하기

보면 mainNotes에 노트 하나있고

archiveNotes에도 노트 하나가 있음

✅ archiveNotes에 있는 노트 하나있는거 나열해주면 됨

▫ src>pages>ArchiveNotes>ArchiveNotes.jsx

먼저 notesList 안에 있는 archiveNotes를 useSelector 이용해서 가져오기🔥

useSelector로 가져오고, dispatch로 해주고
dispatch 할 때 Slice에 만들어놓은거 가져와서 해주고 ... ♾️

MainWrapper.jsx 파일 만들기

archiveNotes의 length가 0️⃣일 땐
( 보여줄 노트가 없는 것➡EmptyMsgBox 컴포넌트 렌더링 )
아닐 땐( 보여줄 노트가 있는 것 ) MainWrapper 컴포넌트 안에
노트들을( archiveNotes ) notes 라는 이름으로 넣어주고
이거의 type은 "archive" 라고 해주면 됨🙆‍♀️

▫ src>components>MainWrapper>MainWrapper.jsx

메인페이지 만들기 위해 만들어놨던 컴포넌트 NotesContainer 가져오기

ArchiveNotes.jsx➡MainWrapper 에서 notes랑 type 있으니까

MainWrapper.jsx➡notes랑 type 받아오기

⬇Archive로 갔을 때 노트가 현재 하나 들어가있으니까 노트 한개가 보여지는 것을 볼 수 있음

그리고 NoteCard에 type을 넣어줬기 때문에
핀도 없고 버튼도 딱 두개만 나오는 것을 볼 수 있음👀

---

🖱메인에서 노트에 있는 Trash 아이콘 누르면
Trash로 이동된 노트 화면에 보이게 하기💻

메인페이지에서 노트에 있는 🗑휴지통 아이콘 클릭하면
해당 노트가 Trash 페이지로 이동하게 하기

노트 한 개 들어온 걸 볼 수 있음 ( 이제 화면에 노트가 보여지게 해야함 )

▫ src>pages>TrashNotes>TrashNotes.jsx

우선 저 위의 데이터 useSelector 이용해서 가져올 것❗
👉 Redux state의 notesList 안에서 archiveNotes를 useSelector로 가져옴🔥

이렇게만 해주면 됨

⬇Trash도 잘 나오는 걸 볼 수 있음👀

---

🔖태그들을 위한 페이지 노트 화면에 보이게 하기

▫ src>pages>TagNotes>TagNotes.jsx

mainNotes에 있는 2개의 노트들을 가져와서 보여줄 것✔

👉 Redux state의 notesList 안에서 mainNotes를 useSelector로 가져옴🔥

이렇게 하면 Learning 페이지로 왔을 때

노트 두개의 데이터를 가져온 걸 볼 수 있음

그럼 메인페이지에서 learning 태그가 추가된 노트를 Learning 페이지에서 보여줘야함

현재 노트에 learning 태그가 추가된게 Note 1 title임
얘를 가져와서 화면에 보여줘야함

Learning도 그렇고 Work도 그렇고 Quotes도 그렇고
똑같이 TagNotes 컴포넌트를 사용할거임⭕

Work에 왔으면 work 태그가 있는 노트들만 보여줘야하고
Quotes에 왔으면 quotes 태그가 있는 노트들만 보여줘야하고 ...🆗

🤔 현재 어느 페이지에 있는지 TagNotes 컴포넌트에서 어떻게 알까 ❓
👉 Learning 페이지에서 경로를 보면 localhost:5173/tag/learning,
Qutes 페이지의 경로는 /tag/quotes, Work는 /tag/work로 되어있음

🛫경로를 통해서 알 수 있음🛬

그럼 이 컴포넌트에서 경로 어떻게 가져올까❓

🤓url 가져올 수 있는 2가지 방법✌

1️⃣ useLocation➡현재 페이지의 URL 정보를 가져옴 ( window.location과 비슷 )
👉 URL 전체 정보 가져오기

2️⃣ useParams➡:id 같은 동적 URL 파라미터 값을 가져옴 ( /post/:id에서 id 값 추출 )
👉 동적 URL에서 특정 값 추출

App.jsx 에서 보면 이 :name을 가져오길 원하는거니까 useParams 이용해서 가져오면 됨
🏃‍♀️ :name이 work | quotes | learning이 될 수 있는 것 ( 다이나믹 ) 🔥

useParamse( 얘가 리턴하는 것 params 객체 ) 가져오고
params( 객체 ).name➡{ name } 이렇게 하면 됨❗

만들어놓았던 Container 가져오고 똑같이 해주면 되는 것

지금 어떠한 태그에 있는지➡name, 모든 메인 노트에대한 데이터➡mainNotes에 있음✔

learning 태그 페이지로 왔다고 생각할거임
learning 페이지를 위한 노트 데이터 Notes 배열 데이터를 만들어서

여기다 넣어주고 여기다 넣어줘야 되는 것⚡

🤷‍♀️learning 태그 페이지를 위한 Notes 데이터는 어떻게 만들까❓

이거 두개를 이용해서 만들면 됨❗

let notes = [ ] 빈 배열로 learning 태그 페이지를 위한 notes를 만들고
여기서 모든 노트 데이터( mainNotes )에서 forEach로 순회할거임🔄

forEach(( 하나의 노트 note ) 하고 { } 중괄호로 해줬다는건 조건처리한다는 뜻💡
노트 하나에 있는( note 객체 ) tags 배열에서
tag( 태그의 이름 )와 name 하고 같은 걸 찾을거임( find 메소드 )🔍

⬇✨