12주차 개념 노트

https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1200px-React-icon.svg.png

React

사용자와 상호작용이 많은 웹페이지에서 UI를 쉽게 표현하기 위한 자바스크립트 라이브러리이다.

UI의 특정 부분을 컴포넌트로 만들어서 여러 곳에서 재사용하거나,

컴포넌트를 조합하여 또 다른 컴포넌트를 만드는 방식으로 레고 블럭을 조립하듯이 UI를 구성하게 되고,

Single Page Application, 모바일 어플리케이션, 가상현실 어플리케이션 등 다양한 어플리케이션을 만드는데 활용할 수 있다.

상태가 바뀌면 리액트는 가상 DOM을 활용해서 변경되는 부분만 효과적으로 렌더링한다.

SPA(Single Page Application)

웹 페이지가 새로고침되지 않아서 사용자에게 부드러운 UI를 보여줄 수 있는 방식이다.

웹 페이지에서 보여줄 내용이 수정되면 웹 페이지를 통째로 받아와서 다시 그리는 방식 대신에

바뀐 부분을 자바스크립트 API로 업데이트하는 방식을 사용한다.

React, Angular, Vue.JS를 이용하면 SPA를 구현할 수 있다.

ESLint

자바스크립트 코드에서 오류나 안티 패턴을 쉽게 찾을 수 있게 도와주고, 스타일을 잡아주는 포메터이다.

ESLint를 활용하면 팀 내에서의 코드 스타일을 통일할 수 있기 때문에 정돈된 프로젝트를 만들 수 있다.

직접 적용할 규칙들을 커스터마이징할 수도 있고,

Airbnb Style Guide처럼 많이 쓰이는 스타일 가이드를 활용할 수도 있다.

Jest

자바스크립트로 작성된 코드를 테스트할 때 사용하는 프레임워크이다.

테스트를 돌릴 때 실패한 테스트가 있다면 다시 돌렸을 때 실패한 테스트부터 먼저 실행해서 통과 여부를 빠르게 확인할 수 있다.

비동기 코드도 테스트할 수 있고,

테스트에서 모킹을 하기위한 기능들도 제공하고 있다.

ReactDOM

앱의 최상위 계층에서 웹 페이지의 DOM 요소들을 효율적으로 관리하는데 사용할 수 있는 기능을 제공하는 패키지이다.

리액트를 이용해서 브라우저에 웹 앱을 띄우려면 브라우저는 리액트 요소를 이해할 수 없기 때문에

리액트 요소들을 브라우저에 띄워줄 ReactDOM라이브러리가 필요하다.

 

리액트로 작성한 앱을 브라우저에 띄우고 싶다면

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

위 코드처럼 html요소의 DOM요소를 createRoot에 넣어서

반환된 root의 render 메서드의 인자로 App컴포넌트를 넣어서 실행하면 된다.

Parcel

의존성이 있는 여러 파일이나 모듈들을 묶는 번들링을 아무 설정없이 해주는 도구이다.

parcel을 다운받은 뒤 parcel <진입점> 명령어로 바로 웹 서비스를 띄워 볼 수 있다.

코드를 수정하고 저장하면 자동으로 브라우저를 업데이트해주기 때문에

새로고침 없이 쉽게 반영된 내용을 확인해 볼 수 있다.

JavaScript module

프로그램이 커지면 한 개의 파일로는 관리하기 힘들다.

따라서 파일을 관심사에 따라 여러 개로 분리하게 되는데, 각각의 파일을 모듈이라고 한다.

export 지시자를 적용하면 외부 모듈에서 사용할 수 있게 되고,

import 지시자를 적용하면 외부 모듈의 기능을 가져올 수 있다.

모듈은 항상 엄격 모드로 실행되고,

동일한 모듈은 여러 곳에서 import하더라도 최초로 import될 때 한 번만 evaluate되고, import하는 다른 곳에 모두 공유된다.

JSX

JavaScript XML의 약자로, 자바스크립트의 확장 문법이다.

JSX를 이용하면 HTML과 비슷한 문법을 자바스크립트 코드 안에 작성해서 컴포넌트 렌더링을 구조화할 수 있다.

attribute이 HTML과 살짝 다른 부분이 있는데, JSX가 자바스크립트의 확장이기 때문에

자바스크립트 예약어인 for, class등은 사용할 수 없기 때문에 htmlFor과 className을 사용해야 한다.

자바스크립트 표현식을 중괄호로 묶어 JSX내부에 사용할 수 있다.

주의할 점은 JSX에서는 top level 요소는 단 한 개만 있어야 하기 때문에 만약 top level에 여러 요소가 있다면 fragment등으로 감싸줘야 한다.

또한 JSX에서는 무조건 태그를 닫아줘야 하고,

JSX 코드안에서는 if 문을 사용할 수 없기 때문에 삼항 연산자나 && 등을 사용해야 한다.

Babel

자바스크립트 컴파일러이다.

브라우저가 지원하지 않는 문법을 사용하고 싶을 때 Babel을 이용하면 브라우저가 지원하는 문법으로 컴파일해준다.

바벨을 사용하면 JSX를 브라우저가 이해할 수 있는 문법으로 바꿔준다.

React.Component

리액트 컴포넌트 클래스를 정의하기 위해 상속받아야 하는 클래스이다.

이 때 render 메서드를 반드시 정의해주어야 한다.

여러가지 생명주기를 관리할 수 있는 메서드들을 제공하는데,

요즘은 클래스형 컴포넌트보다는 함수형 컴포넌트를 더 많이 사용하고,

