기술 면접: React

많은 개발자들이 React를 사용하고 있는데, 그 이유에 대해서 설명해주세요.

React는 Facebook에서 만든 오픈소스 라이브러리로, 웹 애플리케이션을 빠르고 쉽게 개발하도록 도와줍니다.

Virtual DOM React는 Virtual DOM을 사용하여 페이지 갱신 속도를 높입니다. Virtual DOM은 React에서 UI를 업데이트할 때 사용되는 메모리상의 가상 DOM입니다. 실제로는 DOM을 업데이트하지 않고, 이를 효율적으로 처리하여 성능을 개선합니다.

Component-Based Architecture React는 컴포넌트 기반 아키텍처를 사용하여 애플리케이션의 복잡성을 낮춥니다. 컴포넌트는 재사용 가능한 UI 조각으로 분리됩니다. 이러한 컴포넌트 기반 아키텍처는 코드 재사용성과 유지보수성을 높여주며, 대규모 애플리케이션을 더 쉽게 관리할 수 있게 합니다.

JSX React는 JSX라는 문법을 사용하여 자바스크립트 코드 안에 HTML 코드를 작성할 수 있게 해줍니다. 이를 통해 개발자는 UI를 보다 직관적으로 작성할 수 있고, 코드 가독성을 높일 수 있습니다.

Large Community and Ecosystem React는 매우 큰 개발자 커뮤니티와 함께 발전해왔습니다. 이 커뮤니티에서는 많은 개발자들이 React를 사용하는 방법과 문제 해결 방법을 공유하고 있습니다. 또한 React를 사용하기 위한 다양한 라이브러리와 도구들도 많이 존재하고 있습니다.

Performance Optimization React는 성능 최적화를 위한 다양한 기능을 제공합니다. 예를 들어, React는 PureComponent와 memo를 사용하여 불필요한 렌더링을 최소화합니다. 또한 React는 코드 스플리팅, 서버 사이드 렌더링 등의 기능을 제공하여 성능을 높일 수 있습니다.

꼬리 질문: SPA에서의 브라우저 렌더링 방식인 CSR / SSR의 차이를 설명해주세요.

https://studyhard-everyday.tistory.com/34

 

JSX가 무엇이고, 이것을 왜 사용해야 되는지 설명해주세요.

JSX(JavaScript XML)는 자바스크립트의 확장 문법으로서, HTML과 비슷한 문법을 사용하여 UI를 작성할 수 있게 해줍니다. React에서는 JSX를 사용하여 UI를 정의하고, 이를 JavaScript 객체로 변환하여 처리합니다.
JSX는 일반적인 자바스크립트와 달리 HTML 요소를 직접적으로 표현할 수 있습니다.

JSX는 HTML과 유사한 문법을 사용하기 때문에, UI 구성 요소를 더 직관적으로 작성할 수 있습니다. 이를 통해 코드의 가독성을 높여 개발자가 코드를 이해하고 유지보수하기 쉽게 만듭니다.

JSX는 컴포넌트를 사용하여 UI를 작성할 수 있게 해줍니다. 이를 통해 UI를 작은 조각으로 나누어 재사용성을 높일 수 있습니다.
컴포넌트는 props를 통해 다양한 데이터를 전달받아 다른 환경에서도 재사용이 가능하도록 설계됩니다.

JSX는 HTML과 유사한 문법을 사용하기 때문에, 디자이너와 개발자 사이의 협업이 용이해집니다. 또한, JSX를 사용하면 코드를 기능별로 나눌 수 있으며, 이를 통해 유지보수성을 높일 수 있습니다.

JSX를 사용하면 XSS(Cross-site scripting) 공격과 같은 보안 취약점을 예방할 수 있습니다. JSX는 자바스크립트 함수로 컴파일되기 때문에, 코드를 실행하기 전에 문자열 인코딩을 자동으로 처리합니다.

React에서 상태란 무엇이고, 상태 관리를 어떻게 효율적으로 할 수 있는지 설명해주세요.

React에서 상태(State)란 컴포넌트의 내부 데이터를 의미합니다. 상태는 컴포넌트 내에서 변경될 수 있으며, 상태가 변경될 때마다 React는 자동으로 UI를 업데이트합니다. 상태 관리는 React 애플리케이션의 성능과 확장성에 큰 영향을 미칩니다. 효율적인 상태 관리를 위해서는 다음과 같은 팁을 따르는 것이 좋습니다.

