[TIL] 05.24 :: 개인과제 중간~

yeseul·2024년 5월 25일

<TIL>

목록 보기

18/43

이번주는 리액트 숙련주차로, 나만의 가계부를 만드는 개인과제를 진행중이다.
과제의 목적은 다양한 리액트 훅(useState, useEffect, useRef..) 과 아래의 기술을 사용해보며

✅ react-router-dom 을 활용한 페이지 이동처리
✅ styled-component 를 이용한 스타일링 적용
context api 를 이용한 전역 상태 관리
redux 를 이용한 전역 상태 관리

Props Drilling → Context API → Redux 순으로 각각 별도의 브랜치를 만들어 제출해야 한다.
현재체크된 항목까지는 구현하였고, 월요일부터 context, redux 로 리팩토링 할 생각이다.
지난 과제였던 TodoList 피드백에서 페이지 reload 는 지양해야한다는 말씀을 듣고 그럼 다른페이지에서 홈으로 어떻게 돌아오는지 여쭤보았을때 라우터를 이용한다고 하셨었다. 신기하게도 이전 과제에서 의문이 생기던 부분을 그 다음과제에서 학습을 하고있다.
또한 CSS 파일 분리도 컴포넌트마다 갖는 스타일을 한 폴더에 넣는것에대해관리해야할 폴더가 너무 많아지는 부분에서도 효율이 떨어지는거 아닌가 하는 생각이 들었다. 피드백으로 스타일드 컴포넌트의 사용에 대해 알려주셨었다.
그래서인지 나는 지난주의 궁금했던 부분을 해결하면서, 왜 쓰는지 이해하며 과제를 진행중이라 재밌게 하고는 있지만...!
이번 과제를 하면서도 의문이 생기는 점이 몇가지있다. (TIL에 작성)

확실히 지난 과제 덕분에 useState 로 상태관리하는 부분은 코드작성이 쉬웠는데,
로컬스토리지에 데이터 set, get 하는 과정에서 useEffect 로 관리하는 순서가 아직 많이 헷갈린다.
input 으로 입력받다보니 의존성배열에 어떤 값을 넣어야되는지도 모르겠어서 오류가 계속 나더라.
개념이 이해가 안되어선지 버그 잡는 시간도 오래걸리고 ㅜ

구글링과 팀장님의 도움으로 결국 해결은 했지만, 아직 개념정리가 안된느낌.
개인과제 제출 끝나면 튜터님이 제공해주신 코드로 useEffect 로그 찍어보는 연습 많이 해야겠다 !!
라우터를 이용해서 등록한 지출내역의 상세페이지로 이동하면, 저장된 내역을 수정/삭제까지 해야한다.
영화페이지 팀프로젝트 댓글CRUD 기능 구현 이후로 오랜만에 로컬스토리지를 사용하다보니, 그 내용도 한번 더 정리하려고 한다.

* localStorage

✔️localStorage 사용방법

localStorage 문법
개발자도구 Application탭 > localStorage 에서 확인가능

// 1. 저장
localStorage.setItem('data명', '저장할data'); //string만 저장가능

// 2. 읽기
localStorage.getItem('data명');

// 3. 삭제
localStorage.removeItem('data명')

localStorage에 array/object자료 저장하기
localStorage는 문자형(string)으로만 데이터를 저장하기 때문에,
array/object자료를 저장할 때 JSON으로 변환하여 저장해야 함

저장 : string → JSON 변환하여 저장 JSON.stringify()
읽기 : JSON → string 변환하여 읽기 JSON.parse()

// 1. array/object 저장
localStorage.setItem('data명', JSON.stringify({ name : noi })) // data 명이 key 이다.

// 2. array/object 읽기
let data변수명1 = localStorage.getItem('data명') // 저장해둔 데이터를 data변수명1에 저장
let data변수명2 = JSON.parse(data변수명1)   //data변수명2에 array/object자료 저장됨
                                          //data변수명1에 똑같이 저장해도 상관없음

✔️ Dummy data 삽입

localStorage 기본 초기값은 null 이다.
-> 따라서 if문에 로컬스토리지에서 가져온 초기데이터를 조건으로 넣을경우 false 로 판단되어, else문이 실행된다.
-> 이를 활용하여 로컬스토리지에 더미데이터를 저장하는 방식으로 코드를 짰다.

위의 코드에서 아래 화살표 방향으로 수정했다.
💡 마운팅 단계에서만 더미데이터가 삽입되면 되므로, 의존성배열을 빈배열로 수정했다.
💡 또한 로컬스토리지에서 JSON.parse( ) 로 변환시키지 않은 데이터로 조건문에서 테스트 하는것은 굉장히 헷갈리더라... 실행되긴 하지만, 버그를 찾을수록 신경쓰기가 번거롭다는 것을 깨닫고 가져온 데이터를 바로 변환 시켰다.

수정 후, 로컬스토리지에 잘 저장되는 모습이다.

새로 추가된 지출내역도 저장되는 것을 확인 할 수 있다.

💭 localStorage 에 [ ] 빈배열을 저장할 경우에는?

예시)

