[React] 리액트를 다루는 기술 1-5장 키워드 정리

키워드: React, JSX, 컴포넌트, 이벤트, ref

---

1장 리액트 시작

React

1. React란 무엇인가?

• React는 페이스북에서 제공하는 자바스크립트 UI 라이브러리 ➡️ 즉,  React 프론트엔드 라이브러리의 일종
• Vue, Angular 등은 프레임워크인 데 반해 React는 라이브러리
  ➡️ 웹을 만드는 데 꼭 필요한 도구들이 전부 기본적으로 제공되지 않는다. 그런만큼 가볍고, 선택의 폭이 넓다.
• React는 컴포넌트 기반
  ➡️ 컴포넌트에 데이터를 흘려보내면 설계된 대로 UI가 조립되어 사용자에게 보여진다.

자바스크립트 기반 프레임워크 (출처: 리액트를 다루는 기술)

1.1 React를 사용하는 이유

프로젝트 규모가 크고 다양한 UI와 상호작용이 필요하다면 DOM 요소 하나하나를 직접 관리하는 것은 힘든 일이다.

또, 복잡하게 늘어진 코드를 리팩토링 하는 것도 점점 힘들게 된다.

React를 사용하면 사용자와 상호작용할 수 있는 interactive한 UI를 쉽게 만들 수 있다. 

React를 사용하면 기능과 UI 구현에 집중하고 불필요한 주의력 분산을 줄일 수 있게 된다.

또, React를 사용하면 브라우저 전체를 새로고침 하지 않고도 컨텐츠를 빠르게 변경할 수 있다.

1.2 React의 작동방식

React는 이벤트로 인해 데이터를 관리하는 Model에 변화가 생기면 Virtual DOM을 생성한다.

이후 Virtual DOM과 실제 DOM을 비교하고, 변화가 발생한 부분만 업데이트 한다.

1.3 왜 Virtual DOM인가?

복잡한 SPA에서는 DOM 조작이 많이 발생한다. 그 때마다 브라우저가 연산을 해야 하므로 전체적인 프로세스가 비효율적으로 되기 쉽다.

하지만 Virtual DOM을 사용하면, 실제 DOM에 적용시키기 전 가상의 DOM을 만들어 적용시키고, 최종 완성된 결과만을 실제 DOM으로 전달한다.

이를 통해 브라우저가 진행하는 연산의 양을 줄일 수 있어 성능이 개선된다.

Virtual DOM은 렌더링도 되지 않기 때문에 연산 비용이 적다. 모든 변화를 Virtual DOM을 통해 묶고 이를 실제 DOM으로 전달한다.

 

2. React의 특징

2.1 Flux 패턴과 단방향 데이터 바인딩

React는 양방향 바인딩이 전제되는 MVC 패턴과는 다른 특징

페이스북에서 Flux라고 부르는 패턴이 적용되어 있는데, 단방향 바인딩이 특징이다.

2.2 Component 기반 구조

React는 UI(혹은 View)를 여러 컴포넌트(Component) 쪼개서 만든다.

한 페이지 안에서도 Header, Footer 등 각 부분을 독립된 컴포넌트(Component)로 만들고, 컴포넌트들을 조립해 화면을 구성

컴포넌트 기반이라는 점은 React의 큰 장점이다.

여러 화면에서 재사용되는 코드를 반복해 입력할 필요 없이 컴포넌트만 임포트해 사용하면 된다.

또, 기능단위, UI단위로 쪼개어 코드를 관리하므로, 어플리케이션이 복잡해져도 코드의 유지보수가 용이하다.

2.3 Virtual DOM

Virtual DOM과 실제 DOM의 차이는 Tree Diff Algorithm을 통해 계산된다. 일반적으로 트리를 다른 트리로 바꾸는 알고리즘은 O(n^3)의 시간복잡도를 가지게 된다.

React는 그들만의 휴리스틱한 알고리즘을 만듦으로써 시간복잡도를 O(n)으로 개선하였다

2.4 JSX 문법

React는 JSX로 짜여진다. JavaScript가 아니다.

 

참고: https://dev-yakuza.posstree.com/ko/react/create-react-app/react/

React란

---

2장 JSX

JSX

JSX는 자바스크립트의 확장 문법이며, XML과 매우 유사. JSX 형식으로 작성된 코드는 브라우저에서 실행되 전 코드가 번들링되는 과정에서 바벨을 사용해 일반 자바스크립트 형태로 코드 변환됨.

➡️ JSX는 자바스크립트와 HTML을 동시에 사용하며, HTML에 자바스크립트의 변수들을 바로 사용할 수 있는 일종의 템플릿 언어

function App() {
	return (
    	<div>
        	Hello <b>react</b>
        </div>
    );
}

위와 같이 작성된 JSX코드를 Javascript로 변경시

function App() {
	return React.createElement("div", null, "Hello", React.createElement("b", null,
    "react"));
}

와 같다. ➡️ JSX를 사용하면 매우 편하게 UI를 렌더링할 수 있음

* JSX는 자바스크립트 문법이 아니다

 

JSX 문법

• 감싸인 요소
  컴포넌트 내 여러 요소 존재 시 반드시 부모 요소 하나로 감싸야 함
• 자바스크립트 표현
  JSX 내부에서 코드를 { }로 감싸면 JS 표현 사용 가능