최소한의 상태를 유지
컴포넌트 내부의 상태는 최소한으로 유지해야 합니다. 상태가 많아지면 컴포넌트의 복잡도가 증가하고, 관리하기 어려워집니다. 필요한 경우 상태를 부모 컴포넌트로 올리거나, 상태 관리 라이브러리를 사용하는 것이 좋습니다.

상태 불변성을 지키기
상태를 변경할 때는 기존 상태를 직접 수정하는 것이 아니라, 기존 상태를 복제하여 수정하는 방식을 사용해야 합니다. 이렇게 함으로써 React는 기존 상태와 변경된 상태를 비교하여 변경된 부분만 업데이트할 수 있습니다. 이를 "상태 불변성을 지킨다"고 합니다.

상태 업데이트 함수를 사용하기
상태를 업데이트할 때는 상태 업데이트 함수(setState)를 사용해야 합니다. setState 함수는 비동기적으로 동작하며, 상태가 변경되면 자동으로 UI를 업데이트합니다. 또한, setState 함수는 이전 상태 값을 인자로 받으므로 상태 불변성을 유지할 수 있습니다.

상태를 최적화하기
React에서는 상태가 변경될 때마다 UI를 업데이트하므로, 불필요한 상태 업데이트를 피해야 합니다. 이를 위해 React.memo나 shouldComponentUpdate 같은 최적화 방법을 사용할 수 있습니다.

상태 관리 라이브러리 사용하기
React에서 상태 관리 라이브러리인 Redux나 MobX 같은 라이브러리를 사용하면 상태를 더 효율적으로 관리할 수 있습니다. 이러한 라이브러리를 사용하면 상태를 전역적으로 관리하고, 컴포넌트 간에 상태를 쉽게 공유할 수 있습니다.

꼬리 질문: useState는 비동기로 동작하나요 동기로 동작하나요? 만약 ~~로 동작한다면 그 이유는 무엇인가요?

하나의 페이지나 컴포넌트 내에도 수많은 상태값이 존재한다. 만약 이 상태 하나하나가 바뀔 때마다 화면을 리렌더링 한다면 문제가 생길수도 있다.

때문에 리액트는 성능의 향상을 위해서 setState를 연속 호출하면 배치 처리하여 한 번에 렌더링하도록 하였다. 아무리 많은 setState가 연속적으로 사용되었어도 배치 처리에 의해서 한 번의 렌더링으로 최신 상태를 유지하는 것이다.

배치란 React가 너 나은 성능을 위해 여러개의 state 업데이트를 하나의 리렌더링으로 묶는 것을 의미한다.

 

React Router에 대해 설명해주세요.

React Router는 React 애플리케이션에서 브라우저의 URL을 관리하는 라이브러리입니다. React Router를 사용하면 애플리케이션의 다른 URL 경로에 대한 뷰를 간단하게 정의하고, URL이 변경될 때마다 뷰를 업데이트할 수 있습니다.

React Router는 다음과 같은 기능을 제공합니다.

Route: 특정 URL 경로에 대한 뷰를 정의합니다. Route 컴포넌트를 사용하면 URL 경로와 일치하는 경우 특정 컴포넌트를 렌더링할 수 있습니다.
Link: 다른 URL 경로로 이동할 수 있는 링크를 정의합니다. Link 컴포넌트를 사용하면 사용자가 클릭할 때 브라우저의 URL을 변경할 수 있습니다.
Redirect: 다른 URL 경로로 리다이렉트합니다. Redirect 컴포넌트를 사용하면 특정 URL 경로로 접근하면 다른 URL 경로로 이동할 수 있습니다.
Switch: 여러 Route 컴포넌트 중에서 첫 번째로 일치하는 것만 렌더링합니다. 이를 통해 중복된 URL 경로 처리를 방지하고, 더 효율적인 라우팅을 구현할 수 있습니다.

React Router를 사용하면 URL 경로와 뷰를 간단하게 매핑할 수 있으며, 이를 통해 사용자가 브라우저에서 애플리케이션을 보다 쉽게 탐색할 수 있습니다. 또한, React Router는 서버 측 렌더링과 같은 고급 기능도 제공하므로, 대규모 애플리케이션에서도 유용하게 사용할 수 있습니다.

 

React 컴포넌트의 key 속성에 대해서 설명해주세요.

