220401

👩🏻‍💻 Learn

얕은 복사(Shallow Copy)

중첩 객체에 대해 복사를 하지 못한다. 얕은 복사는 복사가 아니라 데이터가 있는 주소를 참조할 뿐이다. 즉, 같은 메모리의 주소를 사용하기 때문에 사본을 수정하면 원본에도 영향이 간다.

spread 연산자

spread 연산자를 이용해서 원본을 해치지 않고 복사본의 값을 바꿔줄 수 있다.

깊은 복사(Deep Copy)

얕은 복사와 달리 새로운 메모리 주소를 할당해준다.

JSON.parse() 안에 있는 문자를 객체나 배열로 바꿔준다
JSON.stringify() 객체를 문자열로 바꿔준다

둘을 사용해 깊은 복사를 할 수 있다.

하지만 속도가 느려서 많이 사용하지는 않고 대신 lodash 라이브러리의 clone deep 을 이용한다.

const

const 에 객체를 선언하면 주소가 저장된다. 그래서 const로 선언된 변수에 새롭게 할당할 수는 없지만 안에 있는 내용물은 바꿀 수가 있다.

lodash

yarn add lodash 로 라이브러리 설치 후 import _ from 'lodash' 해서 사용한다.
_ 로 import 해오는 건 관례! lodash기능이 많아서 굳이 이름으로 불러오지 않는 것 같다.
_.cloneDeep() 이런 식으로 사용하게된다.

infinite-scroll

인피니트 스크롤이란 말 그대로 끝나지 않는 스크롤이다. 요즘 SNS 를 떠올려보면 이해하기 쉽다. 데이터가 존재하는만큼 스크롤이 계속 생성된다.

yarn add react-infinite-scroller 설치
yarn add @types/react-infinite-scroller --dev 타입스크립트 버전도 같이 설치해주면 타입 오류가 나지 않는다.

<InfiniteScroll
    pageStart={0}
    loadMore={loadFunc}
    hasMore={true || false}
    loader={<div className="loader" key={0}>Loading ...</div>}
>
    {items} // 여기에 인피니트 스크롤을 적용시키고 싶은 데이터를 넣어준다
</InfiniteScroll>

인피니트 스크롤을 사용할 때 스프레드 연산자의 원리를 적용해서 데이터를 불러올 수 있다.

// spread 연산자 사용 X
const a = [1, 2, 3]
const b = [4, 5, 6]
const c =[a, b] //[[1,2,3],[4,5,6]]

// spread 연산자 사용 O
const a = [1, 2, 3]
const b = [4, 5, 6]
const c =[...a, ...b] //[1,2,3,4,5,6]]

spread 연산자를 적용해서 댓글에 댓글을 계속해서 로딩해오게끔 만들 수 있다.

fetchBoardComments: [...prev.fetchBoardComments, ...fetchMoreResult.fetchBoardComments]
		// fetchBoardComments에 저장된 이전 데이터   // fetchMore를 통해 받아올 새로운 데이터

📝 Review

수업을 듣기 시작한지도 벌써 3주가 흘렀다. 벌써 4월 1일이라는게 조금 믿기지가 않는다. 그래도 처음 시작했을 때보다 어떤 식으로 코드를 짜야하고 데이터가 어떻게 이동하는지 조금 눈에 익은 것 같다. 물론 아직 갈 길이 멀지만... 개인적으로 TIL을 하루의 모든 일과를 끝내고 정리하는 느낌으로 적고 있는데 집에 오는 시간이 늦어지다 보니 자꾸 하루가 넘어간다. 하지만 나의 하루는 잠들기 전까지는 끝나지 않으니까...

이제 주말동안 입력한 댓글을 수정을 구현하는 일만 남았다. 페이지네이션이랑 인피니트 스크롤도 쉽지 않았는데 댓글 수정은 지금까지 했던 것들 중에서 제일 까다로운 것 같다. 지금 뭘 잘못 건드렸는지 컴포넌트를 나누다가 댓글들이 아예 보이지 않는 상황이라 몹시 당황스러운... 오늘 끝내고 자고 싶지만 알바를 가야하는 탓에 일단은 여기서 마무리를 해야할 것 같다.

🔥 Will

• To do list 체크 잊지 말기
• 댓글 수정창 구현하기
• 레이아웃 구상하기
• 오타 줄이기