[CS] 데이터 흐름의 이해 비동기 요청 Day-40

React에서의 데이터 흐름

React의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 점입니다.

컴포넌트를 만들고, 페이지를 조립해 나가는 것이 React의 특징입니다.

상향식(Bottom-Up)으로 앱을 만듭니다.

Bottom-Up (상향식)의 장점

• 테스트가 쉽고 확장성이 좋습니다.

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

즉 데이터를 전달하는 주체는 부모 컴포넌트가 됩니다. 데이터의 흐름은 (top-down)입니다.

데이터는 단방향으로 흐르고(one-way data flow)고 React를 대표하는 설명 중 하나입니다.

사용자 입력은 이벤트에 따라 얼마든지 변할 수 있습니다. 이것은 상태(state)입니다. 트윗 목록이 추가 또는 삭제될 여지가 없다면 사실 state로 둘 필요가 없습니다.

모든 데이터를 상태로 둘 필요는 없습니다. 상태는 최소화하는 것이 가장 좋습니다.

하나의 상태로 두 컴포넌트가 영향을 받는다면 공통 소유 컴포넌트를 찾아 그 곳에 위치해야 합니다.

역방향 데이터 흐름

• 부모 컴포넌트에서의 상태가 하위 컴포넌트에 의해 변하는 것을 역방향 데이터 흐름이라고 합니다.
• 하위 컴포넌트에서의 클릭 이벤트가, 부모의 상태를 바꾸어야만 하는 상황이 왔습니다. 이를 State 끌어올리기(Lifting State Up)이라고 합니다.

Side Effect

Side Effect (부수 효과)

함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 이야기 합니다.

let foo = 'hello';

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

bar(); // world 출력

Pure Function (순수 함수)

오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미합니다. 함수의 입력이 아닌 다른 값이 함수의 결과에 영향을 미치는 경우, 순수 함수라고 부를 수 없습니다.

function upper(str){
	return str.toUpperCase();
}

upper('hello'); // HELLO 출력

기타 (React의 함수 컴포넌트)

• setTimeout (타이머 사용)
• fetch API, localStorage (데이터 가져오기)