- 개념정리
1.JSX란 무엇인가요?
- 자바스크립트를 확장한 문법
-React Element를 생성하기 위한 문법
- SPA와 MPA의 개념 및 각각의 특징
- SPA(SinglePageApplication)이라한다 웹페이지가 리로드하지않고
사용자의 상호작용하는 컴포넌트들만 동적으로 업데이트합니다
SPA의 특징
속도: 최초 로드시 가져와야하는 양이 많으므로 MPA보다 오래걸린다.
동적상호작용: AJAX와 서버와 통신, 사용자 경험이 매끄러움
프론트앤드에서의 관점: Libliry:React,Vue.js사용 , 프레임워크: Angular
단점: SEO같은 검색엔진에서 일부 제약 있음
-MPA(Multi Page Application)이라 하며 사용자가 다른페이지로 이동할때마다 페이지가 리로드한다.
구성
- 각페이지가 이동할때마다 각각의 HTML이 불러와진다.
- 서버중심 로직 대부분 처리가 서버에서 처리
- 각 페이지가 별도의 URL을 가지므로 검색엔진 최적화에 유리하다
- 개발의 복잡성: SPA에 비해 페이지 별로 디자인과 기능을 다르게 해야해서 개발이 복잡하다.
Export -> 여러 값을 내보낼 수 있는 명령어
// 여러 함수와 변수를 내보내는 경우
export const name = 'Example';
export function doSomething() { / ... / }
export default -> 단일 값 내보내기 (하나의 파일에 하나의 함수나 변수,객체만 내보낸다 (권장))
무명 내보내기(Default Exports): 하나의 함수,변수,객체가 하나이므로 어떤이름을 사용하여도 된다.
// 한 모듈에서 하나의 함수를 기본 내보내기로 설정
export default function() { / ... / }
export default는 주로 모듈의 '주' 기능이나 기본적으로 사용될 기능을 내보낼 때 사용됩니다. 반면, export는 모듈 내에서 여러 기능이나 값을 내보내야 할 때 사용되며, 가져오는 측에서는 필요한 것만 선택적으로 가져올 수 있습니다. 이러한 차이점은 모듈의 사용성과 유지보수성에 큰 영향을 미침
State
- state는 컴포넌트 내부에서 관리되는 데이터, 생명주기에 따라 변할 수 있음, 변화에 따라 컴포넌트 재렌더링
용도: 사용자의 입력, 서버응답시간 경과에 의해 변경되는 데이터를 저장
Props
- 속성전달: 부모 -> 자식에게 데이터를 전달할 때 사용
특징
- Props는 읽기 전용이므로 변경이 불가능하다 매개변수와의 용도가 다르니 신경써서 구현하자
예상질문
-props drilling
뜻: 부모에서 자식으로 게속해서 넘어감에 따라 너무 딮하게 넘어가는 현상
- 불변성의 뜻과 중요성
-> 데이터가 생성하고 변경 불가, 데이터를 수정할때 직접변경x, 새로운 복사본을 만들어 복사
즉, 객체나 배열은 불변성을 유지하기 위해 새로운 객체나 배열을 생성해야함
사용 예) 객체의 경우 스프레드 연산자로 {...object}를 사용하여 기존의 배열을 변경하지 않고 새로운 객체를 생성
명령형 프로그래밍(Dom): 컴퓨터가 수행하는 절차를 관여하여 코드작성
- 장점: 직관적이고 구체적이다.
- 단점: 복잡해질때 관리가 힘들다.
선언형 프로그래밍(React): 각 함수를 호출시켜 React가 알아서 절차를 화면에 수행해준다.
-장점: 관리가 상대적으로 쉽다.
-단점: 호출하는 함수에 따라 잘못작동될 경우가 생긴다.
리렌더링의 발생조건: 컴포넌트에서 state가 바뀌었을 때
컴포넌트가 내려받은 props 가 변경되었을 때
부모 컴포넌트가 리렌더링 된 경우 자식컴포넌트 모두 리렌더링 됨
렌더링이 자주일어난다는건 좋은게 아님
리렌더링하는 비용을 최대한 줄어야하는데 이런 작업을 최적화라고 한다.
ReactMemo 컴포넌트를 캐싱
-처음 렌더링 시 React.memo도 모두 렌더링됨
- 그 이후에는 메모리제이션에 기록되어 있어서 렌더링 안댐
useCallback은 리렌더링 시 주소값이 게속 바뀌는 것들을 주소를 그대로
데이터 로딩 직전에 isLoading을 true -> 후에 iSError 을 false 설정!
