[Development] 프론트엔드 면접 예상 질문 - React

 

 

1. Virtual DOM 작동 원리에 대해 설명해주세요.
2. React를 사용하는 이유에 대해 말씀해주세요. 
3. React에서 JSX 문법이 어떻게 사용되나요?
4. React hook에 대해서 설명해주세요.
5. 상태관리의 필요성에 대해서 설명해주세요.

 

 

1. Virtual DOM 작동 원리에 대해 설명해주세요.

가상 돔은 실제 돔보다 상대적으로 가벼운 자바스크립트 객체

• 어떤 데이터가 변경이 되어서 화면을 업데이트 해야할 때, React는 가상 돔을 이용해서 빠르게 랜더링을 진행함
• React는 메모리에 가상 돔을 올려놓고 (데이터 변경) 이전와 이후의 가상 돔을 합리적인 알고리즘으로 비교하여 변경된 부분만 실제 돔에 반영함
• React에서 데이터 변경에 의한 화면 업데이트는 크게 렌더단계와 커밋단계를 거침
  • 렌더단계에서는 실제 돔에 반영될 변경 사항을 파악
  • 커밋단계에서는 변경 사항으르 실제 돔에 반영

 

 

2. React를 사용하는 이유에 대해 말씀해주세요. 

리액트를 사용하는 큰 이유 중 하나는 UI를 자동으로 업데이트 해주기 때문이다.

• UI 자동 업데이트
  • 브라우저에서 돔을 변경하는 것은 비교적 오래 걸리는 작업
  • React와 같은 도구를 사용하지 않으면 브라우저의 돔을 직접 업데이트 해야 함
  • React를 이용하면 돔 변경을 최소화하고, 이를 통해 빠른 랜더링이 가능
• 생산성과 유지 보수가 용이
  • 컴포넌트와 훅을 사용하여 작은 단위의 독립적인 요소로 개발 가능
  • 반복되는 코드를 공통적인 부분으로 분리해서 재사용할 수 있음

 

 

3. React에서 JSX 문법이 어떻게 사용되나요?

JSX는 JavaScript를 확장한 문법으로, React를 개발할 때 주로 사용된다.

• JSX 문법을 사용하지 않을 경우에는 createElement라는 함수를 이용해 돔 요소를 생성해야 함
• 이는 단순한 기능을 개발할때도 코드가 다소 복잡한 문제가 있음
• JSX는 HTML에서 태그를 사용하는 방법과 유사하여 더 가독성있는 코드를 사용할 수 있게 함
• JSX로 작성된 코드는 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됨
• JSX와 HTML의 차이점
  1. HTML에서 클래스 이름을 부여할 때 class 키워드를 사용했다면, JSX에서는 className 키워드를 사용한다. 자바스크립트의 class 키워드와 이름이 같이 때문이다.
  2. 리액트 컴포넌트를 사용할 때 속성값이 문자열이 아닌 경우에는 중괄호를 사용하여 입력한다.
     <Example title=”good” width={200} />
  3. JSX는 보통 속성이름을 카멜케이스로 짓는다. (이벤트 객체 역시 마찬가지)
     onclick(x) onClick(o)
  4. style 속성값을 작성할 때는 속성들을 object 형식으로 작성해서 사용한다.
     <Example title=”good” style={{ marginTop: ‘10px’ }} />

 

 

4. React hook에 대해서 설명해주세요.

리액트 버전 16.8부터 추가된 기능으로, class를 작성하지 않고도 state나 다른 React의 기능을 사용할 수 있게 한다.

• useState, useEffect, useContext등이 기본 내장 훅이고, 이외에도 useReducer나 useCallback과 같은 다양한 훅이 있음
• 자신이 원하는 로직을 함수로 만들어 자신만의 hook을 만들 수도 있음
• hook 사용 시 주의사항
  • 최상위에서만 hook을 호출해야 함. 반복문, 조건문, 중첩된 함수 내에서 hook을 실행하지 않아야 함
  • React 함수 컴포넌트 내에서만 hook을 호출해야 함
•  

 

 

5. 상태관리의 필요성에 대해서 설명해주세요.

여러 컴포넌트를 거치지 않고 손쉽게 상탯값을 전달하기 위해 사용한다.

• props drilling 이슈 해결
  • A라는 컴포넌트에 있는 상태값을 멀리 떨어진 H라는 자식 컴포넌트가 사용하려고 하면 중간에 있는 B,C,D와 같은 컴포넌트는 그 상탯값을 받아서 자식 컴포넌트에게 계속 내려주는 작업을 반복해야 함
  • 전역 상태를 저장하는 저장소를 따로 두어, 모든 컴포넌트가 저장소에 접근하는 방식으로 이러한 문제 해결
• 상태관리를 하는 다양한 방법: Context API(리액트에서 제공), Redux, MobX, Recoil

 

 

 

글 속에 오류가 있다면 언제든 댓글로 알려주세요 :-)