리액트에서 key는 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 속성입니다이 때 Key는 배열 내부의 엘리먼트에 지정되는 고유한 값으로React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다.

🎙 키를 지정하지 않으면 어떻게 되나요?
명시적으로 key를 지정하지 않으면 React는 기본적으로 인덱스를 key로 사용합니다.하지만, 항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 사용하는 것은 권장하지 않습니다. 성능이 저하되거나 컴포넌트의 state와 관련된 문제가 발생할 수 있습니다.
🎙 state와 관련된 문제가 뭐죠?
key를 index로 사용 하고, 새로운 컴포넌트가 들어오게 된다면React는 기존의 첫번째 컴포넌트와 새로운 컴포넌트가 같은 key값을 가지고 있으니같은 컴포넌트라 생각하게 되어 기존의 컴포넌트를 그대로 그려주게 될것입니다.따라서 key는 반드시 변하지 않고, 예상 가능하며, 유일해야 합니다.

 

Props와 State에 대해 설명해주세요.

 

꼬리 질문 : 클래스형컴포넌트와 함수형컴포넌트의 가장 큰 차이는 무엇이라고 생각하나요

클래스형 컴포넌트와 함수형 컴포넌트의 가장 큰 차이점은 상태(state)와 생명주기(lifecycle) 관리입니다.
클래스형 컴포넌트는 state를 직접적으로 관리할 수 있으며, 클래스 내부에 라이프사이클 메소드를 정의하여 컴포넌트 생명주기를 관리할 수 있습니다. 또한, 클래스형 컴포넌트는 this 키워드를 사용하여 클래스 메소드에 접근할 수 있습니다.

반면에 함수형 컴포넌트는 이전에는 state와 라이프사이클을 관리할 수 없었지만, React 16.8 버전부터 Hooks가 도입되면서 state와 라이프사이클을 관리할 수 있게 되었습니다. 이를 통해 함수형 컴포넌트에서도 state와 라이프사이클을 관리할 수 있게 되었으며, 코드의 가독성과 재사용성이 더욱 개선되었습니다. 또한, 함수형 컴포넌트는 this 키워드를 사용하지 않아도 되므로 코드가 간결해지는 장점이 있습니다.

따라서, 클래스형 컴포넌트와 함수형 컴포넌트의 가장 큰 차이점은 상태와 생명주기를 관리하는 방식입니다. 하지만 Hooks가 도입되면서 두 가지 방식 간의 차이가 줄어들고 있으며, 이제는 둘 중 하나를 선택하는 것이 아니라 상황에 맞게 사용하는 것이 중요합니다.

 

가상 돔에 대해 설명해주세요.

브라우저의 렌더링 엔진은 DOM 트리가 수정될 때마다 새로운 렌더 트리와 레이아웃을 생성하고 repaint 해야하기 때문에 동적 UI의 경우 성능이 저하될 수 있다. 이러한 이슈를 해결하기 위해 나온 것이 Virtual DOM이다.

이전 DOM과 가상 DOM에 있는 내용을 비교하여 바뀐 부분만 실제 DOM에 적용한다.react에서는 변경된 부분(diff)만을 계산하여 실제 DOM에 적용한다.
결과적으로 브라우저는 불필요한 렌더링 횟수를 줄이고 한번만 렌더링 할 수 있다.

 

 

리액트가 불변성을 지켜야 하는 이유가 무엇인가요?














번외 질문

useState는 비동기로 동작하나요 동기로 동작하나요? 만약 ~~로 동작한다면 그 이유는 무엇인가요?

함수형 컴포넌트는 클래스형 컴포넌트의 라이프사이클메서드들을 대체하는 훅을 많이 만들었습니다. 
그렇다면 함수형 컴포넌트로는 대체하지 못하는 클래스형 컴포넌트의 라이프사이클메서드는 무엇이 있을까요? 생각나는대로 말해보세요

클래스형컴포넌트와 함수형컴포넌트의 가장 큰 차이는 무엇이라고 생각하나요

아니면 상태끌어올리기와 props drilling을 연관지어 설명해보세요 또한 props drilling을 해결하기 위한 방법으로 어떤 것을 채택할 수 있을까요?

마운트 / 언마운트 / 업데이트 상태 모두 반드시 실행되어야하는 라이프사이클메서드가 무엇인지 아는대로 말해보세요