React 데이터 흐름
- One-way data flow(단방향 데이터 흐름), 하향식, 부모에서 자식으로 전달
- 데이터는 state(상태)로 관리, 최소화해야 함, 많아질수록 애플리케이션이 복잡해짐
- 부모로부터 props로 전달받으면 X
- 시간이 지나도 변하지 않으면 X
- 컴포넌트 안의 다른 state나 props를 가지고 계산이 가능하다면 X
- 하나의 state를 두 개 이상의 컴포넌트가 영향을 받는다면, 그 컴포넌트들의 공통적인 부모가 관리해야 함
State 끌어 올리기(lifting state up)
- 하위 컴포넌트의 이벤트(실행함수)가 부모의 상태를 바꾸는 상황
- 상태 변경 함수(handler)를 하위 컴포넌트에 props로 전달해서 해결(콜백 함수를 사용하는 방법과 유사)
- 상태 변경 함수가 정의된 컴포넌트와(부모), 상태 변경 함수를 호출하는 컴포넌트가(자식) 다름을 알 수 있다
- 즉, 부모는 자식의 데이터를 끌어올리기 위해 상태 변경 함수를 생성해서, 함수를 props로 전달하고, 전달 받은 함수에 데이터를 담아, 부모에 함수 실행을 요청한다
Effect Hook
- Side effect
- 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우
- React의 함수 컴포넌트는, props가 입력, JSX element가 출력, 순수 함수로 작동한다
- React 컴포넌트에서의 side effect가 발생하는 경우
- 타이머 사용(setTimeout), 데이터 가져오기(fetch API, localStorage)
- localStorage: 일종의 캐시(
- useEffect는 컴포넌트 내에서 Side effect를 실행할 수 있게 하는 Hook
- 주의사항: 최상위에서만 hook을 호출, React 함수 내에서 Hook을 호출
- Pure function(순수 함수)
- 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수
- 다른 값이 함수의 결과에 영향을 미치는 경우 순수함수라고 할 수 없다
- 입력으로 전달된 값을 수정하지 않는다
- 조건부 effect 발생 (dependency array)
- useEffect(함수, [])
- 두 번째 인자(종속성 배열, 또는 의존성 배열)로 빈 배열을 사용하면, 컴포넌트가 처음 생성될 때에만 effect함수가 실행된다
- 처음 단 한번만 외부 API를 통해 리소스를 받아오고, 더이상 API호출이 필요하지 않을 때에 사용할 수 있다.
- useEffect(함수)
- 두 번째 인자에 아무것도 넣지 않을 때에는, 기본 형태로 사용된다.
- 처음 생성 될 때나, props가 업데이트되거나, 상태(state)가 업데이트 될 때 effect함수가 실행된다.
- 두 방식의 차이점
- useEffect(함수, [])
| 데이터 처리 | 장점 | 단점 |
|---|---|---|
| 컴포넌트 내부 | HTTP 요청 빈도를 줄일 수 있다 | 브라우저의 메모리 내 데이터 증가로 클라이언트 부담이 늘어남 |
| 컴포넌트 외부 | 클라이언트가 필터링 구현을 생각하지 않아도 된다 | 빈번한 HTTP 요청으로, 서버가 필터링 등의 부담을 가져간다 |
- 클라이언트가 서버에 요청을 덜 보내는 방법
- Local Storage?
