[React] 리액트를 사용하여 간단한 노트 앱 만들기 #01

 

리액트 강의만 들으면서 따라친지 어언 12398744일.. 

리액트랑 친한듯 안 친한듯 지내고 있다가

간단하게 뭐라도 쳐보자! 해서 만들게 된 노트앱

 

투두리스트도 고민 했었지만 페이지 이동이 있게 만들고 싶었다

 

디자인은 최대한 심플하게.

기능 구현을 먼저 해보는 방향으로 하고 천천히 보완할 예정이다 

CRUD만 하면 다 한거라 그랬어..

 

---

 

1.  Folder Structure

📦 public
└──📜 index.html
📦 src
├──📂 components
│           ├──📜 Filter.js
│           ├──📜 Filter.module.css
│           ├──📜 Title.js
│           └──📜 Title.module.css.js
├──📂 routes
│           ├──📜 Detail.js
│           ├──📜 Detail.module.css
│           ├──📜 Home.js
│           └──📜 Home.module.css
├──📂 styles
│           └──📜 GlobalStyles.js
├──📜 App.css
├──📜 App.js
└──📜 index.js

 

2. Main Features

2-1. Save data in local storage

노트의 내용을 작성 후 저장 이벤트가 발생할 때 Local Storage에 데이터가 저장됩니다.

데이터를 저장할땐 JSON.stringify() 사용해 문자열로 변환하여 저장합니다.

 

2-2. Change local storage data in real-time

최초 생성시 부여된 id 값이 있을 경우 find()를 사용하여 동일한 id값의 데이터를 저장해 줍니다.

저장된 데이터를 JSON.parse()를 사용해 객체로 변환해 note 변수에 담아줍니다.

 

수정된 데이터는 저장 시 filter()를 사용해

현재 id 값과 동일하지 않은 데이터를 제외한 나머지 리스트들을 새로운 리스트에 담아 줍니다.

 

수정된 데이터와 새로운 리스트에 담긴 데이터를 합친 후 다시 문자열로 변환해 로컬스토리지에 저장해줍니다.

 

 let navigate = useNavigate();
 const { id } = useParams();
 const [note, setNote] = useState({ title: "", contents: "" });
 const noteList = JSON.parse(localStorage.getItem("note-list")) || [];
 
 const saveNote = () => {
        let data = {
            id: id ? id : uuidv4(),
            title: note.title,
            contents: note.contents,
            createdAt: id ? note.createdAt : new Date(),
            updatedAt: new Date(),
        };
        let newList = noteList;
        if (!id) {
            // create note
            newList.unshift(data);
        } else {
            // modifiy note
            const filtered = noteList.filter((val) => val.id != note.id);
            newList = [data, ...filtered];
        }
        localStorage.setItem("note-list", JSON.stringify(newList));
        navigate(-1);
    };
    
    useEffect(() => {
        if (id) {
            const found = noteList.find((item) => item.id === id);
            setNote(found);
        }
    }, []);

 

 

🔗 UUID 생성하기

[JS] UUID로 고유값 생성하기

 

 

2-3. Search note

include() 메소드를 사용해 제목, 내용에 타이핑된 검색어랑 일치하는 항목 체크한 후 리스트에 뿌려줍니다.

 

2-4. Sort note

swich문을 사용해 option 값이 변경 될때 리스트 정렬을 변경해 줍니다.

const [notes, setNotes] = useState([]);
    const noteList = localStorage.getItem("note-list");

    const sortList = (sortBy) => {
        let newList = [];
        switch (sortBy) {
            case "edited":
                newList = [...notes].sort((a, b) => (a.updatedAt < b.updatedAt ? 1 : -1));
                break;
            case "created":
                newList = [...notes].sort((a, b) => (a.createdAt < b.createdAt ? 1 : -1));
                break;
            case "alphabet":
                newList = [...notes].sort((a, b) => (a.title > b.title ? 1 : -1));
                break;
        }
        setNotes(newList);
    };

    const search = (text) => {
        const filtered = JSON.parse(noteList).filter((item) => {
            return item.title.includes(text) || item.contents.includes(text);
        });
        setNotes(filtered);
    };

    useEffect(() => {
        if (noteList) {
            setNotes(JSON.parse(noteList));
        }
    }, []);

 

2-5. Delete Note

filter()를 사용해 현재 페이지에 id값과 동일한 값을 제외한 나머지 배열을 로컬스토리지에 담아줍니다.

const deleteNote = () => {
        const filtered = noteList.filter((val, idx, arr) => {
            if (val.id != id) return arr;
        });
        localStorage.setItem("note-list", JSON.stringify(filtered));
        navigate(-1);
    };

 

 

---

/ 회고록

 

vue가 익숙해진 나에게 react는 새로운 듯 익숙했다.

자바스크립트 문법 사용은 문제 없이 했지만 라우팅과 라이프 사이클에 대한 이해를 하는데 

조금 시행착오가 있긴 했다.

 

화면 디자인, 파일명, 기능등 아직 손 보고 싶은 곳이 너무 많이 보이지만

한번에 다 하려다가 어려워서 지칠수도 있으니 차근차근 해보자.

 

아, 개인적으로 vue의 양방향 바인딩이 새삼 편한 부분이라는걸 다시 한 번 깨달았다.

그래도 이제 막 시작 했으니 내가 리액트에 더 좋은 점을 경험하지 못 한거라고 생각한다.

빨리 그 재미에 한 걸음 더 다가가기 위해 여러가지를 시도해 봐야지.