[Frontend] 기술면접 top30
해당 질문에 면접에서 답변할 수 있을 정도의 길이(3~4줄)로 답변을 달아보세요. 특히 면접 답변의 핵심은 두괄식(핵심을 먼저 말하는 것)입니다. 완성 후, 면접 하루 전날 족보처럼 훑어보고 면접을 보러갑시다!
📌라이프사이클이 의미하는 바에 대해서 설명해주세요.
답변▶️리액트는 컴포넌트 기반의 view를 중심으로 한 라이브러리로 그러다보니 각각의 컴포넌트에는 라이프 사이클 즉, 컴포넌트의 생명주기가 존재합니다. 컴포넌트의 수명은 보통 페이지에서 랜더링되기 전인 준비 과정에서 시작하며 페이지에서 사라질 때 끝이납니다
‘Mount(탄생) > Update, Re-render(변화) > Unmount(Mount
Mount
-
constructor()
컴포넌트를 새로 만들때마다 호출되는 클래스 생성자 메서드
컴포넌트가 마운트되기 전에 호출 -
getDerivedStateFromProps(nextProps, prevState)
props로 받아 온 값을 state에 동기화시키는 용도로 사용하며, 컴포넌트가 마운트될 때와 업데이트 될 때 호출 -
render()
우리가 준비한 UI를 렌더링하는 메서드
컴포넌트를 DOM에 마운트하기 위해 호출 -
componentDidMount
컴포넌트 상태가 변하는 경우는 다음과 같은 상황에서 발생
props가 바뀔 때
state가 바뀔 때
부모 컴포넌트가 리렌더링 될 때
this.forceUpdate로 강제로 렌더링을 트리거할 때
Update, Re-render
컴포넌트 상태가 변하는 경우는 다음과 같은 상황에서 발생
- props가 바뀔 때
- state가 바뀔 때
- 부모 컴포넌트가 리렌더링 될 때
- this.forceUpdate로 강제로 렌더링을 트리거할 때
Unmount
DOM에서 제거되어 화면에서 사라지는 시점
componentWillUnmount: 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드
‘예를 들어 로그아웃시 주 구성 Component를 해제하기전에 사용자 세부정보와 모든 인증 토큰을 지운다거나 setInterval을 clear한다거나 할 수 있습니다’
