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

프린이·2025년 2월 6일

📒 1탄 이전 벨로그

...

▫ src>App.jsx

1️⃣ BrowserRouter 태그로 감싸주기

2️⃣ Routes 태그로 감싸주기

3️⃣ Route들로 만들어주기

여기에 필요한 속성들은 path & element🌫🐱‍🏍

element : path 경로로 왔을 때 어떠한 컴포넌트를 렌더링 할건지👀
여기선 / 여기로 이동하면 AllNotes 컴포넌트를 보여주겠다는 것

/archive로 이동하면 ArchiveNotes 컴포넌트를 보여주겠다는 것⚡

💡 프로젝트 폴더 구조나 이부분까진
프론트 팀장이 다 만들어서 깃허브에 올려주는 게 좋음👍

지금은 태그가 총 3개이지만

Edit Notes 클릭해서 newTag를 추가하면 추가되고

Exercise 태그 클릭하면 tag/exercise로 이동하고

Quotes 태그 클릭하면 tag/quotes로, Newtag 태그 클릭하면 tag/newtag로 이동함

즉, tag 뒤는 다이나믹하다는 것😎

/trash로 이동하면 TrashNotes 컴포넌트로 이동

tag/ 뒤는 다이나믹하게 해줘야하니까 :name으로 해줌🔥

