[항해뀨 3기] 4주차 회고

벌써 4주차라고..??? 와...

 

이번 주차에는 수요일까지 리액트 심화반 강의를 듣고 목-금 매운맛 과제 빡세게 하다가 제출, 토요일에는 과제 개선!

오늘은..좀 쉬었다 ㅎㅎ..ㅋㅋ.. 

 

깃허브

https://github.com/jjubbu/React-Calendar

GitHub - jjubbu/React-Calendar: 항해 99 3기 3주차 과제 (매운맛) - 달력 만들기

사이트

https://seona-react-calendar.web.app/

React App

피그마

https://www.figma.com/file/Lj271NhRkmQzNPT1pYtdTP/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%BA%98%EB%A6%B0%EB%8D%94-%EB%A7%8C%EB%93%A4%EA%B8%B0?node-id=0%3A1 

Figma

 

피그마를 보면 알겠지만.. 메인페이지, 캘린더 본체가 보이는 부분은 디자인 작업이 남았다.

저런 디자인이 필수는 아니고 어디까지나 개인 만족이지만 이왕이면 이쁜게 좋잖아!!

일정 추가와 디테일 페이지는 어느정도 반응형까지 맞춰서 나름 보기좋게 만들었다. 

근데 핸드폰에서 보면 입력창 부분이 약간..비율이 맞지 않다. 나중에 개선해야겠다 후..

 

아무튼, 이번주차 회고의 주제는 "리액트와 전역 상태 관리, CSS 라이브러리와 리액트" !

 

▶ 리액트와 전역 상태 관리

전역 상태 관리라는건 말 그대로 전체적인 상태, 무언가의 값따위를 관리하는걸 말한다.

props를 생각해보자.

기본적으로 리액트는 부모 컴포넌트의 props를 자식이 가져올 수 있고, 자식의 자식이 부모의 부모의 props를 가져오려면

부모가 부모의 부모의 props를 쭉 이어받아줘야한다. 

이렇게 쓰니 뭔 소린가 싶지만, 가족관계에 비유하자면 증조할아버지의 유산같은거다.

 

만약 나의 가족관계가 증조할아버지, 할아버지, 아빠, 딸, 손자 이렇게 되어있다면?

증조할아버지의 유산은 1차적으로 할아버지에게 넘어갈것이고

할아버지가 아빠에게 증조할아버지의 유산을 넘겨줘야 아빠는 증조할아버지의 유산을 넘겨받을 수 있다.

그리고 아빠가 증조할아버지의 유산을 또 넘겨줘야 내가 증조할아버지의 유산을 받을 수 있고

나는 내 딸에게 증조할아버지의 유산을 넘겨줘야 딸이 증조할아버지의 유산을 받을 수 있고

딸이 또또 증조할아버지의 유산을 넘겨줘야 손자가 증조할아버지의 유산을 받을 수 있다.

이 증조할아버지의 유산을 props라고 보면 된다. 참쉽쬬?

 

아무튼, 겁나 귀찮다. 하위의 하위의 하위의 하위의 컴포넌트가 상위의 상위의 상위의 상위의 컴포넌트가 가진 무언가의 값을 가지려면 그 둘 사이의 컴포넌트들이 전부 그 값을 가져야한다는거다!!!

코딩하기도 엄청 번거롭거니와 그 양이 방대해지면 결국 그 작업 자체가 무거워질터, 그럼 무엇이 필요한가?

그게 전역상태관리다.

 

전역상태관리에는 이것저것있지만 스파르타코딩클럽의 리액트 강의에서는 리덕스를 사용했다.

리덕스는 모듈,스토어로 이루어져있다.

컴포넌트에서 리덕스에 어떠한 값을 저장한다고 하면 그 값은 특정 모듈을 지나쳐서 스토어에 저장된다.

모듈 안의 액션함수, 리듀서는 이 값을 만져서 보기 좋은 리스트로 정리해서 스토어에 저장할 수도 있고

스토어에 저장된 값을 변경할 수도 있다.

