1. Virtual DOM은 무엇인가요?
Virtual DOM은 애플리케이션의 UI를 구성하는 HTML 요소를 메모리 내에서 구현한 것입니다. 컴포넌트가 다시 렌더링될 때, virtual DOM은 업데이트할 요소의 목록을 만들기 위해 기존의 DOM 모델에서 변경되는 사항을 비교합니다.DOM 전체를 다시 렌더링할 필요 없이 실제 DOM에 필요한 최소한만 변경하여 효율성이 높다는 것이 큰 장점입니다.
2. JSX는 무엇인가요?
JSX는 HTML처럼 보이는 코드를 작성할 수 있게 해주는 자바스크립트 문법의 확장입니다. JSX는 자바스크립트 함수 호출 방식으로 컴파일되어 컴포넌트에 대한 마크업을 만들 수 있는 더 좋은 방법을 제공합니다.
JSX 문법 예시
<div className="sidebar" />이 예시는 아래의 자바스크립트로 변환됩니다
React.createElement(
'div',
{className: 'sidebar'}
)3. key는 어떻게 사용되나요?
리액트에서 collection을 렌더링할 때 엘리먼트와 데이터 사이의 관계를 추적하기 쉽도록 반복되는 각 엘리먼트에 key를 추가하는 것이 중요합니다. 키는 고유한 ID(이상적으로는 UUID 또는 기타 고유 문자열)를 사용해야 하지만, 마지막 수단으로 Array index가 될 수 있습니다.
<ul>
{todos.map((todo) =>
<li key={todo.id}>
{todo.text}
</li>
)};
</ul>키를 사용하지 않거나 인덱스를 키로 사용하면 컬렉션에서 항목을 추가하고 제거할 때 이상한 동작이 발생할 수 있습니다.
4. state와 props의 차이는 무엇인가요?
props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터입니다. props는 수정될 수 없으며 표시되거나 다른 값을 계산하는데만 사용됩니다. state는 컴포넌트의 생명 주기 동안 수정될 수 있는 내부 데이터로, 다시 렌더링해도 유지됩니다.
5. React 애플리케이션을 스타일링(styling)하는 보편적인 방식은 무엇인가요?
리액트 컴포넌트를 스타일링하는 다양한 방법이 있고, 각각은 장단점이 있습니다. 주로 사용되는 것들은 다음과 같습니다
- 인라인 스타일링 : 프로토타입을 만들 때 훌륭하지만 한계가 많습니다. (예로, pseudo-classes를 사용할 수 없습니다)
- 클래스 기반 CSS 스타일 : 인라인 스타일링보다 유용하고 React에 익수하지 않은 개발자들도 쉽게 사용할 수 있습니다.
- CSS in JS 스타일링 : 컴포넌트 안에서 스타일을 자바스크립트로 선언하여 스타일링할 수 있게 해주는 많은 라이브러리가 있습니다.
