[React] 기본적이고 기초적인 React 인터뷰 질문!(with Chat GPT)

리액트 개발자로서 때로는 기술구현에 급급한 나머지 세부적인 이론을 넘겨짚지 못하고 넘어가는 경우가 있었는데 기본 뼈대 질문을 정리하고 이를 Chat GPT에게 질문하며 작성해 보았다! 💁

 

👉 React.js가 무엇인가?

- React.js는 사용자 인터페이스 및 웹 애플리케이션 구축에 사용되는 오픈 소스 JavaScript 라이브러리이다.

- 재사용 가능한 UI 컴포넌트를 작성하고, 이러한 컴포넌트를 통해 대규모 애플리케이션의 복잡도를 줄일 수 있도록 지원한다.

- 컴포넌트 기반의 아키텍처를 사용하여 데이터와 UI를 분리시켜 관리한다. 이를 통해 애플리케이션의 유지보수성이 높아지고, 코드의 재사용성도 높아진다.

- Virtual DOM 기술을 사용하여 빠른 렌더링을 지원한다.

 

👉 React.js에서 JSX란 무엇인가?

- JSX는 개발자가 JavaScript 코드 내에서 HTML과 유사한 코드를 작성할 수 있도록 하는 React.js에서 사용되는 구문 확장이다.

- 컴포넌트를 더욱 직관적이고 가독성 좋게 작성할 수 있습니다. JSX는 JavaScript에서 HTML 태그를 사용하는 것처럼, HTML 속성도 사용할 수 있다.

function HelloWorld() {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
}

- 이 JSX 코드는 Babel과 같은 도구를 사용하여 일반적인 JavaScript 코드로 컴파일된다.

- 따라서 브라우저가 JSX 코드를 이해할 필요는 없다!

 

👉 React.js에서 함수형 구성 요소와 클래스 구성 요소의 차이점은 무엇인가?

- 함수형 컴포넌트는 props를 인수로 받아들이고 React 요소를 반환하는 JavaScript 함수일 뿐이므로 클래스 컴포넌트보다 단순하고 가볍다.

- 자체 내부 상태가 없기 때문에 무상태 구성 요소라고도 한다.

function MyComponent(props) {
  return <div>Hello, {props.name}!</div>;
}

- 클래스 구성 요소는 구성 요소는 기능적 구성 요소보다 더 강력하며 상태 및 수명 주기 메서드를 가질 수 있다.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return <div>Count: {this.state.count}</div>;
  }
}

 

👉 React.js의 가상 DOM은 무엇인가?

- 가상 DOM은 실제 DOM에 필요한 업데이트 수를 최소화하여 성능을 향상하기 위해 React.js에서 사용되는 실제 DOM의 경량 사본이다.

- 새로운 가상 DOM 트리를 생성하고 이를 이전 가상 DOM 트리와 비교하고 두 트리 간의 차이를 계산하여 전체 DOM을 업데이트하는 대신 변경해야 하는 실제 DOM 부분만 업데이트한다.

- 복잡한 사용자 인터페이스를 구축하기 위한 강력하고 효율적인 도구로 만드는 핵심 기능 중 하나이다.

 

👉 React.js에서 상태의 목적은 무엇인가?

- 상태는 React.js에서 구성 요소의 데이터 및 상태를 관리하는 데 사용되며, 데이터 변경 사항에 따라 업데이트 및 다시 렌더링 할 수 있다.

- 구성 요소의 상태가 변경되면 React는 구성 요소와 해당 자식을 자동으로 다시 렌더링 하여 필요에 따라 DOM을 업데이트하여 새 상태를 반영한다.

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }
}

- 이 예제에서는 구성 요소의 상태를 카운트 0으로 초기화한다. 사용자가 버튼을 클릭하면 새 카운트로 setState()를 호출하여 상태를 업데이트한다.

- 이렇게 하면 React가 업데이트된 개수로 구성 요소를 다시 렌더링 하여 새 상태를 반영하도록 DOM을 업데이트한다.

 

👉 React.js에서 prop은 무엇인가?

- prop은 부모 구성 요소에서 자식 구성 요소로 전달되는 읽기 전용 속성으로, 자식 구성 요소가 부모로부터 데이터 및 구성을 받을 수 있도록 한다.

function ParentComponent() {
  const name = "John";
  return <ChildComponent name={name} />;
}

function ChildComponent(props) {
  return <div>Hello, {props.name}!</div>;
}

- 이 예에서 상위 구성요소 'ParentComponent'는 'name' 소품을 하위 구성요소 'ChildComponent'에 전달한다.

- 그런 다음 자식 구성 요소는 'props.name'을 사용하여 소품에 액세스 하고 이를 사용하여 인사말을 렌더링 한다.

- props는 자식 구성 요소에 대한 콜백으로 함수를 전달하는 데 사용할 수도 있으며, 이를 통해 자식 구성 요소가 부모 구성 요소와 통신할 수 있습니다.