그리고 어느 위치에 있는 컴포넌트든 자유롭게 이 스토어의 state에 접근할 수 있다!

리덕스를 설치하고 useSelector을 사용하면 state안의 값을 가져와 사용할 수 있는데,

이때 기본 state 안에서는 값이 어떤 모듈을 통과했는지에 따라 위치가 지정되기에

만약 module1.js 라는 모듈을 통해 스토어에 값을 저장했다면 그것의 위치는 state.module1.list 이런식으로 된다.

(list는 보통 초기값에 넣는것. 초기값을 다른걸로 만들었다면 저 부분도 다른 명칭이 된다.)

 

그런데 이 전역상태관리는 새로고침하면 초기화된다.

그래서 firestore 같은 걸 사용해서 서버에 값을 올렸다가 받는데, 이때 화면에 변경값을 바로바로 보이고 싶다면

firestore로 작업하는것 뿐만이 아니라 리덕스로도 작업을 해야 사용자 입장에서는 변경된게 바로바로 적용되는걸로 보인다.

 

 

▶ CSS 라이브러리와 리액트

일단 이 주제.. 정확하게 무슨 주제를 말하길 바라는건지 아리송하다.

styled-component를 말하는건가? 싶어서 찾아보니 ui라이브러리들이 나오길래 이거..도 CSS라이브러리도 봐야하는건가?

그치만 난 그런거 안써봤다. materialUI라는걸 써보라는 이야길 몇번 들었는데 나는..부트스트랩도 그렇고..

그..모랄까..ㅎ..맘에 안든다. 걔네를 가져와서 내가 구상한 웹 디자인에 맞게 이것저것 수정하는것보다 그냥 내가 뼈대 쌓는게 편하고 빠르다. 물론 그 친구들이 낯설어서 그런..걸수도 있지만?!!!

 

여튼, styled-component에 대해 말해보자.

이 친구는 CSS in JS 라이브러리라는건데 말 그대로 자바스크립트 파일에서 CSS 작업을 할 수 있게 해주는것이고,

다른 라이브러리는 몰라도 styled-component는 그 안에서 sass도 사용할 수 있다!! 

sass의 편리성은 이것저것 있지만 이걸..쓴지 꽤..되어서.. 거의 다 까먹었기에..

이번 과제때 유용하게 써먹은 점은 태그 안에 너무 자잘자잘한게 있을 때 좋다.

예를 들어 버튼태그 안에 span을 넣어 작은 아이콘과 텍스트를 함께 넣었을때,

const ButtonCustom = styled.button`

    ...버튼 디자인 css...
    
    span{
        ...span 태그 디자인 css...
    }

`

이런 식으로 적으면 굳이 span을 따로 분리하지 않아도 쓸 수 있다! 

이게 생각보다 유용한게 버튼이나 input 등 작은 것들이 그 안에 또 다른 태그가 있을때 어느정도 일관성 있는 디자인을 할 수도 있고

코드가 길어지지도 않는다!

물론 너무 저거 하나에 몰아넣으면 관리하기 어려우니 적당히 분배해주는게 좋다.

이 외에도 props를 넣어서 어느때에는 width값을 변경한다던가 어느때에는 글자 색상을 변경할수도 있다.

 

꾸미는거 좋아하는 나에겐..정말 빛과 소금같다. 물론 css파일을 만들어서 연결시킬 수도 있지만? 

굳이 파일을 만들지 않고 바로바로 자바스크립트 파일 내에서 관리하는게 매력적이다..!!

 

 

 

회고 주제에 대한 내용은 이정도면 충분한듯?

주제 두개 다 리액트를 좀 배워보니 정말 편리한 녀석들이라는게 와닿는다.

처음에 배울때는 아 불편한데~ 싶었지만 아니다. 짱편하다.

 

여튼.. 이렇게 이번주차도 끝.

실은 이거 쓰고 다시 공부해야하지만 ㅋㅋ (내일부터...팀프로젝트일테니...!!)

충분히 쉬고 많이 자서 원기회복한만큼 달린다!!

그럼 20000.