15가지 리액트 프론트엔드 인터뷰 대비 질문과 답변

15 React Interview Questions with Solutions - SitePoint

 

 

 

본문은 위의 블로그 글을 발췌, 번역하였습니다.

 

 

 

---

 

 

 

15 React Interview Questions with Solutions

 

 

전 세계에서는 개발자에 대한 수요가 공급을 앞지르고 있으며, 리액트의 인기는 사그라들 기미가 보이지 않습니다. 경험이 적은 개발자(또는 일정 기간 취업시장에서 멀어져 있던 개발자)에게는 면접을 통해 자신의 지식을 입증하는 것이 부담스러울 수 있습니다.

 

 

이 글에서는 리액트의 핵심을 이해하고 효율적으로 활용하기 위해 필요한 15가지 질문들을 다룰 것 입니다. 각 질문에 대해 답변을 요약하고, 추가적인 자료를 찾아볼 수 있는 링크를 제공할 것입니다.

 

 

 

 

---

1. Virtual DOM은 무엇인가요?

 

 

 

 

Virtual DOM은 애플리케이션의 UI를 구성하는 HTML 요소들을 메모리 내에서 구현한 것입니다. 컴포넌트가 재 렌더링이 될 때, Virtual DOM은 업데이트할 요소의 목록들을 만들기 위해 기존의 DOM과 변경된 사항을 비교합니다. 그래서 DOM 전체를 다시 렌더링할 필요가 없기 때문에 DOM에 필요한 최소한만을 변경하여 효율성이 높다는 특징이 있습니다.

 

 

 

---

2. JSX는 무엇인가요?

 

 

 

 

JSX는 HTML처럼 보이는 코드를 작성할 수 있게 해주는 자바스크립트 문법의 확장자입니다. JSX는 자바스크립트 함수 호출 방식으로 컴파일되어 컴포넌트에 대한 마크업을 만들 수 있는 방법을 제공합니다.

 

 

 

---

3. 클래스 컴포넌트와 함수형 컴포넌트의 차이는 무엇인가요?

 

 

 

 

React 16.8(Hooks의 도입) 이전에는 내부 상태를 유지하는 데 필요한 컴포넌트를 생성하거나 생명주기 메소드를 활용하기 위해 클래스 기반 컴포넌트를 사용했습니다. 클래스 기반 컴포넌트는 리액트의 컴포넌트 클래스를 확장하는 ES6 클래스이고, 항상 render() 메소드를 포함하고 있습니다.

 

 

클래스 컴포넌트:

 

class Welcome extends React.Component {
	render() {
    	return <h1> Hello, {this.props.name} </h1>;
    }
}

 

Note: (Hooks 도입 이전의) 함수형 컴포넌트는 state를 갖지 않으며 렌더링할 출력 결과를 리턴합니다. 함수형 컴포넌트는 클래스 컴포넌트보다 간단하기 때문에 props에만 의존하는 UI를 렌더링하는데 선호됩니다.

 

 

함수형 컴포넌트:

 

function Welcome(props) {
	return <h1>Hello, {props.name}</h1>
    }

 

Note: 리액트 16.8에 도입된 Hooks 덕분에 더 이상의 차이는 의미가 없습니다.

 

 

 

---

4. key는 어떻게 사용되나요?

 

 

 

 

리액트에서 collection을 렌더링할 때 요소와 데이터 사이의 관계를 추적하기 쉽도록 반복되는 각 요소에 key를 추가하는 것이 중요합니다. 키는 고유한 ID(이상적으로는 uuid 또는 기타의 고유한 문자열)을 사용해야 하지만, 마지막 수단으로 Array index를 사용할 수 도 있습니다.

 

 

<ul>
  {todos.map((todo) =>
    <li key={todo.id}>
      {todo.text}
    </li>
  )};
</ul>

 

 

key를 사용하지 않으면 collection에 아이템을 추가하거나 제거할 때 예상하지 못한 동작 결과가 발생할 수 있습니다.

 

 

 

---

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

 

 

 

 

props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터입니다. props는 수정이 불가하며 직접 쓰이거나 다른 값을 계산하는 데 사용됩니다. state는 컴포넌트의 생명주기 동안에 수정될 수 있는 내부 데이터로, 재 렌더링시에도 유지됩니다.

 

 

 

---

6. 왜 state를 직접 변경하지 않고 setState를 이용하나요?

 

 

 

 

만약 컴포넌트의 state를 직접 변경하려고 시도한다면 리액트는 컴포넌트를 다시 렌더링해야 하는지 알 수 있는 방법이 없습니다. setState() 메소드를 사용하면 리액트는 컴포넌트의 UI를 업데이트할 수 있습니다.

 

 

 

---

7. prop으로 전달되는 값의 type을 어떻게 강제하나요? 또, prop이 필수적으로 전달되게끔 어떻게 강제할 수 있나요?

 

 

 

 

컴포넌트의 props의 타입을 확인하기 위해서는 prop-types 패키지 (리액트 15.5까지는 리액트에 내장되어 있습니다.)를 이용하여 기대하는 값의 타입과 prop이 필수인지 여부를 선언해줄 수 있습니다.

 

 