함수형 컴포넌트에서는 훅을 이용해 구현할 수 있다.

React events

HTML event와 동일한 이벤트들을 가지고 있고,

리액트에서는 event들이 camelCase로 작성되어 있다.

예를 들면 onclick은 리액트에서 onClick과 같이 작성해야 한다.

또한 JSX문법에 따라 핸들러를 중괄호 안에 작성해줘야 한다.

DOM

DOM은 HTML, XML 등으로 작성된 문서의 요소들을 트리로 구성하여 표현하고,

요소들을 변경할 수 있는 API를 제공한다.

따라서 자바스크립트를 이용해 DOM을 제어하면 동적으로 HTML요소를 바꾸거나 요소의 속성을 바꾸는 등의 작업을 할 수 있다.

선언형 UI

어떻게 보여야 하는지 선언을 하면 그대로 그려지게 되는 방식이다.

어떻게 업데이트를 할 지 명령을 하지 않아도,

상태가 바뀌면 자동으로 UI가 업데이트 되는 방식이다.

리액트는 선언형으로 UI를 만들 수 있기 때문에 상호작용이 많은 UI를 쉽게 만들 수 있게 도와준다.

useState

리액트 훅의 한 종류로, 상태 변수를 사용할 수 있게 해주는 훅이다.

const [state, setState] = useState(initialState)

state를 바꾸고 싶다면 반드시 setState함수를 이용해서 바꿔야 한다.

또한 state가 바뀌면 리렌더링이 된다.

SWC

자바스크립트, 타입스크립트 파일을 컴파일, 번들링하느데 사용할 수 있는 빌드 툴이다.

Rust로 제작되었고, 매우 빠르다.

React component props

컴포넌트의 속성을 나타내는 데이터이다.

하위 컴포넌트로 어떤 값을 전달해야 할 때 props를 사용하게 된다.

컴포넌트에서 전달받은 props는 수정할 수 없다.

함수형 컴포넌트

리액트가 처음 나왔을 때는 클래스형으로 컴포넌트를 작성했지만,

요즘은 함수를 사용해 컴포넌트를 작성하는 함수형 컴포넌트를 주로 사용한다.

함수형 컴포넌트에서는 함수의 인자로 props를 받게 된다.

함수형 컴포넌트에서는 훅을 이용한다.

Testing Library Queries

 

	No Match	1 Match	1 + Match	Await?
getBy	throw	return	throw	No
findBy	throw	return	throw	Yes
queryBy	null	return	throw	No
getAllBy	throw	array	array	No
findAllBy	throw	array	array	Yes
queryAllBy	[]	array	array	No

getBy는 오로지 한 개만 있는 요소를 찾을 때 사용하고,

findBy는 getBy와 비슷하고, 비동기 코드에도 활용할 수 있다.

queryBy는 있는지 없는지 모를 때 사용할 수 있다.

All을 붙이게 되면 한 개 이상 있는 요소를 찾을 때 사용할 수 있게 된다.

 

ByLabelText - label, aria-label로 찾는다.

ByPlaceholderText - input의 placeholder값으로 찾는다.

ByText - 텍스트 내용으로 찾는다.

ByDisplayValue - 현재 value로 찾는다.

ByAltText - alt attribute값으로 찾는다.

ByTitle - title attribute나 svg title tag로 찾는다.

ByRole - aria role로 찾는다.

ByTestId - data-testid attribute으로 찾는다.

React Testing Library screen

테스트할 때 자주 사용되는 document.body와 바인딩된 오브젝트이다.

screen을 사용하려면 global DOM 환경이 필요하기 때문에

jest를 사용한다면 jsdom으로 testEnvironment를 설정해야 한다.

map

모든 요소에 대해 인자로 들어온 함수를 실행한 값들로 이뤄진 배열을 생성한다.

map((element) => { /* … */ })
map((element, index) => { /* … */ })
map((element, index, array) => { /* … */ })

위와 같이 index나 map을 적용한 array도 활용할 수 있다.

Optional Chaning (?.)

null이나 undefined일 수 있는 값의 프로퍼티에 에러없이 접근하거나

null이나 undefined일 수 있는 값을 실행하기 위해 위해 사용한다.

옵셔널 체이닝을 사용하면 null이나 undefined일 수 있는 값이 null이나 undefined면 에러 없이 undefined를 반환하고,

null이나 undefined가 아니면 그 뒷 부분을 실행하게 된다.

프로퍼티뿐만 아니라 배열, 메서드에도 활용할 수 있다.

immutable array

push, pop, shift, unshift, reverse, sort 등은 배열을 직접 조작하는 메서드들이다.

하지만 리액트의 함수형 컴포넌트에서 배열을 직접 조작하면 렌더링이 원하는대로 되지 않을 수 있기 때문에

배열을 직접 조작하지 않고, spread연산자, rest연산자 등을 이용해서 불변성을 지켜줘야한다.

CSS in JS

javascript코드에서 css를 이용해서 스타일링을 해주는 방식이다.

컴포넌트 단위로 css를 적용할 수 있어서 css파일을 이용하는 것보다 유지 보수가 쉽다.

Emotion, Styled-components등의 도구가 있다.

Styled Components

CSS in JS 라이브러리의 한 종류이다.

media query, pseudo-selectors 등의 CSS가 제공하는 모든 기능을 JS에서 사용할 수 있다.

Styled Components를 활용하면 props로 전달된 값도 이용할 수 있기 때문에 동적으로 스타일링을 할 수 있다.

유일한 클래스명을 만들어줘서 적용하기 때문에 클래스명이 겹치지 않을까 고민하지 않아도 된다.