WIL 4주차
📖 WIL 4주차
🌞 4주차 스케쥴
이번 주차는 주특기 숙련 주차로 저번 입문주차 개인과제인 My Todo List 를 redux,react-router-dom,styled-components을 이용하여 다시 만드는 것이다.
- todos 데이터는 redux 를 사용하여 전역으로 상태를 관리한다. (Ducks 패턴으로 구현).
- react-router-dom 을 이용해 상세페이지를 만들고 - Todo의 ID,제목,내용을 보여야하며
이전으로버튼을 만든다. - styled-components 을 이용하여 CSS-in-JS 방식을 통해 제작한다.
🌞 회고
이번 주차의 가장 중요한 부분은 바로 리덕스...🐤 과제를 발제한 금요일에는 제공된 리덕스 학습자료를 2~3번 읽고 따라해보고 글로는 상태관리의 흐름을 이해하기 쉽지않아 그림도 그려가며 공부했다. 그렇게 리덕스의 상태관리 흐름과 사용법 그리고 덕스구조에 대해 주말까지 여러번 숙지하고 월요일부터 TodoList를 제작했다. 역시나 실제로 적용시키는 문제는 꽤나 어려웠다. 일주일이 지난 지금 코드를 돌이켜보면 참 간단하고 쉬워보이는데 이 코드를 구현하려 하루 종일 고생했던거 생각하면..😫 누군가 알려주는게 아니라 스스로 부딪혀야 한다는게 그 과정에선 잘못된 길을 가기도 하고 좌절도 느끼지만 이렇게 돌이켜 보면 그 덕분에 완전히 내것이 된거같은 기분이다. 리덕스를 써보고 느낀점은 굳이 바로 아래 자식컴포넌트에게 state를 줄 때 (전역적으로 사용할일이 없을때)에는 그냥 props 로 넘겨주는게 더 편하고 빠른 것 같다. 복잡한 리덕스에 워낙 고생을 했더니 react-router-dom 을 이용해 상세페이지를 만드는 것은 상대적으로 쉽게 느껴졌다. useNavigate를 사용하여 state 를 넘기고 useLocation을 이용여 받는 것으로 구현할 수 있었다.
또 이번 주차의 요구사항인 styled-components를 이용하였는데 저번 TodoList 는 폴더구조와 css import 방식이 정해져 있었기에 styled-components는 처음 사용해보는 것이였다.
특히 요구사항을 지키기위해 100% CSS-in-JS 방식만을 사용하여 전부 디자인하였다. 사실 이번 프로젝트에서 가장 공들인 부분이 css이다. 🎨 TodoList에 귀찮은듯 작성하는 것처럼 UI 를 귀엽게 낙서같은 느낌과 포스트잇으로 만들었다.
styled-components는 className 을 붙히지 않아도 돼서 깔끔해보이고 css 문법을 그댈 사용하기에 scss 문법 적용 등 빠르게 작업이 가능하고 재사용성도 훌륭하다. 또한 컴포넌트 이기 때문에 props를 전달받아 조건부 스타일링도 가능하다.
여전히 css를 한번에 작성하고 import 해오는 방식이 익숙하지만 앞으로도 styled-components 를 사용하는 습관을 가져야겠다.
⛅ useState 여러개의 input 관리
위쪽의 경우 두개의 input을 각각의 useState를 사용해 저장한다. 아래쪽의 경우 두개의 input 을 하나의 useState에 객체로 저장한다. 이때 저장할때에도 구조분해할당을 사용하고 꺼내쓸 때에도 구조분해할당을 써야한다. (캡쳐에선 꺼내쓸때 구조분해할당을 하지않고 input.value 로 접근) 또한 오른쪽의 경우 input의 속성으로 name을 지정해줘야한다. 위와 오른쪽 어떤 방법이 더 나은 방법인지 고민이나 보다 간결하고 직관적인 위쪽 코드를 최종적으로 사용하였다.
🌳 리액트 State, Props, 리렌더링 발생 조건
https://velog.io/@leejpsd/State-Props-리렌더링-발생-조건
리액트의 기본인 State, Props, 리렌더링 발생 조건에 대해 정리하였으며 따로 포스팅하였다.
🌳 Redux란 ?
https://velog.io/@leejpsd/Redux란
이번 주차에 핵심인 Redux에 대해 정리하였으며 따로 포스팅하였다.
🌳 JavaScript의 동기, 비동기 ?
https://velog.io/@leejpsd/동기와-비동기
이번주 나의 튼튼한 토양을 위해 자바스크립트의 동기와 비동기에 대해 공부하였다. 항해에서 제공된 문서도 읽어보고 공식문서도 읽고 했지만 유튜브에 정말 좋은 자료가 있어서 모든 영상을 두번씩 돌려보며 동기와 비동기에 대해 완전히 익숙해지도록 공부하였다. 앞으로의 프로젝트에 꼭 필요한 공부였기에 뿌듯하다.