[React] 면접질문 대비

✔️ React의 개념과 장점을 말해보세요.

• React는 UI 구축을 위한 자바스크립트 프론트엔드 라이브러리입니다.
• 장점 :
  • Virtual DOM을 사용해서 어플리케이션의 성능을 향상시킵니다.
  • 서버, 클라이언트 사이드 렌더링을 지원합니다.
  • 컴포넌트의 가독성이 높고 간단하여 유지보수가 쉽습니다.
  • 다른 프레임워크와 혼용이 가능합니다.

✔️ React를 사용하는 이유에 대해 말해보세요.

동적인 웹페이지를 효율적으로 유지 보수하고 관리하기 위함

웹 어플리케이션에 동적인 변화가 많이 일어난다면 그만큼 DOM 요소들 또한 변화가 이루어져야 한다는 것과 같다. DOM 요소들이 변화한다는 것은 브라우저의 렌더링 과정이 다시 이루어져야한다는 것이므로 매번 렌더링이 일어난다면 성능이 저하된다.

이를 해결하기 위해 여러 프론트엔드 라이브러리가 탄생하였다.

그 중에서 react는 다음과 같은 이점이 있다.

• component 단위 작성
  • UI를 컴포넌트 단위로 조립하기 때문에 생산성과 유지 보수를 용이하게 한다.
• JSX 문법을 제공한다.
  • JSX는 리액트에서 HTML와 유사한 문법을 사용할 수 있도록 하는 것으로 요소를 제공해주기 때문에 컴포넌트를 쉽게 구성할 수 있다.
• virtual dom
  • 유저의 인터랙션이 일어나면 변화가 일어난 dom 트리의 노드만 교체하기 때문에 효율적이다.

✔️ React의 내부 작동 원리를 재조정(Reconciliation) 개념과 함께 설명하세요.

• React에서 실제로 DOM을 직접 제어하지 않고 중간에 virtual DOM을 두어 virtual DOM이 변경될 때, 실제 DOM을 변경하도록 설계되어 있습니다. 이 작업을 Reconciliation이라고 합니다. virtual DOM을 갱신하는 방법에는 setState()메소드를 호출하는 방법과 redux의 경우처럼 store가 변하면 다시 최상위 컴포넌트의 render()함수를 호출해서 갱신하는 2가지 방법이 있습니다.

✔️ React에 있는 라이프사이클과 각 라이프사이클의 역할을 설명하세요.

• 리액트의 라이프사이클은 컴포넌트의 생성, 갱신, 소멸 단계에서 발생하는 메소드들을 말합니다.

클래스 기반 컴포넌트는 그들이 mount(DOM에 렌더링)되었을 때, unmount될 때 등과 같이 그들의 생명주기 중 특정한 시점에 호출되는 특별한 메소드를 선언할 수 있습니다. 이는 예를 들면 컴포넌트가 필요로 하는 것을 셋팅 및 해제하거나, 타이머를 설정하거나 브라우저 이벤트에 바인딩하는 데 유용합니다.

아래의 생명주기 메소드들은 컴포넌트를 불러오기 위해 사용할 수 있습니다.

 

• componentWillMount: 컴포넌트가 생성된 후 DOM에 렌더링되기 전에 호출됩니다.
• componentDidMount: 처음으로 렌더링이 끝나고 컴포넌트의 DOM 엘리먼트가 사용 가능할 때 호출됩니다.
• componentWillReceiveProps: props가 업데이트 될 때 호출됩니다.
• shouldComponentUpdate: 새로운 props를 받았을 때 호출되며, 성능 최적화를 위해 리랜더링을 막을 수 있습니다.
• componentWillUpdate: 새로운 props를 받았고 shouldComponentUpdate가 true를 리턴할 때 호출됩니다.
• componentDidUpdate: 컴포넌트가 업데이트된 후에 호출됩니다.
• componentWillUnmount: 컴포넌트가 DOM에서 제거되기 전에 호출되어 이벤트리스너 등을 정리할 수 있게 해줍니다.