Code States 35일차 - React 데이터 흐름의 이해와 비동기 요청 처리

이번 코드스테이츠 챕터는 제목부터 길군

---

React 데이터 흐름

컴포넌트로 생각하기

React의 개발 방식의 가장 큰 특징은 컴포넌트 단위로 시작한다는 것이다. 컴포넌트를 만들고, 다시 페이지를 조립해 나간다.

즉, 상향식(bottom-up)으로 앱을 만든다. 테스트가 쉽고 확장성이 좋기 때문이다.

 

데이터는 위에서 아래로 흐른다

컴포넌트는 바깥에서 props를 이용해 데이터를 인자(argument) 혹은 속성(attributes)처럼 전달받을 수 있다.

즉, 데이터를 전달하는 주체는 부모 컴포넌트 이다. 데이터 흐름이 하향식(top-down)이라는 것을 의미한다.

단방향 데이터 흐름(one-way data flow)이라는 키워드는 React를 대표하는 설명중 하나이다.

 

데이터 상태

모든 데이터를 상태로 둘 필요는 없다. 상태는 최소화 하는 것이 좋다. 상태가 많아질수록 애플리케이션은 복잡해진다.

데이터를 상태로 두어야 하는 결정하는 경우

• 부모로부터 props를 통해 전달되지 않는다.
• 시간이 지나도 변한다.
• 컴포넌트 안의 다른 state나 props를 가지고 계산이 가능하지 않다.

상태 위치

특정 컴포넌트에서만 유의미하면, 특정 컴포넌트에만 둔다.

여러 컴포넌트가 영향을 받는다면 공통 소유 컴포넌트에 둔다.

두 개의 자식 컴포넌트가 하나의 상태에 접근하려면 두 자식의 공통 부모 컴포넌트에 둔다.

 

역방향 데이터

상태를 관리하다보면 하위 컴포넌트에 의해 부모 컴포넌트의 상태가 변해야한다. 이를 해결할 수 있는 키워드가 "State 끌어올리기(Lifting state up)"이다. 상태를 변경시키는 함수(handler)를 하위 컴포넌트에 props로 전달해서 해결할 수 있다.

 

State 끌어올리기는 공식문서를 통해 정리하도록 하겠다.

---

Effect Hook

Side Effect (부수 효과)

함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 Side Effect가 있다고 한다.

let foo = 'hello';

function bar() {
	foo = 'world';
}

bar(); // bar는 Side Effect를 발생시킨다.

Pure Function (순수 함수)

순수 함수는 오직 함수의 입력만이 결과에 영향을 주는 함수이다. 함수 입력이 아닌 다른 값이 함수의 결과에 영향을 미치는 경우, 순수 함수라고 부를 수 었다. 또한 입력으로 전달된 값을 수정하지 않는다.

function upper(str){
	return str.toUpperCase(); // toUpperCase 메소드는 원본을 수정하지 않는다.(Immutable)
}

upper('hello') // 'HELLO'

순수 함수에는 네트워크 요청과 같은 Side Effect가 없다. 순수 함수의 특징 중 어떠한 전달 인자가 주어질 경우, 항상 똑같은 값이 리턴됨을 보장한다. 그래서 예측 가능한 함수이기도 하다.

React의 함수 컴포넌트

React 함수 컴포넌트는 props가 입력으로, JSX Element가 출력으로 나간다. 그 어떤 Side Effect도 없고, 순수 함수로 작동한다.

function SingleTweet({ writer, body, createdAt }){
	return <div>
    		<div>{writer}</div>
        	<div>{body}</div>
        	<div>{createdAt}</div>
	</div>
}

하지만 보통 React 애플리케이션을 작성할 때에는, AJAX 요청이 필요하거나, LocalStroage 또는 타이머와 같은 React와 상관없는 API를 사용하는 경우가 발생한다. 이는 React의 입장에서 전부 Side Effect이다. Reat는 Side Effect를 다루기 위한 Hook인 Effect Hook을 제공한다.

Effect Hook

Effect Hook은 언제 실행 되나

• 컴포넌트 생성 후 처음 화면에 렌더링(표시)
• 컴포넌트에 새로운 props가 전달되며 렌더링
• 컴포넌트에 상태(state)가 바뀌며 렌더링

Hook을 쓸 때 주의할 점

• 최상위에서만 Hook을 호출한다.
• React함수내에서 Hook을 호출한다.

---

개념에 대한 내용은 별로 없고 '이렇게 하는게 이거다'라는게 많다.

나중에 이것들도 따로 정리해야겠지...?