React : 필요 개념 정리 (1)

1. JSX란 무엇인가요?

[생각] 자바스크립트 + XML을 더한 확장한 문법

[정답] + JS모든 기능이 포함되어 있고 react element를 생성하기 위한 문법

 

2. SPA와 MPA의 개념 및 각각의 특징

[생각]

: SPA 는 단일페이지 ( 바꾸고 싶은 데이터만 가져다가 변경하기에, 깜빡임이 없음)
단점으로는 SEO 검색엔진최적화가 약하다
:MPA는 여러페이지로 구성되어 있어서 전체 리랜딩해서 깜빡임 (잘 사용하지 않음)

[정답]

+ SPA는 단 하나의 페이지만 로딩  

(서버에 index.html / index.js만 요청 & state 변경시에 필요 부분만 요청해서 동적 업데이트)

+ 속도: SPA 는 초기 로딩속도가 가져와야하는 리소스양이 많아서 MPA 에 비해 오래걸림

+ 리액트.뷰 -> 라이브러리 (프레임워크보다 가벼움)
+ 앵귤러 -> 프레임워크 (개발자가 모든것을 할 수 있도록 세팅 완료)

 

3. 대표적인 자바스크립트 런타임 환경 2가지에 대해 설명해주세요.

[생각] ..?? 음오아예

[정답]

+ 브라우저 / node.js 

+ spring은 자바임  / node.js에서의 프레임워크는 express.js & nest.js

4. npm 명령어를 통해 설치할 때,

package.json의 dependendies에 추가하기 위한 힌트는 뭔가요?

[생각] ..?? 음오아예

[정답]

+  save명령어 
+ 깃허브에 올릴때 node.modules 설치되나? 올라가지 않음 
> NPM i & Yarn install이 package.json을 동기화 시킴 --> ★ 클론할때 해줘야함 ★
(★ Yarn install이 오류가 더 적음 : dependency 때문에  ) 
+   package.json에 프로젝트의 어떤 버전의 모듈을 사용하는지 적혀있음

5. export와 export default의 차이를 설명해주세요.

[생각]

: export default는 우선적으로 적용하는 것이라 import할때 단어 그대로 입력
: export는 {} 중괄호 안에서 호출을 해야함

[정답]

+ export (여러값 내보내기, named export가 가능)

한 파일 안에서 여러가지 함수를 내보내기 가능 export{fun01, fun02} 이렇게
나중에 import할때 이름이 같아야 가능함

+ export default는 한 모듈에서 단 하나의 값만 내보냄! 무명내보내기 

6. state, props(=속성 + )는 무엇인가요?

[생각]

: state는 상태 -> 리액트에서 리랜더링할때 변화를 감지하는 값
: props는 다른 컴포넌트로 값을 보내주는 인자(인자아님 매개변수임)

[정답]

+ state: 내부 상태관리를 위해서 사용 (컴포넌트 생명주기동안 변할 수 있음)
+ props:(전달:매개변수와 유사) properties(속성 + 전파된다 : 위에서 아래로 전파된다.):

부모컴포넌트에서 자식컴포넌트로 전달됨  

7. prop drilling은 무엇인가요? (면접에 자주 나오는 질문)

[생각]

: props는 부모컴포넌트에서 자식 컴포넌트로 전달하는데 이 과정이 너무 많은 것을 의미.

전달해야하는 자식 컴포넌트가 많을 경우, 유지보수와 수정이 어려움

8. 불변성은 무엇이고, 리액트에서는 왜 중요한가요? (중요한 질문)

[생각]

: 불변성은 변경할 수 없는 값 (참조형태인 객체, 함수, 배열 등)
값을 변경할때 원본값이 변하지 않도록 추가하여 데이터를 작업해줘야한다

[정답]

+ 불변성: 값,객체가 그 주소값을 유지하는 것 
+ 중요한 이유: 성능 최적화 / 상태 예측 용이성 및 디버깅 / 재조정( Concilization) 알고리즘과의 호환성

: 리액트가 리렌더링시 Virutal DOM 을 통해 이전의 DOM과 비교하기에, 이전 DOM이 변함없어야 비교하여 update(Concilization) 할 수 있기에
+ 객체의 경우 스프레드 연산자 ({...obj}) / 배열은 (map, filter, concat등을 사용해서 새 배열 생성)

9. 명령형 프로그래밍과 선언형 프로그래밍의 차이점에 대해 설명해주세요.

[생각] ..?? 음오아예

[정답]

* 명령형 DOM :how 에 집중(흐름,순서)  / 선언형은 REACT what에 집중(목적)

 

10. 일반 함수와 화살표 함수의 차이점이 무엇인가?

[생각] 화살표함수는 호이스팅이 안된다.

[정답] this바인딩 여부 -->제일 중요함 

 

 

끝.