[React] 면접 예상 질문 & 답변

1. 리액트의 기본 개념

📌 리액트에서 “컴포넌트”와 “프로퍼티(props)” 에 대해 설명

리액트에서 컴포넌트는 UI를 구성하는 독립적인 단위입니다. 각 컴포넌트는 자체적인 상태(state)를 가질 수 있으며, 다른 컴포넌트들과 props를 통해 데이터를 주고받습니다. 
props는 부모 컴포넌트가 자식 컴포넌트에 전달하는 읽기 전용 데이터입니다. 예를 들어, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 props를 사용합니다. 컴포넌트는 리액트 애플리케이션의 UI 구성 요소를 만들 때 중요한 역할을 합니다.

📌 리액트에서 “상태(state)”와 속성(props)”의 차이점

상태(state)는 컴포넌트 내부에서 관리되는 동적인 데이터이고, 속성(props)은 부모 컴포넌트에서 자식 컴포넌트로 전달되는 정적인 데이터입니다. 상태는 자주 변화할 수 있는 값에 사용되며, props는 컴포넌트를 재사용하고 데이터 전달을 관리하는 데 유용합니다.

📌 리액트의 라이프 사이클, 각 라이프 사이클 메소드의 역할

리액트의 라이프 사이클은 컴포넌트가 생성되고, 업데이트되고, 제거되는 과정에서 호출되는 여러 메소드들로 구성됩니다.
먼저, 마운트 단계에서는 컴포넌트가 처음 DOM에 렌더링될 때 호출됩니다. constructor()는 컴포넌트를 초기화하는 데 사용되고, render()는 UI를 렌더링합니다. componentDidMount()는 컴포넌트가 마운트된 후 한 번 호출되며, API 호출이나 초기 설정을 할 때 유용합니다.

다음은 업데이트 단계입니다. 컴포넌트의 상태나 속성(props)이 변경되면 업데이트가 발생합니다. shouldComponentUpdate()는 렌더링을 진행할지 여부를 결정하는 메소드로, 성능 최적화에 유용합니다. render()는 UI를 다시 렌더링하고, componentDidUpdate()는 업데이트 후에 호출되어 DOM 업데이트 이후 처리할 작업을 넣을 수 있습니다.

마지막으로 언마운트 단계에서는 컴포넌트가 DOM에서 제거될 때 호출되는 componentWillUnmount()가 있습니다. 이 메소드는 리소스를 정리하거나, 타이머를 정지하는 등의 작업을 할 때 사용됩니다.

함수형 컴포넌트에서는 useEffect 훅을 활용하여 마운트, 업데이트, 언마운트 작업을 처리할 수 있습니다.

 

2. 리액트의 성능 최적화

📌 리액트에서 불필요한 렌더링을 방지하기 위한 방법

첫 번째는 shouldComponentUpdate 메소드를 사용해 상태나 props가 변경되지 않은 경우 렌더링을 방지할 수 있습니다.
두 번째는 React.memo를 사용하여 순수 컴포넌트(props가 변경되지 않으면 다시 렌더링하지 않는 컴포넌트)에 적용할 수 있습니다.
세 번째로, useMemo나 useCallback을 사용하여 메모이제이션을 통해 성능을 최적화할 수 있습니다. 이 방법들은 렌더링 성능을 최적화하고, 컴포넌트가 불필요하게 다시 렌더링되는 것을 방지하는 데 유용합니다.

📌 shouldComponentUpdate와 React.memo는 어떻게 사용? 그 차이점은 ?

shouldComponentUpdate는 클래스형 컴포넌트에서 사용되며, 리렌더링 여부를 직접 제어합니다.
React.memo는 함수형 컴포넌트에서 사용되며, props가 변경되지 않으면 리렌더링을 방지합니다. React.memo는 내부적으로 shouldComponentUpdate와 같은 역할을 하지만, 함수형 컴포넌트에 적합합니다.

📌 useMemo와 useCallback을 언제 사용해야 하는지 설명

useMemo는 값을 메모이제이션하고, 값이 변경되지 않으면 다시 계산하지 않도록 합니다. 주로 계산 비용이 큰 값이 있을 때 사용합니다.
useCallback은 함수를 메모이제이션하여, 함수가 불필요하게 다시 생성되지 않도록 합니다. 자식 컴포넌트에 함수가 props로 전달될 때, 자식 컴포넌트의 불필요한 리렌더링을 방지하고 싶을 때 유용합니다. 
두 훅 모두 불필요한 연산이나 함수 생성을 방지하여 리렌더링 성능을 최적화할 수 있습니다.
(useMemo: 값 계산 최적화할 때 사용 / useCallback: 함수 재생성 최적화할 때 사용)

 

3. 상태 관리

📌 리액트에서 상태 관리는 어떻게 이루어짐? useState 외에 다른 상태 관리 도구는?

리액트에서 상태 관리는 컴포넌트 내부에서 useState를 사용하여 이루어집니다. useState는 컴포넌트 내에서 상태 변수를 정의하고, 이 변수의 값을 업데이트할 수 있는 함수도 제공합니다. 예를 들어, 사용자 입력에 따라 화면을 동적으로 변경해야 할 때 useState를 사용합니다.
또한, 상태 관리가 더 복잡해지거나 여러 컴포넌트 간에 상태를 공유해야 할 경우 리덕스(Redux)를 사용할 수 있습니다. 리덕스는 중앙 집중식 스토어에서 상태를 관리하며, 액션과 리듀서를 통해 상태를 변경하는 방식입니다. 이러한 방식으로 상태 관리를 쉽게 확장하고, 디버깅할 수 있습니다.

📌 useReducer와 useState의 차이점에 대해 설명