import PropTypes from 'prop-types';
class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}
Greeting.propTypes = {
  name: PropTypes.string
};

 

 

 

---

8. prop drilling은 무엇이고, 어떻게 피할 수 있나요?

 

 

 

 

prop drilling은 부모 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 발생하는 것으로, props를 전달하는 것 이외에는 props를 필요로 하지 않는 다른 컴포넌트를 통해 "drilling"이 됩니다.

 

컴포넌트를 리팩토링하고, 컴포넌트를 더 작은 컴포넌트로 세분화하지 않고, 상태를 가장 가까운 부모 컴포넌트와 공유함으로써 prop drilling을 회피할 수 있습니다. 레벨상 멀리 떨어진 컴포넌트와 state를 공유해야 할 때는, 리액트의 Context API 또는 Redux와 같은 state 관리 라이브러리를 사용할 수 있습니다.

 

 

 

---

9. React Context는 무엇인가요?

 

 

 

 

리액트는 하나의 애플리케이션 안에서 다수개의 컴포넌트들이 상태를 공유할 때 발생하는 문제들에 대해 대응하기 위한 Context API를 제공합니다. Context가 도입되기 이전에는 Redux와 같은 별도의 상태 관리 라이브러리를 추가하는 것이 유일한 방법이었습니다. 하지만 개발자들은 소규모의 앱에서는 Redux가 불필요한 복잡성을 유발한다고 느꼈습니다.

 

 

 

---

10. Redux는 무엇인가요?

 

 

 

 

Redux는 React를 위한 Third-Party 상태관리 라이브러리로 Context API가 개발되기 이전부터 존재했습니다. Redux에는 Store라고 불리는 상태 컨테이너의 개념을 기반으로 하는데, Store 컴포넌트는 데이터를 props로 받을 수 있습니다. Store를 업데이트 하려면 reducer를 통해 전달되는 Store에 Action을 보내는 것입니다. Reducer는 Action과 현재의 상태를 받고, 새로운 상태를 리턴하고 구독된 컴포넌트를 다시 렌더링하게 합니다.

 

 

 

 

 

---

11. React 애플리케이션을 스타일링하는 보편적인 방식은 무엇인가요?

 

 

 

 

리액트 컴포넌트를 스타일링하는데에는 다양한 방법이 있고, 각각의 장단점이 있습니다. 주로 사용되는 것들은 다음과 같습니다.

 

• 인라인 스타일링(Inline Styling): 프로토타입을 만들 때에는 훌륭하지만 한계가 많습니다.
• 클래스 기반 CSS 스타일링: 인라인 스타일링보다 유용하고 React에 익숙하지 않은 개발자들도 쉽게 사용가능합니다. 
• CSS in JS 스타일링: 컴포넌트 안에서 스타일을 자바스크립트로 선언하여 스타일링 할 수 있게 해주는 라이브러리가 많습니다.

 

 

 

---

12. 제어 컴포넌트와 비제어 컴포넌트의 차이는 무엇인가요?

 

 

 

 

HTML 문서의 많은 form 엘리먼트들은 고유한 상태를 유지합니다. 비제어 컴포넌트는 DOM에 이러한 input들의 상태에 대한 값들을 source of truth로 취급합니다. 제어 컴포넌트에서 내부 상태는 엘리먼트의 값을 추적하기 위해 사용합니다. input의 값이 변경되면 리액트는 input을 재 렌더링합니다. 비제어 컴포넌트는 리액트가 아닌 코드와 합쳐질 때 유용하게 사용될 수 있습니다.

 

 

 

---

13. 생명주기 메소드는 무엇인가요?

 

 

 

 

클래스 기반 컴포넌트들은 마운트되었을 때나 언마운트될 때와 같이 생명주기 중 특정 시점에 호출되는 특별한 메소드를 선언할 수 있습니다. 이는 컴포넌트가 필요할 때 세팅 및 해체, 타이머를 설정하거나 브라우저 이벤트에 바인딩할 시 유용합니다.

 

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

 

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

 

 

 

---

14. React hooks는 무엇인가요?

 

 

 

 

Hooks는 클래스 기반 컴포넌트의 장점(예를 들어 내부 상태와 생명주기 메소드)을 함수형 컴포넌트로 가져오려는 리액트의 시도입니다.

 

 

 

---

15. React hooks의 장점은 무엇인가요?

 

 

 

 

React에 hooks을 도입해 얻을 수 있는 여러 이점들은 다음과 같습니다.

 

• 클래스 기반 컴포넌트, lifecyle hooks, this의 필요성이 사라집니다.
• 공통 기능을 커스텀 hook으로 만들어서 로직을 재사용하기 쉬워집니다.
• 컴포넌트 자체에서 로직을 분리할 수 있어서 읽기 쉽고 테스트하기 쉬운 코드를 작성할 수 있습니다.

 

 

 

 

 

---

 

 

 

마무리하면서

 

 

비록 완벽하지는 않지만, 이 질문들은 많은 내용을 다루고 있습니다. 이 주제들을 이해하면 React 라이브러리에 대한 훌륭한 실무 지식을 얻을 수 있을 것입니다. 제시된 참고 자료를 공부하면 더욱 깊게 이해하는데 도움이 될 것입니다. 

 

행운을 빕니다!