기술 면접 준비 - React (5) 完
라이브러리와 프레임워크의 차이
라이브러리는 개발 주도권이 개발자에게 있고, 프레임워크는 개발 주도권이 프레임워크에 있다.
리액트를 선언형 프로그래밍이라 하는 이유는?
선언형
어떤 로직으로 어떻게 코드를 짜야 페이지가 그려질 수 있는지에 대하여 생각하기 보다, 컴포넌트나 데이터의 배치를 통해 무엇이 렌더링될지에 대해 고려하는 것이 선언형 UI의 특징이다.
명령형
선언형 프로그래밍과 대비되는 개념으로 코드가 어떻게 동작해야하는지를 작성한다. HOW와 WHAT의 차이다.
리액트 라이프사이클에 대하여
생명주기 메서드는 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메서드들이다. 이러한 생명주기 함수는 클래스형 컴포넌트에서만 사용할 수 있으며, 함수형 컴포넌트에서는 Hooks를 통해 유사한 기능을 활용할 수 있다.
마운팅 / 업데이팅 / 언마운팅
state와 props의 차이
state: 컴포넌트의 상태를 뜻한다. props와 달리 변할 수 있으며 컴포넌트 내부에서 선언되고 관리된다. props: 변할 수 없는 값이다. 부모 컴포넌트로부터 받으며 상속받는 컴포넌트 내에서 수정이 불가능하다.
JSX란? (내부 동작 방식 위주)
HTML과 JS 로직을 하나의 JS 파일에서 모두 처리할 수 있는 특징을 가진 확장자이며 브라우저에서 동작하기 전에 Babel의 트랜스컴파일러를 통해 JS 코드 형태로 변환되어 동작한다.
- JSX는 JavaScript를 확장한 문법이다.
- 브라우저에서 실행하기 전에 Babel을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
- 부모 요소 하나가 감싸는 형태
- if 구문과 for 루프는 JavaScript 표현식이 아니기 때문에 JSX 내부 자바스크립트 표현식에서는 사용할 수 없다.
- class 대신 className 사용
props 드릴링 해결 방법
render props 패턴: 자식 컴포넌트에게 함수를 전달하고, 이 함수를 통해 부모 컴포넌트의 상태를 사용할 수 있게 한다.
HOC (Higher Order Component): 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 함수이다.
SPA, MPA, CSR, SSR, SSG
SPA, MPA는 페이지를 하나만 쓰는지, 여러개 쓰는지의 차이이고 CSR, SSR은 렌더링을 어디서 하냐의 차이로 비교 대상이 아니다. SPA에서는 첫 페이지만 받아오고 이후에 CSR 방식을 채택하였고, MPA는 SSR 방식을 채택하였다.