투두리스트에서 마지막에 TOGGLE 버튼이 잘 먹지 않아서 고민했었는데 자면서도 계속 생각해서 그런지 결국 어떻게 구현하긴 했다.. 하하
깃허브에 올리면서 이번기회에 README.md 파일 작성을 한 번 해보기 위해서 구글링 해봤는데 생각보다 쉽게 작성할 수 있었다.
(https://github.com/KoreanCodingMachine/TodoList-React-)
오늘은 리액트만 공부하기도 빠듯했던 하루였던것 같다.
오늘 배운 내용을 되짚어 보면
1.컴포넌트 성능 최적화
2.immer 라이브러리 사용해보기
3.리액트 라우트 살짝 찍먹 정도인것 같다.
개인적으로 공부를 하면서 리액트를 다루는 기술 이라는 책이 좋은것 같아서 공식문서와 번갈아가면서 공부중인데 아직까지는 찐 개발자는 아니라서 그런지 책이 조금 더 친숙한 느낌이다. 사실 트러블 슈팅도 하고 마크다운까지 써보면서 리덕스까지는 볼 수 있을 것 같았는데 책에 있는 코드를 안보고 머리속으로 생각하고 코드를 구현해보는 시간을 많이 가지면서 생각보다 진도를 많이 나가지는 못했던것 같다. 그래도 책을 보지 않고 코드를 작성하는 연습을 많이 하는게 확실히 시간은 오래 걸리지만 머리속에는 더 오래 남는 것 같다.
우선 컴포넌트 성능 최적화에서 일전에 만들었던 투두리스트를 어떻게 성능 최적화 할 것인가? 에 대한 문제였는데 useCallback() hook으로 어느정도 해결 된 줄 알았더니 리액트 개발자 도구로 녹화를 해보니 랜더링에 소요되는 시간이 상당했었다. 또한 리렌더링도 빈번히 발생했느데
리액트에서 리렌더링이 발생하는 이유
1.자신이 전달받은 props가 변경될 때
2.자신의 state가 바뀔 때
3.부모 컴포넌트가 리렌더링될 때
4.forceUpdate 함수가 실행될 때 이다.
우선 내가 만든 투두리스트의 경우 App 컴포넌트의 state가 바뀔 경우 App컴포넌트가 리렌더링 되는 문제가 있고 App컴포넌트가 최상위 부모 컴포넌트 임으로 TOdoList 같은 자식 컴포넌트도 리렌더링 되는 문제가 계속해서 발생했다.
이에 대한 해결책으로
1.React.Memo사용하기
2.useState의 함수형 업데이트를 사용하기
3.useReducer 사용하기
4.react-virtualized를 사용한 렌더링 최적화
확실히 라이브러리가 대단한게 앞의 1,2,3의 방식보다 4의 방식이 확실히 성능 향상이 된게 눈에 띄었다...
immer
리액트에서 state는 불변성을 유지해야한다. 그렇기 때문에 불변성을 위해서 전개연산자를 사용하는등 번거로운 작업을 계속해서 해주어야하는데 특히 객체나 배열이든 단계가 싶어지면 코드가 가독성이 떨어지기 때문에 immer라이브러리르 사용하면 손쉽게 해결할 수 있다.
import produce from 'immer'
const nextState = produce(originalState,draft => {
draft.somewhere.deep.inside = 5;
})
produce 함수의 첫번째 파라미터는 수정하고 싶은 상태
두번째 파라미터는 상태를 어떻게 업데이트할지 정의하는 함수이다.
첫 번째 파라미터가 함수 형태라면 업데이트 함수를 반환한다.
const update = produce(draft => {
draft.value = 2;
})
const origianlState = {
value:1,
foo:'bar'
};
const nextState = update(originalState);
console.log(nextState) // {value:2,foo:'bar'}리액트 라우터
라우팅이란?
->사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미한다.
즉 페이지별로 컴포넌트를 분리하는것
라우트 시스템을 구축하기 위해 사용할 수 있는 2가지 선택지
1.리액트 라우터 (컴포넌트 기반으로 라우팅 시스템 설정)
2.Next.js (파일 경로 기반 , 리액트 라우터의 대안)
라우터 관련 기능은 서드 파티로 제공되기 때문에 , 많은 대안들이 있다.
브라우저의 History API를 사용하여 브라우저의 주소창의 값만 변경하고 라우팅 설정에 따라 또 다른 페이지를 보여준다.
spa
mpa(멀티 페이지 어플리케이션)
페이지를 로딩할 때마다 서버에서 css , js , 이미지 파일 등의 리소스를 전달받아 브라우저 화면에서 보여주는것
spa(싱글 페이지 어플리케이션)
대표적으로 리액트
뷰 렌더링을 사용자의 브라우저가 담당한다.
사용자와의 인터랙션이 발생하면 필요한 부분만 js를 사용하여 업데이트 하는 방식이다. 새로운 데이터가 필요하면 서버 API를 호출
즉 mpa와 다르게 한번만 html을 받아와서 웹 어플리케이션을 실행하고 필요한 데이터만 받아서 화면에 업데이트하는 것
내일은 라우터 부분을 더 깊게 공부해보고 관련된 hook들도 좀 정리해볼 생각이다. 그리고 axios를 사용하여 api와 어떻게 클라이언트에서 비동기통신을 하게되는지 공부해보고 시간이 남는다면 리덕스까지 공부해보자(리덕스 몇 번을 봐야 이해가 되냐 넌..)
