TIL 10/12 기술면접질문2

• props와 state의 차이는 무엇인가요?

 

state는 컴포넌트 내부에서 관리되는 데이터로 값이 변경되었을때 리렌더링이 되고

props는 상위컴포넌트에서 자식 컴포넌트로 값을 전달해주는것으로 읽기 전용으로 전달되기 때문에 자식 컴포넌트에서 해당 값을 변경할 수 없다.

---

• pure component에 대해 설명해주세요.

 

setState가 호출될 때 항상 render함수가 호출된다. 렌더링 여부를 제어하기 위해 sholdComponentUpdate 함수를 이용할 수 있지만 sholdComponentUpdate 함수를 정확하게 정의하지 못하는 경우 렌더링이 필요한 경우에 안되는 버그를 만드는 실수를 하기 쉽다 이럴 경우 PureComponent를 이용할 수 있다.

PureComponent는 props나 state가 변경될 경우에만(얕은 비교) 다시 렌더링을 수행한다.

동일한 UI가 보장되는 컴포넌트인 경우에는 PureComponent로 정의하여 성능 향상을 기대할 수 있다. 함수형 컴포넌트에서는 React.memo 를 사용하여 purecomponent를 만들 수 있다.

---

• shouldComponentUpdate에 대해 설명해주세요.

 

shouldComponentUpdate는 React 클래스 컴포넌트에서 사용되는 생명주기 메서드 중 하나로, 컴포넌트가 리렌더링 될지 여부를 결정하는 데 사용된다. 이 메서드를 사용하면 컴포넌트의 성능을 최적화 할 수 있으며, 불필요한 리렌더링을 방지할 수 있다. sholdComponentUpdate메서드는 컴포넌트가 업데이트되기 전에 호출된다. 기본적으로 true를 반환하며, 이는 컴포넌트가 항상 리렌더링됨을 의미한다. 그런나 사용자 정의하여 특정 조건에 따라 true또는 false를 반환하도록 할 수 있다.

shouldComponentUpdate()는 props 또는 state가 새로운 값으로 갱신되어서 렌더링이 발생하기 직전에 호출됩니다.

메서드는 오직 성능 최적화만을 위한 것입니다. 렌더링을 방지하는 목적으로 사용할 경우 버그로 이어질 수 있습니다. shouldComponentUpdate()의 내용을 직접 작성하는 대신에 PureComponent를 사용하는 것이 좋습니다. 

shouldComponentUpdate()가 false를 반환할 경우, 다른 메서드인 render(), 그리고 componentDidUpdate()는 호출되지 않습니다.

---

• 클래스형 컴포넌트와 함수형 컴포넌트의 차이에 대해 설명해주세요.⭐️

 

먼저 클래스형 컴포넌트는 class키워드가 필요하며, component를 상속받아야한다.

또한 화면에 표시하기 위한 render메서드가 필요한 반면, 함수형 컴포넌트는 단순히 함수를 선언함으로써 사용이 가능하다.

state사용에 있어서 차이는 객체 형식의 state와 this키워드를 사용해 state초기값을 설정하고 변경 해야 한다.

그러나 함수형 컴포넌트는 useState 훅을 사용해 state의 초기값을 설정하고 변경한다.

props 또한 클래스형 컴포넌트에서는 this키워드를 사용해 불러오고 함수형 컴포넌트에서는 렌더 함수의 parameter로 props를 받아 사용한다.

마지막으로 LIfeCycle API 사용 유무인데, 클래스형 컴포넌트에서는 LifeCycle API를 사용할 수 있지만, 함수형 컴포넌트에서는 불가능하고 이를 Hook들을 통해 해결할 수 있다. 이러한 차이들로 인해 , 함수형이 클래스형보다 메모리 자원을 덜 사용한다. 추천되는 방식이다.

---

• 생명 주기 메서드에 대해 설명해주세요.⭐️

 

컴포넌트는 기본적으로 페이지에 나타나는 Mount, 컴포넌트 정보 업데이트, 페이지에서 사라지는 UnMount의 순서로 LifeCycle이 진행된다. 먼저 Mount될 때의 메소드를 보면, 1) constructor- 컴포넌트의 생성자 메서드, 컴포넌트 생성될 때 처음으로 실행, 초기 설정 및 상태 초기화에 사용된다. 2) getDerivedStateFromProps : props에 있는 값을 State에 넣을 때 사용 3) render : 컴포넌트의 UI를 렌더링하는 메서드, 필수적으로 정의되어야 한다. 4) componentDidMount : 컴포넌트가 Mount된 후 한 번만 호출되는 메서드 업데이트의 경우, 1) getDerivedStateFromProps 2) shouldComponentUpdate : 리렌더링을 결정하는 메소드 3) render 4) getSnapshootBeforeUpdate : 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드 5)componentDidUpdate-컴포넌트가 업데이트된 후 호출 UnMount 시에는 componentWillUnmount - 컴포넌트가 페이지에서 제거되기 전에 호출하는 메서드가 있다. 추가적으로 componentDidCatch 메소드가 있는데 이 메소드는 렌더링 도중 에러가 발생했을 때 오류로 인해 프로그램이 멈추지 않고 오류 UI를 보여줄 수 있게 해준다