/404 경로로 이동하면 ErrorPage 컴포넌트로 이동하게 하고
/* 그 외의 경로로 갈 경우엔 /404로 이동하게 할 것🚨

이렇게 처리하는 것

npm run dev로 실행해보면

이렇게 되어있음

index.css로 가서 스타일 다 지워주면 이렇게 뜸

▫ src>index.css

* 전역 스타일➡margin: 0; padding: 0; boxsizing: border-box;
scroll-behavior: smooth;( 스크롤 스무스 하게 )

:root➡--prim-color: rgb(253, 239, 195);
( css 변수 하나만 만들어줄 것, 이 앱의 메인 컬러 )

a 태그➡text-decoration: none; color: black;

App.jsx에 와서 app이랑 app__container 라고 해놨는데

src 폴더 안에 App.css 파일 만들어서

App.css import 해주고

.app 에다 display: flex 주니까 이렇게 정렬 됨

.app_container에 _flex: 1을 주면 전체를 차지하게 됨

👩‍🎨전역 스타일 만들어줘야함❗

▫ src>styles>styles.jsx

🐍만약, 아무 노트가 없을 때 EmptyMsgBox 이걸로 감싸주는 것
👉 Trash나 Archive 등등 이런 곳에 노트가 없을 수 있는데 이부분을 위해 만든거임

노트 하나하나의 버튼들을 위해 만든 ButtonFill

import styled from "styled-components";

export const Container = styled.div``;

export const NotesContainer = styled.div``;

export const EmptyMsgBox = styled.div``;

export const ButtonFill = styled.button``;

export const ButtonOutline = styled.button``;

export const NotesIconBox = styled.span``;

🥏이것들은 전역적으로 사용하는 것이기에 export로 내보내야함

🔧기능적인 부분 만들기➡Slice 에서 만들어줘야함

반응형으로 볼 때 화면이 클 때는 다 보여주는데

화면이 작아질 땐 사이드바가 안 보임
보이게 하려면 햄버거바 눌렀을 때 보이게 해야하니까🍔

이걸 컨트롤 하려면

true일 땐 사이드 바를 보여주고, false일 땐 안 보여지게✔

▫ src>store>menu>menuSlice.js

isOpen 첨엔 사이드바 보이지 않게 false로 줌

reducers 해서 { 필드 안에 하나씩 만들어주면 됨 }

그리고 리듀서를 만들어야함 ( export default로 내보내줌🥏 )

🔦 { } 여기서 해야되는게 햄버거바 클릭할 때
isOpen: true로 바꿔주는 로직을 작성해야함

그러기 전에 나머지도 이정도 구조 만들어준 담에 하자❗

▫ src>store>modal>modalSlice.js

모달 초기 값은 모달이 첨엔 안 열려있으니까 4개의 모달 모두 false로 지정

▫ src>store>notesList>notesListSlice.js

여긴 mainNotes, archiveNotes, trashNotes, editNote 라고 되어있음
3개는 다 배열로 되어있고 editNote만 null로 되어있음

▫ src>store>tags>tagsSlice.js

새로고침해도 3개의 태그는 냅둘거임 ( 하드 코딩할 것 )

#️⃣id는 유니크하게 만들기 위해
설치해놓은 uuid 이용해서 v4 하면 유니크한 값을 넣어줌🤓

💪configureStore 이용해서 Store Object 만들기

configureStore 이용해서 Sub Reducers(개별 리듀서)를 모은
Root Reducer를 만들고, 이를 기반으로 Store Object 생성함🙆‍♀️

🔹 흐름 정리 🔹
1️⃣ 여러 개의 Sub Reducers 만든다.
2️⃣ combineReducers로 Sub Reducers를 하나의 Root Reducer로 합친다.
3️⃣ configureStore를 사용해 Store를 만든다.

▫ src>store>index.js

🔥이제 리듀서들 다 만들어 놨으니까 이걸 이용해서 index.js 에서 만들어주면 됨

configureStore 하고

reducer 하고 Sub Reducer➡Root Reducer로 만들어주는 부분

서브 리듀서들을 넣기 위해 가져와야 하니까 import 각각 해주고 넣어주면 됨👍

🔁configureStore가 리턴하는 게 Store Object인 것

🥏이것도 다른 곳에서 사용해야하니까 export로 내보내주기

리덕스를 사용하기 위해선 store가 있으니까

▫ src>main.jsx

main.jsx 에서 Provider 태그로 부모 컴포넌트 감싸줘야함

그리고 Provider에 store={ 방금 만든 store 객체를 넣어주면 됨 }

이렇게 해서 리덕스를 사용하기 위해 전체적인 부분까지 다 만들어준 것😎

🎭Nav바 만들기

현재는 이렇게 되어있음 Nav바 부터 만들어보자

▫ src>layout>Navbar>Navbar.jsx

🍔바 아이콘 넣어줄거임
👉 클릭했을 때 사이드 바 나오게 해야해하는데 우선 대기✋

이부분이

여기에 들어올거임

🎨Container 스타일 컴포넌트 만들어줌

여기에 Notes나 Coding이나 Quotes 이런식으로 현재 어디인지를 나타내줄 것

우선 이렇게 하드코딩 해준 담에 여기에다 할건

이 버튼이 필요함

ButtonFill은 src>styles>styles.jsx 파일에 만들어놨었음✔

⬇👩‍🎨이렇게 되어있으니 스타일링을 해주자❗

Nav의 전체적인 부분인 StyledNav 먼저 스타일링 해주자

box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.12);

위아래는 0, 양옆은 30

display: none; 으로 햄버거바 아이콘 안 보이게 우선 이렇게 함

🍔바는 950px보다 화면이 작아졌을 때 보여지게 할 것
👀보여지게 해야하니까 display: block; 으로 해줄거임

💡flex-basis는 flex 사용할 때에 width랑 같다고 했었음

햄버거바가 svg라 이걸 위한 스타일링도 해줄거임

Container는 Page랑 ➕버튼 부분임

flex 1하면 전체 다 사용하는 것

Justify-content: space-between;

Page랑 ➕버튼 사이 간격 벌어짐

950px 보다 작을 때 magin-top: 7px 적용됨

이젠 햄버거바 클릭했을 때 있었다가 없었다가 해줘야함⚡

🍔바 로직 구현

🖱햄버거바 아이콘 onClick 했을 때 여기서 뭐를 해줘야할까❓
👉 리덕스 스토어에 있는 State 값을 바꾸는 방법 : '액션'을 dispatch🌫🐱‍🏍

dispatch는 어디서 나오냐면 useDispatch 에서 나옴⭕

dispatch 하고 여기서 어떤거를 action을 넣어줘야하는데

이부분을 만드는건 당연히 menuSlice 🪓

▫ src>store>menu>menuSlice.js

isOpen이 false일 땐 true, true일 땐 false로 토글링 해주는 것✔

이름을 toggleMenu 라고 할거고 여기 로직을 어떻게 짜야할까❓

isOpen 이걸 가져오려면 state에 있는 거니까
state.isOpen = action.payload 라고 해줄 것❗

action.payload에 true 아니면 false 넣어주면 됨

toggleMenu를 Navbar.jsx 여기서 사용해야하는데 어떻게 내보낼까❓

menuSlice.actions 안에 toggleMenu가 있음
{ 구조분해할당 } 해서 export로 내보내기🥏

▫ src>layout>Navbar>Navbar.jsx

( 여기에 payload도 넣어줘야함, payload는 true로 넣어주면 됨 )
왜냐, false가 초기 값이기에 클릭했을 때 true가 돼야 하기 때문🤓

⬇지금은 false인데

햄버거바 클릭하면 true로 바뀌는 걸 볼 수 있음👀

➕버튼 누르면 viewCreateNoteModal 나오게 하기

➕버튼 클릭할 때니까 onClick🖱

viewCreateNoteModal 이걸 false 에서 true로 만들어야함🙂

당연히 dispatch, modalSlice.js로 넘어가서

▫ src>store>modal>modalSlice.js

여기도 마찬가지로 toggle, toggleCreateNoteModal 이름으로 지정해서
viewCreateNoteModal이 state 안에 있으니까 state.viewCreateNoteModal로 해줌✔

toggleFiltersModal도 똑같으니까 바로 밑에다 만들어줄 것

viewEditTagsModal & viewAddTagsModal은 좀 다르게 할거임🙆‍♀️

viewAddTagsModal은 Nav바 오른쪽에 있는 ➕버튼 클릭하면
viewCreateNoteModal이 생기고 왼쪽 밑에 ADD Tags 버튼 클릭하면 나오는 모달창✅
( 🏷태그를 추가하는 모달창인 것 )

viewEditTagsModal은 사이드바에서 Edit Notes 클릭하면 생성되는 모달창

ADD Tags 모달창과 좀 다른데 위가 ADD인지 Edit인지랑 x부분이 다름

이걸 사용할 때 어떻게 사용하냐면 당연히 dispatch를 먼저 할 것

dispatch 해주고 toggleTagsModal을 이용해줄거임

근데 toggleTagsModal할 때 type이 Add인지 Edit인지 먼저 알려줘야함🗣📣

( 여기가 payload 넣는 부분인데 여기에 type이 Add인지 Edit인지 넣어줄 것
그리고 view 라고 해서 이걸 현재 true 라고 하면 모달을 보여줄거고,
false로 할거면 모달이 보여진 상태에서 안 보여지게 하는거임 )

이부분은 payload, payload는 action 안에 있으니까
action을 그냥 payload로 바로 구조분해할당 해줌❗

{ payload } 안에는 type & view가 있음

다시 구조분해할당 함

🔹조건 처리 : type이 'add' 아니면 'edit' 이라고 했음

만약 type이 'add'면 뭐를 하고 아니면 뭐를하고 조건 줄거임

👉 Add일 땐 viewAddTagsModal를 true | false로 만들지는 view를 넣어주면 됨💡

👉 add가 아닐 땐 자동으로 viewEditTagsModal이 되는 것

🥏export로 3개의 모달을 내보내주고 Navbar.jsx 파일로 이동🌫🐱‍🏍

▫ src>layout>Navbar>Navbar.jsx

➕버튼 누를 때 viewCreateNoteModal을 true로 만들어야 하는거니까

dispatch(toggleCreateNoteModal(true)) 해주면 됨

className='nav__btn' 넣어줌

⬇

➕버튼 클릭하면 viewCreateNoteModal이 true 바뀌는 걸 확인 할 수 있음

➕버튼 ButtonFill 스타일링 해주기👩‍🎨

▫ src>styles>styles.jsx

import styled from "styled-components";

export const ButtonFill = styled.button`
	padding: 6px 20px;
	border-radius: 5px;
	cursor: pointer;
	box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1);
	transition: 250ms background-color ease-in-out;
	// + 부분
	span {
		font-weight: 400;
		// 글자 크기를 반응형으로 조정하는 방법 중 하나
		font-size: clamp(15px 3.5vw, 1.2rem);
	}
	background-color: var(--primary-color);
	border: 1px solid var(--primary-color);

	&:hover {
		background-color: rgb(253, 239, 195, 0.5);
    	
	}

	// 화면이 600px 이하일 때 적용
	@media (max-width: 600px) {
		padding: 6px 12px;
	}
`;

🧐

transition : 요소의 변화( ex - 색상 변경 )를 부드럽게 만들고
ms ( 밀리초 ) : 전환 속도 설정
ease-in-out : 시작과 끝을 부드럽게 하는 전환 속도 조절 방식

clamp( ) 함수 : 최소값, 최적값, 최대값 설정해서
화면 크기에 따라 폰트 크기를 자동으로 조절해줌

background-color는 index.css 에서 만들어놓은 --primary-color를 사용할 것🙃

👉 background-color: var(--primary-color);

👉 border: 1px solid var(--primary-color);

👉 hover 했을 때 background-color: rgb(253, 239, 195, 0.5); 색상 변경 됨

이렇게만 스타일링 해줄거임

...

📒 3탄 다음 벨로그

프린이

안녕하세요! 퍼블리싱 & 프론트엔드 개발 공부 블로그 입니다!

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

📒 1탄 이전 벨로그

▫ src>App.jsx

1️⃣ BrowserRouter 태그로 감싸주기

2️⃣ Routes 태그로 감싸주기

3️⃣ Route들로 만들어주기

여기에 필요한 속성들은 path & element🌫🐱‍🏍

element : path 경로로 왔을 때 어떠한 컴포넌트를 렌더링 할건지👀여기선 / 여기로 이동하면 AllNotes 컴포넌트를 보여주겠다는 것

/archive로 이동하면 ArchiveNotes 컴포넌트를 보여주겠다는 것⚡

💡 프로젝트 폴더 구조나 이부분까진프론트 팀장이 다 만들어서 깃허브에 올려주는 게 좋음👍

지금은 태그가 총 3개이지만

Edit Notes 클릭해서 newTag를 추가하면 추가되고

Exercise 태그 클릭하면 tag/exercise로 이동하고

Quotes 태그 클릭하면 tag/quotes로, Newtag 태그 클릭하면 tag/newtag로 이동함

즉, tag 뒤는 다이나믹하다는 것😎

/trash로 이동하면 TrashNotes 컴포넌트로 이동

tag/ 뒤는 다이나믹하게 해줘야하니까 :name으로 해줌🔥

/404 경로로 이동하면 ErrorPage 컴포넌트로 이동하게 하고/* 그 외의 경로로 갈 경우엔 /404로 이동하게 할 것🚨

div 태그를 Routes 태그들과 Navbar 컴포넌트 감싸주고BrowserRouter 태그 밑에 Sidebar 컴포넌트 넣어주면

( Sidebar & Navbar는 layout 부분임 )

이렇게 처리하는 것

npm run dev로 실행해보면

이렇게 되어있음

index.css로 가서 스타일 다 지워주면 이렇게 뜸

▫ src>index.css

* 전역 스타일➡margin: 0; padding: 0; boxsizing: border-box;scroll-behavior: smooth;( 스크롤 스무스 하게 )

:root➡--prim-color: rgb(253, 239, 195);( css 변수 하나만 만들어줄 것, 이 앱의 메인 컬러 )

a 태그➡text-decoration: none; color: black;

App.jsx에 와서 app이랑 app__container 라고 해놨는데

src 폴더 안에 App.css 파일 만들어서

App.css import 해주고

.app 에다 display: flex 주니까 이렇게 정렬 됨

.app_container에 _flex: 1을 주면 전체를 차지하게 됨

👩‍🎨전역 스타일 만들어줘야함❗

▫ src>styles>styles.jsx

🐍만약, 아무 노트가 없을 때 EmptyMsgBox 이걸로 감싸주는 것👉 Trash나 Archive 등등 이런 곳에 노트가 없을 수 있는데 이부분을 위해 만든거임

노트 하나하나의 버튼들을 위해 만든 ButtonFill

🥏이것들은 전역적으로 사용하는 것이기에 export로 내보내야함

🔧기능적인 부분 만들기➡Slice 에서 만들어줘야함

menu 부터 할 것

반응형으로 볼 때 화면이 클 때는 다 보여주는데

화면이 작아질 땐 사이드바가 안 보임보이게 하려면 햄버거바 눌렀을 때 보이게 해야하니까🍔

이걸 컨트롤 하려면

menu에 있는 isOpen이 true인지 false인지에 따라 달라지게 하면 됨😎

true일 땐 사이드 바를 보여주고, false일 땐 안 보여지게✔

▫ src>store>menu>menuSlice.js

createSlice 한 담에 이름은 menu이고, initialState( 초기 값 )지정하기

isOpen 첨엔 사이드바 보이지 않게 false로 줌

reducers 해서 { 필드 안에 하나씩 만들어주면 됨 }

그리고 리듀서를 만들어야함 ( export default로 내보내줌🥏 )

🔦 { } 여기서 해야되는게 햄버거바 클릭할 때isOpen: true로 바꿔주는 로직을 작성해야함

그러기 전에 나머지도 이정도 구조 만들어준 담에 하자❗

▫ src>store>modal>modalSlice.js

모달 초기 값은 모달이 첨엔 안 열려있으니까 4개의 모달 모두 false로 지정

▫ src>store>notesList>notesListSlice.js

여긴 mainNotes, archiveNotes, trashNotes, editNote 라고 되어있음3개는 다 배열로 되어있고 editNote만 null로 되어있음

▫ src>store>tags>tagsSlice.js

새로고침해도 3개의 태그는 냅둘거임 ( 하드 코딩할 것 )

#️⃣id는 유니크하게 만들기 위해설치해놓은 uuid 이용해서 v4 하면 유니크한 값을 넣어줌🤓

💪configureStore 이용해서 Store Object 만들기

▫ src>store>index.js

🔥이제 리듀서들 다 만들어 놨으니까 이걸 이용해서 index.js 에서 만들어주면 됨

configureStore 하고

reducer 하고 Sub Reducer➡Root Reducer로 만들어주는 부분

✍여기에 menu는 뭐고 modal, tags, notesList는 뭔지 작성해주면 됨

서브 리듀서들을 넣기 위해 가져와야 하니까 import 각각 해주고 넣어주면 됨👍

🔁configureStore가 리턴하는 게 Store Object인 것

🥏이것도 다른 곳에서 사용해야하니까 export로 내보내주기

리덕스를 사용하기 위해선 store가 있으니까

▫ src>main.jsx

main.jsx 에서 Provider 태그로 부모 컴포넌트 감싸줘야함

그리고 Provider에 store={ 방금 만든 store 객체를 넣어주면 됨 }

이렇게 해서 리덕스를 사용하기 위해 전체적인 부분까지 다 만들어준 것😎

🎭Nav바 만들기

현재는 이렇게 되어있음 Nav바 부터 만들어보자

▫ src>layout>Navbar>Navbar.jsx

styled components 이용하고 있으니까 StyledNav 만들어서 Navbar 감싸줄 것

🍔바 아이콘 넣어줄거임👉 클릭했을 때 사이드 바 나오게 해야해하는데 우선 대기✋

이부분이

여기에 들어올거임

element : path 경로로 왔을 때 어떠한 컴포넌트를 렌더링 할건지👀
여기선 / 여기로 이동하면 AllNotes 컴포넌트를 보여주겠다는 것

💡 프로젝트 폴더 구조나 이부분까진
프론트 팀장이 다 만들어서 깃허브에 올려주는 게 좋음👍

/404 경로로 이동하면 ErrorPage 컴포넌트로 이동하게 하고
/* 그 외의 경로로 갈 경우엔 /404로 이동하게 할 것🚨

div 태그를 Routes 태그들과 Navbar 컴포넌트 감싸주고
BrowserRouter 태그 밑에 Sidebar 컴포넌트 넣어주면

* 전역 스타일➡margin: 0; padding: 0; boxsizing: border-box;
scroll-behavior: smooth;( 스크롤 스무스 하게 )

:root➡--prim-color: rgb(253, 239, 195);
( css 변수 하나만 만들어줄 것, 이 앱의 메인 컬러 )

🐍만약, 아무 노트가 없을 때 EmptyMsgBox 이걸로 감싸주는 것
👉 Trash나 Archive 등등 이런 곳에 노트가 없을 수 있는데 이부분을 위해 만든거임

화면이 작아질 땐 사이드바가 안 보임
보이게 하려면 햄버거바 눌렀을 때 보이게 해야하니까🍔

🔦 { } 여기서 해야되는게 햄버거바 클릭할 때
isOpen: true로 바꿔주는 로직을 작성해야함

여긴 mainNotes, archiveNotes, trashNotes, editNote 라고 되어있음
3개는 다 배열로 되어있고 editNote만 null로 되어있음

#️⃣id는 유니크하게 만들기 위해
설치해놓은 uuid 이용해서 v4 하면 유니크한 값을 넣어줌🤓

🍔바 아이콘 넣어줄거임
👉 클릭했을 때 사이드 바 나오게 해야해하는데 우선 대기✋

🍔바는 950px보다 화면이 작아졌을 때 보여지게 할 것
👀보여지게 해야하니까 display: block; 으로 해줄거임

🖱햄버거바 아이콘 onClick 했을 때 여기서 뭐를 해줘야할까❓
👉 리덕스 스토어에 있는 State 값을 바꾸는 방법 : '액션'을 dispatch🌫🐱‍🏍