데이터 페칭
데이터를 비동기 방식으로 받아온 후에 데이터를 필요한 곳에 채우는 방식은 3가지가 있다.
- {data ? data.fetchBoard.writer : "로딩 중"}
- {data && data.fetchBoard.writer} (조건부렌더링)
- {data?.fetchBoard.writer} (옵셔널체이닝 - ES2020)
리액트 패턴
- 컨테이너/프리젠테이션 패턴(유명한 고전방식)
- 훅스 패턴(함수로 잘게 쪼개기! 최신 방식)
- 아토믹 패턴(버튼 하나, 인풋 하나 등 아주 작게 컴포넌트화 하기)
그 외
props
props는 부모(container)가 자식(presenter)에게 전달해줄 수 있고 자식은 부모에게 전달해주지 못한다. 리액트의 데이터 흐름은 단방향이라고 할 수 있다. (앵귤러는 양방향 구조라 자식도 부모에게 데이터를 전달할 수 있다.)
단방향 구조의 장단점
- 장점 : 규모가 커져도 데이터 흐름이 명확하다.
- 단점 : 자식 컴포넌트에서 부모 컴포넌트에게 데이터를 (쉽게)줄 수 없다(가능은 하다).
props는 무조건 객체형식으로 전달되어야한다.
컴포넌트는 단일 컴포넌트(일회성)와 공통 컴포넌트로 나눌 수 있다. 컴포넌트로 나누는 데에는 반드시 재사용 목적만 있는 것이 아니라 보기 편하게 작성하려는 의도도 있다.
import
한 파일 내에서 함수나 변수를 export로 작성하게 되면 다른 파일에서 이것들 중 여러개를 골라서 import 할 수 있다. 이때 중괄호({})를 사용한다.
export default로 내보낼 때에는 import 할 때 원래 모듈 이름이 아닌 다른 것으로 받아와도 상관없다. 이땐 중괄호를 사용하지 않는다.
import aaa, {bbb} from "위치"export와 export default가 같이 쓰인 경우엔 위와 같이 import 한다.
import * as 별명 from "위치"파일 내에 있는 export된 모든 모듈을 한번에 다 가져올 수 있다. 이땐 jsx 태그가 <별명.모듈이름>으로 작성되어야 한다.