빈배열이지만, 로컬스토리지에 저장될때 문자열로 바꿔서 저장한다.
만약 더이상 추가된 데이터가 없다면 여전히 storedData = [ ] 일것이다.
다시 가져올때 JSON.parse( ) 를 안해줄경우, 문자열 "[", "]"로 저장되며, type은 string, 길이가 2가 나오게 된다.
이를 가지고 조건문에 사용할경우 true 로 판단되어 else문이 실행안된다.

JSON.parse( ) 를 해줬다고해도, 자바스크립트에서 빈배열은 true 이기 때문에 if(storedData) 를 하게되면 true 값이 들어가므로 if문만 실행될것이다.
따라서 조건식을 배열.length 로 비교해야한다. 배열안에 요소가 있다면 길이가 있을것이고, 그말은 즉 if문이 실행된다.

💡마치 문자열 "false" 의 불리언 값이 false 라는 단어가 들어있어서 false 가 나올 것 같지만, true 가 나오는 것 과 비슷한 로직이다. (단순하지만 헷갈렸던부분..)

* useNavigate 훅

Home -> Detail 페이지로 이동시,
=> navigate(템플릿 리터럴)로 아이디 붙여서 이동하는 경로 로 만들수있다.

<StDataWrap
          key={data.id}
          onClick={() => {
            navigate(`/detail/${data.id}`);
          }}>

* map

반복시키려는 묶음 밖에서 map( ) 으로 감싸야한다.
-> map( ) 사용하여 반환하고 싶은게 무엇인지 잘 생각해보자.
-> 즉, 내가 묶음지으려는 뭉치(반복하고자 하는 것)를 하는것을 화살표 함수 뒤 리턴값에 넣어야 된다.
html 구조를 확인해보면 아래와 같다.

* Styled-component

✔️GlobalStyle

전역스타일로 styled-reset 을 적용했다.
근데 자꾸 body 속성이 flex로 되어있어서 전역스타일 파일에 body에 display - block 속성을 따로 넣어줬었다.
C + S + F 로 display 를 검색하니...

❗삭제 안했던 index.css에서 적용되고 있었다 ㅎㅎㅎㅎ
당장. 바로. 인덱스 파일 삭제 완료..
지난번 TIL 쓰자마자 전체에서 단어찾기를 바로 활용할 일이 생기다니! ㅋㅋ

✔️선택자 & >

 const StDataGroup = styled.div`
  display: flex;
  flex-direction: column;
  align-items: start;
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  & > span:first-child {
    margin-bottom: 5px;
    color: rgb(102, 102, 102);
    font-size: 14px;
  }

  & > span:last-child {
    font-weight: bold;
    color: #9982e9;
    flex-shrink: 0;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
`;

StDataGroup 내부의 첫번째 span 태그에 & : 자기자신, > : 하위요소 선택자를 사용해서 스타일을 적용해보았다.

* getMonth( ) + 1

: getMonth( ) 메서드는 생성된 Date 객체에서 월(0 ~ 11)를 가져온다. (월을 나타내는 값이 0부터 시작한다.)
-> Zero Base으로 1월은 0이다. 그래서 getMonth( ) + 1로 처리해야 한다.
❗ 선택한 '월'에 대해 필터링을 할때 +1 을 해야한다.

getMonth( ) 를 했을경우, 선택된 달 -1 에 데이터가 출력되는것을 볼 수 있다.

getMonth( ) + 1

* 회고

우선 지금까지 제일 어려웠던 것은 변수명 정하기였다. 고민하다가 쓰던 변수명을 바꾸기도 했어서 나중엔 헷갈려서 잘못 호출하기도 했다 ㅜㅜ 스타일드 컴포넌트 사용하고 변수명 정해야될게 많아져서 더 힘들어진듯하다.
또 하나의 궁금증은 진짜 작은 요소들? 예를들어 모달창의 버튼하나도 다 따로따로 이름을 정해야하는건가 싶다.
그리고 생각보다 스타일 코드가 별로 안길어져서 확실히 css 파일 따로 놓고 화면분할해서 적용하던 것보다 편하다! 튜터님이 말씀해주신대로 스타일드 컴포넌트는 St 를 붙이고 있는데 부캠 기간동안에는 무조건 붙여야될거같다.. 안붙인 컴포넌트랑 너무 헷갈린다..!

truthy, falsy 한 값에 대해서는 스터디때 공부했는데 코드상으로 적용해보니 한번에 이해가 되진 않았다.
로컬스토리지 데이터 변환과 dummy data 추가부분 버그를 해결하면서 형변환, 불리언값 등 코드에서 돌아가는 로직을 한번 더 생각해볼 수 있었다. 콘솔에 로그 찍어보는 연습을 많이 해봐야겠다. 습관이 안들어있으니.. 머리속으로만 결과를 생각해보고 이건가? 저건가? 하면서 하나하나 코드를 바꿔보면서 시간이 더 오래 걸렸다. 막히는 부분 있으면 머리 말고 손가락을 움직이자!!!!!
요 며칠 버그 해결하느라 시간이 굉장히 많이 들었지만ㅜㅜ 그만큼 깊게 공부했으니!
좀만 힘내서 홀가분하게 과제 끝내보자!