면접준비를 하면서 react 개발관련 이론에 대해 정리해야할 필요성을 느꼈다.
기본기가 탄탄한 개발자가 되기 위해서 react 관련 면접질문에 대해 정리하도록 하자!

React란?

사용자 인터페이스를 만드는 자바스크립트 라이브러리
페이스북 개발팀에서 개발

리액트는 타 프레임워크가 MVC, MVW패턴을 고려함과 달리 View만 신경쓴다. 데이터의 변화에 따라서 화면을 렌더링1 하면서 성능을 아끼고 최적화 한다.
렌더링: 사용자화면에 뷰를 보여주는 것

어떻게?
-> Virtual DOM 방식을 사용해서 DOM처리 횟수를 줄이고 효율적으로 진행한다.

Virtual DOM?

가상돔(Virtual DOM)을 이해하기 전에 먼저 돔(DOM)에 대한 이해가 필요하다.

1. DOM이란?

DOM(Document Object Model)은 객체로 문서의 구조를 표현하는 방법으로 XML이나 HTML로 작성되며 트리구조로 이루어져있다.

2. Virtual DOM이란?

Virtual DOM은 이 트리구조로 작성된 자바스크립트 객체인 DOM을 추상화 한 모델이다.

3. Virtual DOM의 작동원리

1. 데이터가 업데이트 되면 전체 UI를 Virtual DOM에 리렌더링 함
2. 이전의 Virtual DOM에 내용과 비교
3. 변화 된 부분만 실제 DOM에 적용

즉, 변화 된 부분만 적용하기 때문에 실제 DOM을 조작하는 것 보다 성능이 향상 될 수 있다.
이 Virtual DOM을 활용하는 것이 리액트의 가장 큰 특징이며 장점이고 핵심이다.

JSX문법

1. 자바스크립트 코드는 {}중괄호 구역 안에서 사용한다. return <p>{text}</p>
2. 하나의 루트를 가지고 리턴한다. return <div></div>
3. 모든 태그를 잘 닫아야한다. </>

props와 state

1. props?

리액트에서 컴포넌트에 속성을 설정 할 때 사용하는 요소

props는 properties를 줄인 말로 컴포넌트 내부에서 속성을 설정할 때 사용되며 부모 컴포넌트에 의해 설정되며 값을 전달 할 수 있다.

2. State?

컴포넌트 내부에서 바뀔 수 있는 값

props가 부모 컴포넌트에서 값이 설정 됨과 다르게 state는 컴포넌트 내부에서 바뀔 수 있는 값이다.

react map()함수

컴포넌트를 반복시켜서 렌더링 할 때 자바스크립트 내장객체인 map()함수를 사용하게 된다. 리액트에서 map()함수는 자바스크립트의 함수와 동일하지만 반환값에 join()을 별도로 사용하지 않아도 된다는 편의점이 있다.

1. map()사용 시 주의점

react에서 map()함수를 사용해서 컴포넌트의 요소를 구성할 때 주의할 점은 key props값을 유일한 값으로 넣어주어야 한다는 점이다.

2. key props?

react가 어떤 항목에 대해 변경, 추가 또는 삭제할지에 대한 식별 값

react에서 컴포넌트 배열의 변화를 감지할 때 순차적으로 위에서부터 읽어들이게 된다. 이때 key를 설정하면 이 key값의 변화를 읽어 변화를 좀 더 빠르게 알아낼 수 있다. 그래서 key값은 유일한 값으로 설정해야 렌더링 성능 향상에 유리하다.

Component?

리액트에서 요소를 구성하는 요소들의 집합체

1. class type component

state 기능 및 라이프사이클 기능을 사용할 수 있고 임의의 메서드를 정의할 수 있는 컴포넌트

1-1. 클래스형 컴포넌트에서의 라이프사이클 메서드

• componentDidMount
• componentDidUpdate
• componentWillUnmount

1-2. 클래스형 컴포넌트 사용

import { Component } from 'react';

class App extends Component{
	render(){
    	const text = '클래스형컴포넌트';
        return <div>{text}</div>;
    }
}

2. function type component

컴포넌트의 라이프사이클을 useState와 useEffect로 관리하고 일반적인 함수의 형태로 선언되는 컴포넌트

v16.8이후로 Hooks를 통한 함수형 컴포넌트의 상태관리가 가능하므로 함수형 컴포넌트의 사용을 권장하고 있다.

2-1. 함수형 컴포넌트 사용

function App(){
	const text = '함수형컴포넌트';
	return<div>{text}</div>;
}
export defalut App;

3. 차이점 및 장단점

1. 클래스형은 라이프사이클 메서드를 통해 컴포넌트의 라이프사이클을 관리한다.
2. 클래스형에 비해 함수형이 선언이 편하며 자원소모도 적다.
3. 클래스형은 state값을 this.state로 설정하고 this.setState로 핸들링한다. 함수형은 useState로 설정하고 핸들링한다.
4. 클래스형은 props값을 this.props로 불러오고 함수형은 랜더함수의 파라미터로 전달받아 사용한다.

react 성능 최적화?

1. 상태를 업데이트 할 때 기존값을 업데이트 하지 않도록 함 - 불변성유지
   • 예시) 배열에 새로운 항목 추가 시 push 대신 concat 사용
2. 컴포넌트 배열 구성 시 key props값을 유일한 값으로 설정 - 변화 감지가 빠름
3. 함수형 컴포넌트의 사용 - 메모리자원의 사용이 적고 빌드파일의 크기도 작음