State 끌어올리기, Effect Hook / 이해도 점검

Section2. Unit 9. [React] 클라이언트 Ajax 요청 이해도 점검

 

Chapter1. React 데이터 흐름

React에서의 데이터 흐름, 단방향 데이터 흐름을 이해할 수 있다.

리액트에서 데이터는 위에서 아래로만 흐른다.

양방향이 될 수 없다.

 

 

어떤 컴포넌트에 state가 위치해야 하는지 알 수 있다.

상태가 변화하는 경우에만 state를 사용한다.

안그러면 관리해야하는 state가 많아지고 복잡해진다.

값이 갱신되어야하는 경우 (객체를 배열에 추가, 필터되는 경우 등)

 

State 끌어올리기의 개념을 이해할 수 있다.

state 갱신 함수를 하위 컴포넌트에 전달해서 하위 컴포넌트에서 호출한다.

갱신 함수가 담긴 함수를 정의하고 그 함수를 props로 하위 컴포넌트에 전달한다.

하위 컴포넌트는 그 함수를 호출해 사용한다.

그럼 상위 컴포넌트에 하위 컴포넌트에서 실행한 setstate 함수 값을 쓸 수 있다.

상태 변경 함수가 정의된 컴포넌트와, 상태 변경 함수를 호출하는 컴포넌트가 다름을 알 수 있다.

상태변경 함수는 부모 컴포넌트에, 호출하는 함수는 자식 컴포넌트에 있을 수 있다. 이렇게 state 끌어올리기 가능하다.

 

 

 

Chapter2. State 끌어올리기 (Lifiting State Up)

Side effect가 어떤 의미인지 알 수 있다.

부수효과. 순수함수가 아니고, 외부 값으로 부터 영향을 주거나 받는다.

console, DOM, Ajax, fetch 통신 등, 바깥으로부터 값을 가져오거나 내보내면 side effect가 발생하는 것이다.

예측 가능하고 부수효과를 줄이는 것이 프로그래밍에 필수적이다.

그래서 이 side effect를 한 데로 모으고 관리해줘야할 필요가 있다. 무조건 useEffect에 넣어주자.

그게 effect hook, useEffect이다.

 

React 컴포넌트를 만들 때 side effect로부터 분리해서 생각할 수 있다. (비즈니스 로직과 표현 영역 구분)

side effect가 발생하는 부분과 그렇지 않은 부분으로 나눌 수 있다.

외부로부터 json 데이터를 가져올 때, API를 사용할 때 처럼 Ajax 사용하는 컴포넌트를 side effect가 있는 컴포넌트로 관리해야 한다.

 

Side effect의 예를 들 수 있다.

API로 데이터 받아오기,

외부에 존재하는 뭔가를 바꾸는 것,

외부의 파일 사용,

쿠키 저장 등

 

Effect Hook을 이용해 비동기 호출 및 AJAX 요청과 같은 side effect를 React 컴포넌트 내에서 처리할 수 있다.

useEffect는 컴포넌트 안에서 side effect를 실행할 수 있게 해준다.

useEffect 안에서 side effect를 실행하는 것이다.

첫번째 인자에서 하면 된다.

useEffect 안에서 fetch 통신 하고 then으로 가져와 .json()해서 값을 사용한다.

그럼 비동기 통신 후 다시 렌더링이 되고 필요한 부분을 갱신할 수 있다.

 

 

Effect Hook에서의 dependency array 사용법을 이해할 수 있다.

종속성 배열은 Effect Hook에서 두번째 인자로 쓰인다.

배열에 들어가는 것은 특정 useState의 state로, 그 state 값이 갱신되면 useEffect 함수가 실행된다.

만약 이 배열을 비워두면 이 컴포넌트는 처음 마운트 될 때만 렌더링 된다.

 

 

컴포넌트 내에서 네트워크 요청 시, 로딩 화면과 같이 보다 나은 UI를 만드는 법을 이해할 수 있다.

로딩이 길어지면 사용자에게 좋은 사용경험을 주기 어렵다. 로딩 되고 있다는 것을 알려주기 위해 isloading을 사용하면 좋다.

{ isloading? <loadingIndicator /> :  <로딩페이지 />}