항해99 19일차 TIL

오늘한것

1. 과제 리팩토링

2. 매니저님 코드리뷰

3. 리덕스 강의 듣기

 

오늘은 만들었던 todolist를 매니저님께 보여드렸는데 잘못된 점을 짚어주셨다.

확실히 엄청나게 도움이 되었다!  

 

1.styled component

styled component를 사용할 때, 용도에 맞는 태그를 써야하는데 나는 거의 div로 했다. 사실 적용하는데 급급해서 어떤태그를 사용할지 크게 생각하지 않은것 같다. 이제 배웠으니 시맨틱하게? 스타일드 컴포넌트와 태그를 설정해서 써야겠다.

 

2. 새로고침

리액트에서 새로고침을 하면 리덕스에 저장된 state가 날아가게 된다. 이것때문에 내가 뭔가 잘못한줄 알고 한참 코드를 봤다. 아무튼 이런걸 해결하기 위해 리액트에서는 새로고침이 일어나지 않도록 이동하는 링크를 따로 만들어주고, a태그 대신에 <Link>를 사용한다. 

또 라이브러리를 이용하는 방식이 있는데, redux-persist라는 것이다. 그런데 지금은 알아만두라고 하셨다.

나중에는 백엔드에서 데이터를 저장하기 때문에 특별한 상황에서만 사용할 것 같다.

팁) Link 태그는 a태그로 스타일링 할 수 있다.

 

3. dispatch 

과제에서는 router로 detail이라는 새로운 페이지로 이동하는 부분이 있다.

이부분에서는 스토어에서 저장된 todos로 todo를 한번만 dispatch하면 되기 때문에 useEffect를 사용하려 했다. 

그런데 url에 parmeter를 가져와서 dispatch를 하는 과정에서 리렌더링이 되어 무한 루프가 걸리게 되었다.

예상)  id 값을 가져옴 => id를 이용하여 dispatch => 컴포넌트 렌더링 => 다시 id => dispatch => 렌더링 =>...

이걸 고치는 법을 알려주셨는데...다시 할때 뭔가를 놓쳤는지 안된다...

자고 일어나서 다시 고쳐봐야겠다.

 

4. 자바스크립트는 느슨한 타입의 동적언어

dispatch로 보낸 action의 프로퍼티 값과 저장된 배열의 요소의 프로퍼티 값이 일치한 요소(객체)를 리턴하는 리듀서가 있다. dispatch를 한 후 저장된 데이터를 조회해보니, 자꾸 빈 객체를 반환했다. 

나는 그동안 ===으로 자료형까지 프로퍼티 값을 비교해왔다. action의 id도 확인해보니 string인것을 보고 == 으로 바꿔서 출력해보니 제대로된 페이지가 나왔다.

그러나 ===으로 자료형까지 비교하는것이  비교결과가 명확하기 때문에 에러가 발생할 확률을 줄어 준다고 한다. 때문에 ===를 이용하기 위해 parseInt를 이용했다.

어찌보면 금방 찾을 수 있었는데, 위에 3번 문제와 맞물려서 애먹었던 것 같다.

 

 

이번주도 마무리 되어간다..

배운것을 이용하는 것은 생각보다 금방 적용을 했던 것 같다. 그러나 배경지식이 부족한건지, 깊게 파는 경험이 부족한 것 같다. 동작 원리를 좀 더 생각해보며 코드를 짜야겠다.

 

 

다음 목표 및 개선해야할점

- 주 1회 알고리즘 풀이( 평일에는 힘들것 같으니 주말을 이용)

- 드림코딩 javascript 문법 promise, async await 

- react 주특기 전 추천영상 시청(CSS grid, Grid Garden, 코딩앙마- 자바스크립트 DOM & EVENT 구조)

- component 잘게 쪼개기,  custom hook 만들어보기

- react hook 공부

- WIL 쓰기