데이터 흐름
데이터 흐름: 단방향, 하향식(위에서 아래)
State 끌어올리기
state 끌어 올리기: 역방향 데이터 흐름 / 하위 컴포넌트에서의 클릭 이벤트가, 부모의 상태를 바꾸어야만 하는 상황에 사용 / 상태를 변경시키는 함수(handler)를 하위 컴포넌트에 props로 전달
Side Effect(부수 효과)
Side Effect: 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우
Pure Function(순수 함수): 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수
Effect Hook
useEffect(함수): 첫 번째 인자는 함수 / 해당 함수 내에서 side effect 실행
함수 실행 조건 (새롭게 컴포넌트가 렌더링 될 때 Effect Hook 실행)
- 컴포넌트 생성 후 처음 화면에 렌더링(표시)
- 컴포넌트에 새로운 props가 전달되면 렌더링
- 컴포넌트에 상태(state)가 바뀌며 렌더링
Hook 사용 시 주의할 점
- 최상위에서만 Hook 호출
- React 함수 내에서 Hook 호출
Effect Hook 조건부 실행
useEffect(함수, [종속성1, 종속성2, ...]): 두번 째 인자는 배열 / 해당 배열은 조건을 담고 있음 / 조건: 어떤 값의 변경이 일어날 때
단 한 번만 실행되는 Effect 함수: 빈 배열 넣기(useEffect(함수, []))
컴포넌트 내에서의 AJAX 요청
목록 내 필터링 구현 방법
- 컴포넌트 내에서 필터링: 전체 목록 데이터를 불러오고, 목록을 검색어로 filter 하는 방법
- 컴포넌트 외부에서 필터링: 컴포넌트 외부로 API 요청을 할 때, 필터링한 결과를 받아오는 방법 (서버에 매번 검색어와 함께 요청하는 경우)
AJAX 요청이 느릴 경우: 로딩화면 구현
참고 자료: https://codestates.notion.site/API-HTTP-8ad6e6b9288a49f2aa69b5d49e21139c