• If 문 대신 조건부 연산자
• AND 연사자(&&)를 사용한 조건부 렌더링
• undefined 렌더링 X
• 인라인 스타일링 가능
• class 대신 className
  className 대신 class 사용 가능하나 console 탭에 warning이 나타남.
• 꼭 닫아야 하는 태그

---

3장 컴포넌트

1. 컴포넌트

컴포넌트는 개념적으로 props를 input으로 하고 UI가 어떻게 보여야 하는지 정의하는 React Element를 output으로 하는 함수

따라서 합성을 이용하여 “UI를 재사용할 수 있고 독립적인 단위로 쪼개어 생각”할 수 있게 한다.

그래서 컴포넌트는 React.Component를 상속받아 정의하지만 컴포넌트 간에는 상속보다는 합성을 사용하길 권장(공식문서)

 

1.1 컴포넌트의 종류

1.1.1 함수형 컴포넌트

장점

클래스형컴포넌트보다 선언하기 편리

메모리 자원도 덜 사용

단점

state와 라이프 사이클 API 사용 불가 -> Hooks 도입으로 해결

 

1.1.2 클래스형 컴포넌트

state 기능 및 라이프사이클 기능 사용 가능

render 함수가 있어야 하며, 그 안에서 보여 주어야 할 JSX를 반환

* 리액트 공식 매뉴얼에는 컴포넌트 작성 시 함수형 컴포넌트와 Hooks 사용을 권장하나, 클래스형 컴포넌트가 사라지는 것은 아니므로 클래스형 컴포넌트의 기능을 알아두어야함.

 

1.2 props

properties의 줄인 표현으로 컴포넌트 속성 설정 시 사용하는 요소

props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정 가능

(부모로 부터 전달되는 props가 없을 경우 props 기본값 설정을 위해 defaultProps를 사용하기도 함)

props를 바꾸기 위해서는 부모 컴포넌트에서 바꾸어 주어야함.

1.2.1 children

리액트 컴포넌트 사용 시 컴포넌트 태그 사이의 내용을 보여 주는 props

(props.children 형식으로 사용)

 

1.3 state

리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미

리액트에는 클래스형 컴포넌트가 지니고 있는 state, 함수형 컴포넌트에서 useStateㄹ 함수를 통해 사용하는 state 2가지가 존재.

 

state 사용 시 주의 사항

클래스 또는 함수형 컴포넌트에서 state 사용 시, state 값 변경 경우 setState 혹은 useState를 통해 전달 받은 세터 함수를 사용해야함.

배열 또는 객체의 경우, 배열 또는 객체 사본을 만들고, 그 사본에 값을 업데이트 한 뒤, 그 사본의 상태를 setState 혹은 세터 함수를 통해 업데이트 해야함.

---

4장 이벤트 핸들링

1. 이벤트

사용자가 웹 브라우저에서 DOM 요소들과 상호작용하는 것

 

1.1 이벤트 사용 시 주의 사항

이벤트 이름은 카멜 표기법으로 작성(ex, onClick, onKeyUp)

이벤트 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달

DOM 요소에만 이벤트 설정 가능

 

클래스 컴포넌트

함수가 호출될 때 this는 호출부에 따라 결정되므로, 클래스의 임의 메서드가 특정 HTML 요소의 이벤트로 등록되는 과정에서 메서드와 this의 관계가 끊어져 버림. 

이 때문에 임의 메서드가 이벤트로 등록되어도 this를 컴포넌트 자신으로 제대로 가리키기 위해서는 메서드를 this와 바인딩 작업 필요

바인딩하지 않는 경우 this가 undefined를 가리키게 됨 ➡️ constructor 함수에서 함수를 바인딩한다.

▶️ 이 과정을 대체하는 것이 Property Initializer Syntax를 사용한 메서드(화살표 함수 이용)

---

5장 ref: DOM에 이름 달기

* 리액트 컴포넌트 안에서도 id를 사용할 수 있지만, 권장하지 않음

1. ref

DOM에 이름을 부여하는 방법으로, reference의 약어

ref를 사용하는 경우는 DOM을 직접적으로 건드려야 할 때 이다.

 

1.1 DOM을 꼭 사용해야 하는 경우

특정 input에 포커스 주기

스크롤 박스 조작하기

Canvas 요소에 그림 그리기 등

 

1.2 ref 사용 방법

1.2.1 콜백 함수를 통한 ref 설정

<input ref={(ref) => {this.input=ref}} />

위와 같이 작성 시 this.input은 input 요소의 DOM을 가리키고,

ref의 이름은 원하는 것으로 자유롭게 지정 가능

(DOM 타입 관계 없이 this.superman = ref 처럼 지정 가능)

1.2.2 createRef를 통한 ref 설정

import React, { Component} from 'react';

class RefSample extends Component {
    input = React.createRef();

    handleFocus = () => {
        this.input.current.focus();
    }

    render() {
        return (
            <div>
                Minput ref={this.input} />
            </div>
        )
    }
}

export default RefSample;

1.3 컴포넌트에 ref 달기

리액트에서는 컴포넌트에도 ref를 달 수 있다. 

컴포넌트 내부 DOM을 컴포넌트 외부에서 사용할 때 씀.

<MyComponent ref={(ref) => {this.myComponent=ref}} />

➡️ 컴포넌트에 ref 달고 내부 메서드 사용

 

* 컴포넌트끼리 데이터를 교류할 때는 언제나 데이터를 부모 ↔️ 자식 흐름으로 교류해야함.