- 리액트 Flux 패턴이란?
다른 프레임워크들은 주로 MVC, MVVM, MVW 아키텍처를 사용한다. 이러한 MVC 패턴은 데이터의 변경 사항을 신속하게 전파하기 어렵다. 모델이 늘어날수록 전파해야할 대상도 함께 늘어나기 때문이다. 따라서 소규모 애플리케이션에는 적합할 수 있지만, 대규모 애플리케이션에서는 복잡성이 증가해 성능이 떨어질 수 있다.
페이스북은 이를 해결하기 위해 Flux 패턴을 만들었다. 모델이 뷰를 반영하고, 뷰가 모델을 변경하는 양방향 데이터 흐름에서 벗어나 단방향으로 데이터를 변경할 수 있도록 만든 구조이다. 따라서 개발자는 오직 뷰에만 집중해서, 어떻게 변화를 줄지 신경 쓸 필요가 없고, 뷰가 어떻게 생길지 선언하면 된다. 또한 리액트는 가상돔을 사용해 UI 업데이트를 간결하게 처리하면서 지속적으로 데이터가 변화하는 대규모 애플리케이션에서 빠른 성능을 보여준다.
- 가상돔이란(+동작 방식)?
UI는 사용자의 요구사항에 따라 수시로 업데이트된다. 업데이트 과정에서 실제 DOM이 변경되면 업데이트 된 요소와 그 자식 요소를 다시 렌더링 해야하는데, 이러한 일련의 과정이 UI 속도를 느리게 만든다.
가상돔 실제 DOM이 아니라 이를 추상화한 자바스크립트 객체이다. 마치 실제 DOM의 가벼운 사본과 비슷하다. 가상돔은 실제 DOM을 조작하는 것이 아니라, diff 알고리즘을 통해 전/후 상태를 비교하여 차이를 계산한 다음 변경된 부분만 실제 DOM에 업데이트하므로 UI 속도를 크게 향상시킬 수 있다.
React는 이러한 가상돔을 사용해 성능을 향상시키는 방식을 채택했다.
- JSX란?
자바스크립트의 확장 문법이며 XML과 모양새가 비슷하다. JSX로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태로 트랜스파일링한다. 따라서 트랜스파일링된 결과물인 React.createElement 함수를 매번 사용하면 불편하고 가독성도 좋지 않으므로 JSX를 사용해서 편하게 UI를 렌더링 할 수 있다.
또한 JSX는 XSS(cross-site-scripting) 공격을 방지한다.
- XSS(cross-site-scripting) 공격이란?
- 사용자를 대상으로 한 공격이다.
- 사용자의 입력폼에 악성 스크립트를 입력해 렌더링을 할 때 스크립트가 실행되는 공격 방식이다.
- 이 취약점은 사용자로부터 입력받은 값을 제대로 검사하지 않고 사용할 경우 나타난다.
- 이스케이프란?
JAVA를 예로 들면 "를 문자열로 인식 시키기 위해 \"로 표현하는 것처럼, HTML < 등 구문으로 분리되는 문자들을 텍스트로 인식시키기 위해 <처럼 작성하는 방법을 말한다.
이런 특성으로 React DOM은 기본적으로 XSS 공격을 방지한다.
// 다음 두 내용은 동일하다.
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);- 리액트에서 엘리먼트(element)란?
엘리먼트는 React 앱의 가장 작은 단위이다. 즉, 컴포넌트의 구성요소이다. 브라우저의 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며 쉽게 생성할 수 있다. React DOM은 React 엘리먼트와 DOM이 일치하도록 DOM을 업데이트 한다. React 엘리먼트는 불변객체 이다. 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다. 엘리먼트는 영화에서 하나의 프레임과 같이 특정 시점의 UI를 보여준다.
- 컴포넌트란?
리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체이다. 리액트에서는 마크업과 로직을 포함하는 컴포넌트를 사용해서 관심사를 분리한다. 컴포넌트는 다른 프레임워크에서 사용자 인터페이스를 다룰 때 사용하는 템플릿과는 다른 개념이다. 템플릿은 보통 데이터 셋이 주어지면 HTML 태그 형식을 문자열로 반환하는데, 이와 달리 컴포넌트는 재사용 가능한 API로 수많은 기능들을 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의한다.
⇒ 컴포넌트는 재사용 가능한 최소단위
- 컴포넌트의 사용했을 때 장점?
컴포넌트는 자바스크립트 함수와 유사하다. 컴포넌트를 통해 UI를 재사용 가능한 여러 조각으로 나눌 수 있고, 각 조각들을 개별적으로 살펴볼 수 있다.(유지보수 용이)
- 컴포넌트의 구조
props라고 하는 임의의 객체를 매개변수로 받은 후, 화면에 어떻게 표시되는지 기술하는 React 엘리먼트를 반환한다.
- 컴포넌트의 이름
React에서 소문자로 시작하는 컴포넌트는 DOM 태그로 처리한다. 따라서 컴포넌트의 이름은 항상 대문자로 시작해야 한다.
- props의 특징
React는 매우 유연하지만 한 가지 엄격한 규칙이 있다. 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수함수처럼 동작해야 한다. 라는 규칙이다. 즉, props는 읽기 전용이다. 따라서 컴포넌트에서 직접 props를 수정해서는 안되고, 상태를 통해 자신의 출력값을 변경해야 한다.
- state란?
state는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다.
- state와 props의 차이점
props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값이다. 자식 컴포넌트는 props를 받아오기만 하고, 직접 수정할 수는 없다. 즉, props는 읽기전용이다. 반면 state는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다.
- 마운트와 언마운트란?
처음 DOM이 렌더링 될 때를 "마운트 되었다."라고 하고, 생성된 DOM이 삭제될 때를 "언마운트 되었다."라고 한다.
- 클래스 컴포넌트에서 상태
-
직접 state를 변경하면 안된다.
⇒ 직접 변경할 경우, 컴포넌트를 리렌더링하지 않는다. 반드시 setState를 사용해 상태를 업데이트해야한다.
-
state 업데이트는 비동기적일 수도 있다.
⇒ 따라서 객체보다는 함수를 인자로 사용하는 setState를 사용하면 이를 해결할 수 있다.
// Wrong, 아래 코드는 카운터 업데이트에 실패할 수 있다.
this.setState({
counter: this.state.counter + this.props.increment,
});
// Correct
this.setState((state, props) => {
counter: state.counter + props.increment
})- state는 소유하고 있는 컴포넌트 이외에 어떠한 컴포넌트도 접근할 수 없다.
⇒ 컴포넌트는 자신의 state를 자식 컴포넌트의 props로 전달할 수 있다.
⇒ 일반적으로 이를 하향식(top-down) 또는 단방향식 데이터 흐름이라고 한다.
- 하향식(top-down) 또는 단방향식 데이터 흐름이란?
컴포넌트는 자신의 state를 props를 통해 자식 컴포넌트에게 전달할 수 있다. 그 state로부터 파생된 UI 또는 데이터는 오직 트리구조에서 자신의 아래에 있는 컴포넌트에만 영향을 미친다. 이를 하향식 또는 단방향 데이터 흐름이라고 한다.
- 자바스크립트 이벤트와 React 이벤트의 차이점
- React의 이벤트는 카멜 케이스를 사용한다.
- JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다.
<button onclick="activateLasers()">
Activate Lasers
</button>
<button onClick={activateLasers}>
Activate Lasers
</button>- React 이벤트는 브라우저 고유 이벤트와 정확히 동일하게 동작하지는 않는다. 합성 이벤트(SyntheticEvent)를 사용한다.
