리액트는 인터페이스를 표현하는 최적화 및 간소화된 방법을 제공합니다. 또한 인터페이스를 컴포넌트, Props, 상태라 는 세 가지 핵심 개념으로 나누어 정리함으로써 복잡하고 까다로운 인터페이스를 쉽게 구축 할수있습니다. => 리액트를 효과적으로 활용하려면 모듈화된 사고방식이 필요
- JSX : XML과 유사한 구문을 사용하여 HTML을 자바스크립트에서 사용할 수 있게 해 주는 확장 문법
- 컴포넌트 : 리액트의 기본 구성 요소, 어떠한 입력값(Props)을 받아서 화면에 표시할 내용을 나타내는 리액트의 요소를 반환하는 함수
- Props : 리액트 컴포넌트의 내부 데이터를 의미, 상위 컴포넌트 내부에서 하위 컴포넌트로 전달할 때 사용
- 상태 : 컴포넌트의 라이프사이클 동안 값이 변할 수도 있는 정보를 담고 있는 객체
- 서버 사이드 렌더링 : 서버 사이드 렌더링은 사용자 요청에 응답하여 페이지 콘텐츠를 데이터 저장소나 외부 API의 데이터가 포함된 완전한 HTML파일로 생성
- 하이드레이션 : 서버에서 html 생성되어 클라이언트로 전송, 클라이언트에서 파싱하여 ui가 상호작용 하도록 연결 <- 이 과정을 하이드레이션이라고 한다 (현재의 DOM 노드를 검사하고, 해당 자바스크립트와 연결하여 활성화 하는 과정)
다 아는 내용이긴 하지만, 개념을 한번 더 짚고 넘어가면 놓을 것 같아 남겨보았습니다.
다른 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 컴포넌트
- 👍 애플리케이션 전체에 걸쳐 여러 컴포넌트에 동일한 동작을 적용해야 할 때
- 👍 추가된 커스텀 로직 없이도 컴포넌트가 독립적으로 작동할 수 있을 때
- 👍 재사용하고자 하는 로직을 한 곳에 모아 관리 가능
- 👎 여러 고차 함수를 조합해서 사용하면, 어떤 고차 컴포넌트에서 props를 넘겨주는 지 알 기 어려울 수 있다 -> 디버깅과 애플리케이션 확장이 어려움
렌더링 prop은JSX 요소 를 반환하는 함수 값을 가지는 컴포넌트의 props 컴포넌트 자체는 렌더링 prop 외에 는 아무것도 렌더링하지 않습니다. 자신의 렌더링 로직을 구현하는 대신, 렌더링 prop을 호출
- 👍 여러 컴포넌트 사이에서 로직과 데이터를 쉽게 공유
- 👍 고차컴포넌트패턴에서 발생할 수 있는 이름 충돌문제를 해결
- 👎 리액트Hooks이 렌더링Props 패턴으로 해결할 수 있는 문제 대부분을 이미 해결
리액트16.8 버전부터 도입됨.
Hooks를사용하면 ES2015의 클래스 컴포넌트를 사용하지 않고도 상태와 라이프사이클 메서드를 활용할 수 있습니다.
(내용 생략)
모듈이 초기 번들에 불필요하게 추가되어있음 -> 이로 인해 잠재적인 로딩 시간이 증가 할 수 있는 문제점이 존재 -> 동적으로 필요할 때 가져옴으로써 해결
ex) 리액트에서 제공하는 Suspense 컴포넌트는 동적으로 로드되어야 할 컴포넌트를 감싸는데, 이는 모듈의 가져오기를일시적으로중단시킴으로써 App 컴포넌트가더 빠르게 내용을 렌더링할 수 있도록 해줍니다.
저사양 기기나 인터넷 연결이 불안정한 지역에서도 애플리케이션이 원활하게 작동하게 하기 위해, 애플리케이션이 최대한 효율적으로 로드되도록 하기 위한 패턴
- 푸시: 중요한 리소스를 효율적으로 푸시하여 서버 왕복 횟수를 최소화하고 로딩 시간을 단축합니다.
- 렌더링: 사용자 경험을 개선하기 위해 초기 경로를 최대한 빠르게 렌더링합니다.
- 사전캐싱 :자주방문하는경로의 에셋asset을 백그라운드에서 미리 캐싱하여 서버요청횟수를 줄이고 더 나은 오프라인 경험을 제공합니다.
- 지연로딩: 자주 요청되지않는 경로나 에셋은 지연로딩합니다.
필요하다고 예상되는 특정 리소스를 우선적으로 요청하도록 설정 ex) preload 사용
👍 이미지 preload가 문서에서 앞쪽에 위치하면 브라우저가 해당 이미지 를 더 빨리 발견하고 다른 리소스와의 로딩 순서를 조정하는 데 도움을 줄 수 있음 👎 preload를 잘못 사용하면 FCP에 필수적인 리소스(예: CSS, 폰트)를 지연시켜 원하는 것 과 정반대의 결과를 초래할 수 있음