useState와 useReducer는 리액트에서 상태를 관리하는 두 가지 훅입니다. useState는 간단한 상태를 관리할 때 사용하고, 상태 값을 직접 수정하며 상태 변화가 간단한 경우 적합합니다. 
반면, useReducer는 여러 상태 변수나 복잡한 상태 변화 로직을 관리할 때 사용합니다. useReducer는 리듀서 함수와 dispatch를 사용해 상태를 변경하며, 상태 업데이트 로직을 더 명확하게 분리할 수 있습니다. 
따라서 useState는 상태 관리가 간단할 때, useReducer는 복잡한 상태 변경이나 여러 액션을 다룰 때 유용합니다.

 

4. 데이터처리와 비동기 작업

📌 비동기 작업을 리액트에서 어떻게 처리? 

리액트에서 비동기 작업을 처리할 때는 useEffect 훅을 많이 사용합니다. useEffect는 컴포넌트가 렌더링된 후 특정 작업을 실행할 때 사용됩니다. 예를 들어, 데이터를 API에서 가져오는 경우, useEffect 안에서 비동기 작업을 실행하고, async/await을 사용하여 비동기적으로 데이터를 처리할 수 있습니다.

📌 API 호출 시 발생할 수 있는 문제와 이를 해결하는 방법에 대해 설명

API 호출 시 발생할 수 있는 문제는 여러 가지가 있습니다.
먼저, CORS 문제는 다른 도메인에서 API를 호출할 때 보안상의 이유로 발생할 수 있습니다. 이를 해결하려면 서버에서 CORS 헤더를 설정하거나 프록시 서버를 사용합니다.
또한, 잘못된 API 응답 형식이나 오류가 발생할 수 있는데, 이때는 응답을 체크하고 예외 처리를 통해 오류를 처리합니다.
마지막으로 인증 문제는 토큰을 올바르게 관리하고 요청 헤더에 적절한 인증 정보를 포함시켜 해결할 수 있습니다.

📌 리액트에서 서버사이드 렌더링(SSR)과 클라이언트사이드 렌더링(CSR)의 차이점

서버사이드 렌더링(SSR)과 클라이언트사이드 렌더링(CSR)은 렌더링이 이루어지는 위치가 다릅니다.
SSR은 서버에서 HTML을 렌더링하여 클라이언트에 전달하는 방식으로, 초기 로딩 속도가 빠르고 SEO(검색엔진 최적화)에 유리합니다. 하지만 매 요청마다 서버에서 렌더링을 해야 하므로 서버 부하가 클 수 있습니다.
반면, CSR은 클라이언트에서 JavaScript로 페이지를 동적으로 렌더링하는 방식으로, 초기 로딩은 느릴 수 있지만 서버 부하가 적고, 페이지 전환이 빠르며 사용자 경험이 좋습니다.

 

5. 컴포넌트 설계 및 UI 구현

📌 UI 컴포넌트를 설계할 때 중요한 점은 무엇

UI 컴포넌트를 설계할 때 가장 중요한 점은 재사용성입니다. 가능한 한 작은 단위로 컴포넌트를 분리하여, 다른 곳에서도 쉽게 재사용할 수 있도록 합니다. 또한, 각 컴포넌트가 단일 책임 원칙(Single Responsibility Principle)을 따르도록 설계하여 유지보수성을 높입니다. 예를 들어, 하나의 컴포넌트가 화면의 구조, 스타일링, 동작 등을 모두 처리하는 대신, 프레젠테이셔널 컴포넌트(UI를 그리는 역할)와 컨테이너 컴포넌트(비즈니스 로직과 상태 관리를 처리)를 구분하여 설계합니다. 이렇게 분리된 컴포넌트는 더 직관적이고 관리하기 쉬워집니다.

📌 리액트에서 컨테이너 컴포넌트와 프레젠테이셔널 컴포넌트의 차이를 설명

컨테이너 컴포넌트는 주로 애플리케이션의 상태를 관리하고, 데이터 로직을 처리하는 역할을 합니다. 이 컴포넌트는 주로 다른 컴포넌트들을 포함하고, 필요한 데이터를 props로 전달해줍니다. 예를 들어, API 호출 후 데이터를 가져와서 자식 컴포넌트에 전달하는 역할을 합니다.
프레젠테이셔널 컴포넌트는 주로 UI를 렌더링하는 역할만 수행합니다. 상태 관리나 데이터 로직을 처리하지 않고, 전달받은 props를 기반으로 화면을 그립니다. 즉, 이 컴포넌트는 UI만 신경 쓰고, 데이터를 어떻게 처리할지에 대한 로직은 신경 쓰지 않습니다.
간단히 말해, 컨테이너 컴포넌트는 "기능적"이고, 프레젠테이셔널 컴포넌트는 "표현적"입니다.

📌 리액트에서 상태가 관리되는 컴포넌트와 순수 컴포넌트를 어떻게 나누는지 설명

리액트에서 상태가 관리되는 컴포넌트는 내부에서 state를 사용하여 데이터를 관리하고, 이를 변경하는 로직을 포함합니다. 예를 들어, 버튼을 클릭하면 상태가 변경되고 UI가 업데이트되는 방식입니다.
반면, 순수 컴포넌트는 state를 가지지 않고, 부모 컴포넌트로부터 전달받은 props만을 이용해 UI를 렌더링합니다. 순수 컴포넌트는 상태 관리 없이 화면을 그리는 역할만 하죠. 이렇게 두 가지 컴포넌트를 구분하면, 상태 관리와 UI 렌더링을 효율적으로 분리하여 코드의 재사용성과 유지보수성을 높일 수 있습니다.