리액트의 렌더링 순서를 결정짓기 위해서 리액트 내부동작과 아키텍쳐를 이해해야합니다. 리액트의 최신 버전은 18버전이지만, 핵심 아키텍쳐가 변경된 버젼은 16버젼의 fiber 입니다. 16버전 이전의 리액트는 stack 아키텍쳐를 사용하고 있었습니다. 스택 자료구조는 LIFO 방식으로 먼저 삽입된 데이터가 가장 마지막으로 접근할 수 있습니다. 맨 아래에 필요한 데이터가 있다면 위에 데이터까지 꺼내야하니(= 렌더링) 상당히 비효율적입니다. 그래서 도입된 것이 fiber[파이버] 아키텍처입니다. 새로 도입된 fiber 아키텍처는 hook이 LinkedList 형태로 연결된 자료구조입니다. setState()는 어떻게 state를 변경할까? https://github.dev/facebook/react/blob/..
https://github.com/Seongho0503/Samals GitHub - Seongho0503/Samals: [세이멀스] 멸종위기동물을 위한 NFT 기부 플랫폼 [세이멀스] 멸종위기동물을 위한 NFT 기부 플랫폼. Contribute to Seongho0503/Samals development by creating an account on GitHub. github.com 리팩토링의 필요성을 느끼다. 작년 하반기 프로젝트 중에 아쉬웠던 팀 프로젝트가 있어서 깃허브 레포지토리에 방치된 상태로 있었다. DB와 Back-end, Front-end는 EC2 서버가 내려가서 프론트만 로컬로 접속이 되었고 리팩토링을 하려면 APi 등 여러 경로를 수정해야했다. 특히 이 프로젝트는 Web3 기반의 NFT ..
📌 일기장 만들기 (10) - 최적화2 (컴포넌트 재사용) : React.memo ☑️ 컴포넌트 렌더링 컴포넌트 트리 부모 : App 컴포넌트 자식 : CountView 컴포넌트와 TextView 컴포넌트 state : count와 text prop : count와 text 순서대로 코드를 수행하면서 어떤 컴포넌트들이 업데이트되는지? 1) setCount(10)이 실행 2) App 컴포넌트의 count state 변화 3) App 컴포넌트 state 업데이트되면서 리렌더링 4) 자식 컴포넌트인 CountView 또한 리렌더링 연산 낭비 : TextView는 text state가 바뀐게 아니므로 리렌더링될 필요가 없음 (App 컴포넌트가 업데이트되었다고 해도 TextView 컴포넌트가 받고 있는 Prop인..
📌 일기장 만들기 (9) - 최적화1 (연산결과 재사용) : useMemo : 어떤 값이 변하지 않는 한 연산 하지 마! ☑️ 연산 결과값을 재사용하는 방법 ☑️ Memoization 기법 프로그래밍 기법에 가까운 이야기 이미 계산해본 결과를 기억해 두었다가 똑같은 계산을 시키면 다시 계산하지 않고 그냥 답만 반환하는 방법 포인트 : A라는 문제를 우리가 해결했다는 것이 포인트가 아니라 이 A라는 문제를 풀고 그 답을 외웠다, 기억했다라는 행위 자체에 있음 이 문제에 대한 답을 찾은 적이 있고, 그 답을 또 기억하고 있다면 그냥 기억해 둔 답을 적기만 하면 되는데 시간 아깝게 굳이 이 문제를 다 계산하고 그런다면 낭비..! 이런 상황을 Memoization을 이용해서 연산 최적화를 위해 이 문제에 대한 ..
📌 React Developer Tools ☑️ React Developer Tools(RDT) 활용하기 크롬 > 확장 프로그램 검색 > React Developer Tools(RDT) > 확장프로그램에 추가 ☑️ 기본 설정 ☑️ 개발중인 프로젝트에서 확인하기 크롬에 추가 시 이렇게 나옴 개발자도구(F12)를 열어서 RDT Component 확인 설정에서 Highlight updates when components render 체크하면 컴포넌트가 렌더중일 때 노란색/청록색 테두리 표시가 나타남 일기 컴포넌트를 수정하면 hooks의 state가 바뀌는 것을 확인할 수 있음 분명히 Props를 줬는데 왜 없다 그러지? State가 바뀌는 걸 어떻게 확인하지? 이런 것들을 해결할 때 도움됨
📌 일기장 만들기 (8) - API 호출하기 : useEffect x fetch ☑️ React에서 API 호출하기 컴포넌트가 Mount하는 시점(등장)에 API를 호출 자바스크립트의 내장함수인 fetch를 사용하여 API 호출 API의 응답 데이터를 App 컴포넌트가 가지고 있는 일기 데이터인 dataState에 저장해서 일기 데이터의 초기값으로 자동 설정하는 기능 만들기 ☑️ free fake API 활용 JSONPlaceholder > Resources Comments : JSON 형태로 생긴 객체 배열 아이템 API URL 복사 [ { "postId": 1, "id": 1, "name": "id labore ex et quam laborum", "email": "Eliseo@gardner.biz"..
📌 일기장 만들기 (7) - Lifecycle 제어 : useEffect ☑️ 리액트 라이프 사이클 관리/제어 Lifecycle (생애주기) 사전적 정의 : 시간이 지나면서 변화하는 개인의 삶의 일정한 단계를 의미 영유아-아동기-청소년-청년-성인-노년 사람은 생애 주기별로 각각 하는 행동과 일이 다르다 (그 시기에 따라 다른 욕구 = 하고싶은 게 다르다) 예 : 청소년기 - 게임, 청년 - 내 집 마련, 성인기 - 더 큰 집 마련 (이런 식으로 욕구가 각각 다르기 때문에 생애 주기를 나눠놓은 것이다) 소프트웨어 개발에서의 생애 주기 인간의 탄생 그리고 죽음과 유사하게 어떤 프로그램이 실행되고 종료되는 과정을 나타내기 위해서 이런 단어를 자주 사용하게 된다 소프트웨어 개발 수명주기(Software Deve..
📌 일기장 만들기 (6) - UPDATE ☑️ UPDATE 리스트 데이터를 동작으로 수정하기 수정하기(수정취소/수정완료) 기능 추가 🛠️ 복습 삭제하기 함수명, Props 수정(onDelete > onRemove)을 통해서 복습 App 컴포넌트 > DiaryList 컴포넌트 > DiaryItem 컴포넌트 컴포넌트 트리 전역에 공급되는 함수명, Props을 바꾸면 굉장히 불편할 수 있음 (나중에 해결방법 배울 예정) // src/App.js const onRemove = (targetId) => { console.log(`${targetId}가 삭제되었습니다`); const newDiaryList = data.filter((it) => it.id !== targetId); //console.log(newD..