이 글은 김민준(velopert)님의 리액트를 다루는 기술을 참조하였습니다. 목차 1. What is Context API? 2. Context 3. useContext 1. What is Context API? 비단 리액트 뿐만 아니라 기초 언어 공부를 할 때도 전역 변수에 대해서 배웠을 것이다. 함수의 매개변수로 데이터를 주고 받을 수도 있긴 하지만, 굉장히 자주 사용되는 데이터의 경우에는 보통 전역으로 설정해버린다. Context API란 그런 개념에서 출발한다. 각각의 사각형은 하나의 Component라고 생각하자. React에서 컴포넌트 간 데이터 교환은 props와 state를 통하여 부모 컴포넌트에서 자식 컴포넌트로 단방향으로 이루어진다. (굳이 알고리즘 측면으로 바라보자면 Top-down으..

이 글은 김민준(velopert)님의 리액트를 다루는 기술을 참조하였습니다. 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)의 이론 개념보다는 중첩 객체의 깊은 복사하는 방법에 대해 포스팅할 것이다. 목차 1. Spread Operator의 문제점 2. immer 1. Spread Operator의 문제점 프로그래밍 언어를 하나라도 배워본 사람이라면 얕은 복사와 깊은 복사에 대한 차이를 알 것이다. [React] 6. 불변성과 Side-Effect 이 부분을 건너뛰고 공부하려고 했는데, setEffect가 side-effect를 유발하기 위한 Hooks이라는 말을 듣고 의문이 들었다. 리액트는 side-effect를 방지하는 것이 원칙이라면서 이런 기능을 제공한다고? 그 jaeseo0..

이 글은 김민준(velopert)님의 리액트를 다루는 기술을 참조하였습니다. 목차 1. 많은 데이터 렌더링하기 2. Memorized Component 3. React.memo 4. useState Functional Update & useReducer 5. react-virtualized 1. 많은 데이터 렌더링하기 책에서 따라한 todo-app 기반으로 테스트를 해볼 것이다. 전체 코드는 괜히 올렸다가 저작권 관련으로 신고받고 싶지 않으니 따로 게시하지 않겠디. function createBulkTodos() { // 데이터 때려넣기 const array = []; for (let i = 1; i { const todo = { id: nextId.current, text, checked: false,..

이 글은 김민준(velopert)님의 리액트를 다루는 기술을 참조하였습니다. 목차 1. 비동기 작업 2. Callback Function 3. Promise Object 4. async/await keyword 5. axios로 API 호출 6. 참고 자료 1. 비동기 작업 synchronous(동기)란 요청과 응답을 받는 시기가 일치한다는 것을 말한다. 하지만 인터넷을 하면서 언제나 서버에 요청한 시간과 응답을 받는 시간이 일치했는가? 아니다. 요청을 처리하는 속도는 아무도 모른다. (종종 서버에 얼마나 연결되었는지 퍼센트로 로딩화면을 표시하는 곳이 있는데, 그냥 심리적인 효과 때문에 넣은 장치고 아무 의미가 없다. 계산할 수 없는 내용이기 때문.) 그럼 그동안 어플리케이션이 잠시 멈추게 되는데, 사용..