- 이것은 "리프트 상태 업"으로 알려져 있으며 복잡한 애플리케이션의 상태를 관리하기 위한 React의 일반적인 패턴이다.

 

👉 React.js에서 componentDidMount() 라이프사이클 메서드의 목적은 무엇인가?

- componentDidMount() 메서드는 React.js에서 구성 요소가 페이지에 마운트 되거나 렌더링 된 후 작업을 수행하거나 데이터를 가져오는 데 사용된다.

- 이는 상태 초기화, 데이터 가져오기 또는 이벤트 리스너 설정에 유용하다.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: [] };
  }

  async componentDidMount() {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    this.setState({ data });
  }

  render() {
    return (
      <ul>
        {this.state.data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    );
  }
}

- 이 예에서 MyComponent 구성 요소는 componentDidMount() 메서드의 API에서 데이터를 가져오고 데이터로 상태를 업데이트합니다. 이렇게 하면 구성 요소가 새 데이터로 다시 렌더링 되어 목록에 표시됩니다

 

👉 React.js에서 shouldComponentUpdate() 라이프사이클 메서드의 목적은 무엇인가?

- shouldComponentUpdate() 메서드는 React.js에서 데이터 변경에 따라 구성 요소를 업데이트하고 다시 렌더링해야 하는지 여부를 결정하여 성능을 최적화하는 데 사용된다.

- shouldComponentUpdate()의 목적은 구성 요소가 해당 소품 또는 상태의 변경 사항을 기반으로 다시 렌더링이 필요한지 여부를 결정할 수 있도록 하는 것이다.

- 기본적으로 React는 props나 상태가 변경될 때마다 구성 요소를 다시 렌더링 하지만 자식이 많은 복잡한 구성 요소에는 비용이 많이 들 수 있다.

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return nextProps.data !== this.props.data;
  }

  render() {
    return (
      <ul>
        {this.props.data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    );
  }
}

- 이 예제에서 MyComponent 컴포넌트는 shouldComponentUpdate()를 사용하여 nextProps(즉, 다음 업데이트에서 수신될 props)를 현재 props와 비교한다.

- data 소품이 변경되지 않은 경우 구성 요소는 다시 렌더링 할 필요가 없음을 나타내는 false를 반환한다.

- data 소품이 변경된 경우 구성 요소는 다시 렌더링해야 함을 나타내는 true를 반환합니다.

(props를 소품이라고 번역하는 것 같다.... )

 

👉  React.js에서 setState() 메서드의 목적은 무엇인가?

- setState() 메서드는 React.js에서 구성 요소의 상태를 업데이트하는 데 사용되며 구성 요소 및 해당 상태에 의존하는 하위 구성 요소의 다시 렌더링을 트리거한다.

- setState()가 호출되면 React는 제공된 새 값으로 상태 객체를 업데이트한 다음 구성 요소를 다시 렌더링 하여 변경 사항을 반영한다.

- 이는 비동기식으로 수행되므로 setState()를 호출해도 상태 값이 즉시 업데이트되거나 구성 요소가 다시 렌더링 되지 않는다. 대신 React는 업데이트를 대기열에 넣고 다음 렌더링 주기 동안 수행한다.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }
}

- 이 예에서 MyComponent 구성 요소는 "Increment" 버튼을 클릭할 때마다 count 상태를 업데이트하기 위해 setState()를 사용한다.

- 그러면 구성 요소가 다시 렌더링 되어 업데이트된 상태를 반영한다. setState()를 호출하는 것이 React에서 구성 요소의 상태를 업데이트하는 유일한 방법이라는 점은 주목할 가치가 있다.

- 상태 개체를 직접 수정하면(예: this.state.count = 5) 다시 렌더링 되지 않으므로 피해야 한다.

 

👉  React.js에서 key prop의 용도는 무엇인가?

- key prop은 React.js에서 목록의 각 하위 구성 요소에 고유 식별자를 제공하여 React가 필요에 따라 목록을 효율적으로 업데이트하고 다시 렌더링 할 수 있도록 하는 데 사용된다.

- React에서 컴포넌트 목록을 렌더링 할 때, 데이터가 변경될 때 목록을 효율적으로 업데이트하기 위해 각 컴포넌트가 고유한 식별자와 연결되어야 한다. 이것이 key prop이 필요한 이유이다. key prop은 각 컴포넌트에 대한 고유 식별자를 제공하는 특별한 속성이다.

function MyListComponent(props) {
  return (
    <ul>
      {props.items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

- 이 예에서 MyListComponent 컴포넌트는 items 배열을 prop으로 받아들이고 map() 메서드를 사용하여 각 항목의 id 속성을 key prop으로 사용하여 <li> 요소의 목록을 렌더링 한다.

- key prop은 목록에서 각 컴포넌트의 고유 식별자 이어야 한다.

- key prop이 고유하지 않으면 React가 콘솔에 경고를 발생시킨다. 또한 key prop이 제공되지 않으면 React는 항목의 배열 인덱스를 키로 사용하며 목록이 재정렬되거나 필터링되면 성능 문제가 발생할 수 있다.