본문 바로가기

꼬리에 꼬리를 무는 코딩11

2022.10.01 꼬꼬코 immer 라이브러리 import produce from 'immer'; const nextState = produce(originalState, draft => { draft.somewhere.deep.inside = 5; }) 1. (문제) 만약 깊이가 100 정도 되는 객체 혹은 배열이 있다고 가정하면,, 너의 불변성을 지키며 업데이트 하는 것은 쉽지 않을 것 가타.. 2. (해결) = immer 라이브러리 사용! produce 함수는 두 가지 파라미터를 받는다. 첫 번째 파라미터는 수정하고 싶은 상태, 두 번째 파라미터는 상태를 어떻게 업데이트할지 정의하는 함수이다. 이를 통해 쉽게 불변성을 유지하며 업데이트를 할 수 있게 되었다! 2022. 10. 2.
2022.09.30 꼬꼬코 react-virtualized 를 사용한 렌더링 최적화 1. react - virtualized 라이브러리란? windowing 라이브러리! windoing이란? 주어진 시간에 목록의 부분 목록만 렌더링하며 컴포넌트를 다시 렌더링하는 데 걸리는 시간을 줄이는 기법! 예를 들어 설명하면, 데이터각 100개가 있다면, 한 화면에 100개가 다 보이지는 않을 것이다. 그렇다면, 이 100개를 모두 렌더링할 필요가 있을까? 당연히 No 다. 그렇다면 지금 당장 사용자에게 보여져야 하는 부분만 렌더링을 함으로써 시간을 단축시킬 수 있고, 이것을 가능케 하는 것이 react-virtualized 이다. 2. 어떻게 사용하는데? 1. 먼저 리스트의 아이템 하나하나를 렌더링해주는 함수를 다시 짜야 한다. //책 '리액트를 다루는 기술' 속 코드를 참고하였습니다. const.. 2022. 9. 30.
2022.09.29 꼬꼬코 React.memo 를 사용한 컴포넌트 성능 최적화 1. React.memo 란? 컴포넌트의 props가 바뀌지 않았다면, 리렌더링하지 않도록 설정하는 것! 2. React.memo 의 사용법 컴포넌트를 만들고 나서 감싸주기만 하면? 끝! const TodoListItem = ({ todo, onRemove, onToggle }) => { (...) }; export default React.memo(TodoListItem); -> todo, onRemove, onToggle 의 값이 바뀌지 않는 한, TodoListItem 은 리렌더링되지 않는다. But,, 여기서 끝이 난 게 아니다. onRemove 와 onToggle 함수는 배열 상태를 업데이트하는 과정에서 최신 상태의 todos 를 참조하기 때문에, 만약 todos 배열이 업데이트될 경우, onR.. 2022. 9. 29.
2022.09.28 꼬꼬코 전개 연산자(...문법)와 얕은 복사(shallow copy) 1. 전개 연산자(...문법)를 사용하여 객체나 배열 내부의 값을 복사할 때는, 얕은 복사(shallow copy)를 하게 된다. 얕은 복사란? Call by Refrence~ 즉 주소값만 복사하여 레퍼런스 변수가 서로 같은 객체나 배열을 가리키게 만드는 것! 2. 얕은 복사를 하게 되면, 가장 바깥쪽에 있는 값만 복사된다. 3. 따라서 업데이트하고 싶은 값의 내부의 값이 객체 혹은 배열이라면, const todos = [{ id : 1, checked: true}, { id : 2, checked: true }]; const nextTodos = [...todos]; 내부의 값을 !!따로!! 복사해 주어야 한다. nextTodos[0] = { ...nextTodos[0], checked: false /.. 2022. 9. 28.
2022.09.27 꼬꼬코란 무엇인가? + C언어 Int 배열의 초기화와 메모리 할당 1. 꼬꼬코의 목적: TIL 은 오늘 하루 배운 걸 몽땅 정리하다 보니, 개발 관련 til 을 모아 보기에 나빠서 새롭게 카테고라이즈해 보았다. + 매일 매일 조금씩이라도 개발 공부하는 트리거를 만들기 위해! 2. 꼬꼬코란 무엇인가? 개발 공부를 하다보면 피상적으로 알고 지나치는 것들이 많은데, 이런 것들에 대해 잠시 멈춰 깊이 고민해 보고, 그에 대한 답을 정리하는 곳이다. 바쁘게 살다보면 지나쳐 버리는 중요한 지식들을 조금씩 짬을 내어 채워가는 노력을 기록하는 공간이다. 3. 그래서 오늘의 꼬꼬코는 오늘 새벽까지 나를 잠 못 들게 만들었던 컴구 과제에서 생긴 질문들에 대한 자문자답 기록이다. 결국 해결을 했고, 무사히 제출 완료했다 (행복) 1. Int 배열에서, 빈 배열을 만들 수 없는 이유는 무엇.. 2022. 9. 27.

티스토리툴바