React에서의 데이터 흐름
- React에서는 단방향 데이터 흐름을 지키고 있으며, 하향식의 방식으로 데이터가 전달됨
- 데이터(상태) 부모 컴포넌트에서 자식 컴포넌트로 props의 형태로 전달딤
State 끌어올리기
- 자식 컴포넌트에서 부모 컴포넌트로 부터 상태변경함수를 전달 받아, 부모의 상태를 변경시킬 수 있음
- 단방향 데이터 흐름을 지키면 효율적인 상태변경을 통해 데이터 활용을 위해 사용됨
Effect Hook
Side Effect vs Pure function
side effect
: 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우
pure function
: 함수의 입력만이 함수의 결과에 영향을 주는 함수
React 컴포넌트의 props & states의 동작 자체에서는 side effect가 발생하지 않지만, api, ajax를 사용하는 경우 side effect에 노출됨
++ 관련 질문
Q. Math.random()은 순수 함수가 아닙니다. 왜일까요?
A. 순수함수의 조건으로 같은 인자를 전달할 경우 같은 결정을 보장해야하지만, Math,random()은 난수적인 결과를 반환하기 때문
Q. 어떤 함수가 fetch API를 이용해 AJAX 요청을 한다고 가정해 봅시다. 이 함수는 순수 함수가 아닙니다. 왜일까요?
A. AJAX 요청시 서버와의 통신은 서버의 상태, 네트워크등의 이유로 원하는 콘텐츠가 페이지에 적용될 수도, 서버와의 통신 실패, 잘못된 데이터등의 결과가 발생할 수 있기 때문에 같은 결과를 보장하지 못하기 때문
Effect Hook이란?
: 페이지가 새롭게 랜더링 되는 경우(state 변경시, 첫 랜더링시) 발생되는 side effect를 관리할 수 있게 해줌
- useEffect({side effect}, {depency array})을 사용해 side effect를 관리함
- 첫 번째 인자로 관리할 함수(작업)을 넘겨주고, depency array 배열로 state 값들을 넘겨주는데 이는 side effect 발생 조건으로 해당 states 변경시 side effect 작업이 동작함
side effect동작 컴포넌트 내부 vs 외부
- 내부: 데이터 전체를 모두 한번만 전달 받고, 필요한 데이터를 내부에서 처리해 추출하는 방법
=> 전체 데이터를 받아야 함으로 메모리적으로 불리하지만, api 요청 횟수가 적음
-외부: 필요한 데이터를 서버에 추출한해 받아오도록 요청해 사용,
=> 필요한 데이터만 받아오며, 처리 또한 클라이언트는 구현할 필요가 없어 클라이언트가 가벼워지지만, 해당 부담을 모두 서버가 감당해야 함
공부 일기장