[뒤늦게 정리하는 패캠] React & Redux로 시작하는 웹 프로그래밍

01

key와 리렌더링 알아보기

 

key값은 해당 요소에만 들어간 유일하고 고정된 값이다.

 

(랜덤으로 요소의 순서를 바꾸는 상황)

key값이 없는데 리렌더링 되는 경우

요소의 글자가 바뀐다고 판단해서, 모든 글자를 리렌더링하고, 리렌더링 되더라도 포커스 위치가 그대로 있는다.

 

key값이 있는데 리렌더링 되는 경우

요소의 위치가 바뀐다고 판단해서, 위치를 재배치한다. 포커스가 해당 key 요소에 고정되 따라다닌다.

 

useState로 key값을 제일 먼저 비교하고 바뀐 부분만 리렌더한다.

4개의 배열이 배열에 들어있다.

 

todos의 0번째 배열이 items 기본값으로 들어가 있고, 배열들을 1초 마다 리렌더링 한다.

 

 

 

---

02

상태 끌어올리기

state lifting

 

형제요소끼리 서로 상태를 감지할 수 없기 때문에,

부모가 감시해서 컨트롤 할 수 있게 state lifting이라는 개념을 사용한다.

 

1. React.useState()는 Body 내부에서만 사용할 수 있기 때문에 App 내부에 선언한다.

2. handleIdChange, handlePwChange는 Id 값과 Pw 값을 set 해주는 기능이기 때문에 App 내부에 선언한다.

(id, pw const가 함수 호이스팅으로 App 밖으로 나가지 못 하니, handle함수들이 밖에 선언되면 동작하지 않는다.)

 

선언한 함수가 어떻게 전달되서 동작하는지 (엄청 헷갈렸던 부분)

 

<Id handleIdChange={handleIdChange}>

Id라는 커스텀 컴포넌트에 handleIdChange라는 props가 handleIdChange라는 값을 받아서

 

const Id = ({ handleIdChange }) => { ... <input onClick={handleIdChange} /> ...};

선언된 Id 커스텀 컴포넌트 매게변수를 통해서 내부에 전달한다.

 

왜인지 아직 모르겠지만, 커스텀 컴포넌트를 App 내부에 선언하면 input이 제대로 동작하지 않는다.

 

---

 

03

데이터 Fetch (API call)

서버에서 데이터를 가져온다.

(그 데이터를 프론트에서 보여주게 된다.)

ajax, axios 등 다양한 방법으로 가져올 수 있다.

 

로딩/데이터/에러 세 가지 상황이 있다.

Fetch 기본 코드

** 주의사항 **

Api 데이터를 가져오기 전에 어떻게 처리할지 적어주지 않으면 코드 동작이 하지 않는다.

한마디로, 로딩중일 때 처리할 코드가 있어야한다.

 

map으로 값을 return 할 때, 왜 {} 가 아닌 () 가 들어가는지 모르겠다.

 

 

이 전 시간에 배운 boundary가 아닌 promise라는 문법으로 에러를 관리한다.

 

** 주의사항 **

error가 발생했을 때 코드를 로딩중일 때 코드 전에 넣어줘야한다.

그렇지 않은 경우, 계속 Loading...만 나타나있는다.