[Front end] React 정리

React
자바스크립트 라이브러리로 오직 유저 인터페이스 뷰(View)만을 위한 라이브러리이다.

Virtual DOM
DOM(Document Object Model)은 객체로 문서 구조를 표현하는 방법이다. 리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트할 때는 다음 절차를 가진다.

1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다.
2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다.
3. 바뀐 부분만 실제 DOM에 적용한다.

Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 DOM 트리 구조 하나여야 한다는 규칙이 있다.

JSX
자바스크립트의 확장 문법으로 XML과 매우 비슷하게 생겼다. 코드로 보면 XML 형식이지만 실제로는 자바스크립트 객체이며, 용도도 다르고 문법도 차이가 난다.

Fragment
div 같은 것으로 감싸지 않고 여러 요소를 렌더링 하고 싶을 때 사용한다.

let
한번 선언한 후 값이 유동적으로 변할 수 있을 때만 사용한다.

const
한번 설정한 후 변할 일이 없는 값에 사용한다.

className
리액트에서 class를 설정할 때는 class 키워드 대신 className으로 설정해야 한다.

Component
재사용이 가능한 API로 수많은 기능을 내장하고 있다. 렌더링과 작동방식을 정의한다. 컴포넌트 기능은 단순한 템플릿 이상이다. 데이터가 주어졌을 때 UI를 만들어 주는 것은 물론이고, LifeCycle API를 이용하여 주어진 작업들을 처리할 수 있다.

Function Component
컴포넌트가 라이프사이클 API와 state를 사용할 필요가 없고, 오로지 props를 전달받아 뷰를 렌더링하는 역할만 한다면 함수형 컴포넌트로 간단하게 선언할 수 있다.

porps
properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다. pops는 부모 컴포넌트가 설정한다.

defaultProps
props 기본 값 설정

porpTypes
컴포넌트의 필수 props을 지정하거나 props타입을 지정할 때 사용하는 요소이다.

state
컴포넌트 자체적으로 지닌 값으로 컴포넌트 내부에서 값을 업데이트한다.

setState()
state 값을 업데이트할 때 사용된다. 파라미터로 전달받은 필드를 업데이트한 후 컴포넌트가 리렌더링 되도록 트리거한다. 배열을 변형할 때는 배열에 직접 접근하여 수정하는 것이 아니라 concat, slice, 전개 연산자, filter 함수 등을 사용해서 새로운 배열을 만든 후, setSate 메서드로 적용해야 한다.

this.forceUpdate()
state에 직접 접근하여 값을 수정하면 컴포넌트를 자동으로 리렌더링 하지 않는다. 이때 강제로 리렌더링을 할 수 있지만, 이 방식은 매우 비효율적이다.

이벤트 주의사항

1. 이벤트 이름은 CamelCase로 작성한다.
2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다.
3. DOM 요소에만 이벤트를 설정할 수 있다.

이벤트 종류
Clipboard, Form, Composition, Mouse, Keyboard, Selection, Focus, Touch, UI, Image, Wheel, Animation, Media, Transition

ref
reference의 줄임말로 리액트 내부에서 DOM에 이름을 다는 방법이다. DOM을 꼭 직접적으로 컨트롤해야 할 때만 사용해야 한다.

key
리액트에서 key는 컴포넌트 배열을 렌더링 했을 때 어떤 원소에 변동이 있는지 알아내려고 사용한다. key가 없을 때는 가상 DOM을 비교하는 과정에서 리스트를 순차적으로 비교하면서 변화를 감지한다. key가 있다면 어떤 변화가 일어났는지 더욱 빠르게 알아낼 수 있다.

Component LifeCycle
Will 접두사 - 어떤 작업을 작동하기 전에 실행되는 메서드
Did 접두사 - 어떤 작업을 작동한 후에 실행되는 메서드
LifeCycle 메서드는 총 10개이며, 카테고리로는 mount, update, unmount로 나눈다.

mount
DOM이 생성되고 웹브라우저에 나타나는 것을 mount라고 한다.
constructor -> getDerivedStateFromProps -> render -> componentDidMount

update
컴포넌트가 업데이트를 할 때는 총 4가지 경우가 있다.

1. props가 바뀔 때
2. state가 바뀔 때
3. 부모 컴포넌트가 리렌더링 될 때
4. this.forceUpdate로 강제로 렌더링을 트리거할 때

getDerivedStateFromProps -> shouldComponentUpdate -> render -> getSnapshotBeforeUpdate -> componentDidUpdate

unmount
컴포넌트를 DOM에서 제거하는 것을 unmount라고 한다.
componentWillUnmount

render()
this.props와 this.state에 접근할 수 있으며, 리액트 요소를 반환한다. 아무것도 보여 주고 싶지 않으면 null 값이나 false 값을 반환하자. 이 메서드 안에서 절대로 state를 변형해서는 안된다.

getDerivedStateFromProps 메서드
props로 받아 온 값을 state에 동기화시키는 용도로 사용하며, 컴포넌트를 마운트 하거나 props를 변경할 때 호출한다.

componentDidUpdate 메서드
렌더링을 다 마친 후 실행되며, 라이브러리 또는 프레임워크 함수를 호출하거나 이벤트 등록, setTimeout, setInterval, 네트워크 요청 같은 비동기 작업을 처리하면 된다.

shouldComponentUpdate 메서드
props 또는 state를 변경했을 때, 리렌더링을 여부를 지정하는 메서드이다. 기본값은 true이며, 반드시 true 또는 false 값을 반환해야 한다. 프로젝트 성능을 최적화할 때, 상황에 맞는 알고리즘을 작성하여 리렌더링을 방지할 수 있다.

getSnapshotBeforeUpdate 메서드
render 메서드를 호출한 후 DOM에 변화를 반영하기 바로 직전에 호출하는 메서드이다. 주로 업데이트하기 직전의 값을 참고할 일이 있을 때 활용된다.

componentDidUpdate 메서드
리렌더링이 완료한 후 실행된다. DOM 관련 처리를 한다.

componentWillUnmount 메서드
컴포넌트를 DOM에서 제거할 때 실행된다. componentDidUpdate에서 등록한 이벤트, 타이머, 직접 생성한 DOM이 있다면 여기에서 제거 작업을 해야 한다.

redux
리액트에서 상태를 더 효율적으로 관리하는데 사용하는 상태 라이브러리이다. 리덕스를 사용하면 스토어라는 객체 내부에 상태를 담게 된다. 상태의 어떤 변화를 일으켜야 할 때는 액션을 스토어에 전달한다. 액션을 전달하는 과정을 디스패치라고 한다. 스토어가 액션을 받으면 리듀서가 전달받은 액션을 기반으로 상태를 어떻게 변경시켜야 할지 정한다. 스토어 안에 있는 상태가 바뀌면 스토어를 구독하고 있는 컴포넌트에 바로 전달한다. 부모 컴포넌트로 props를 전달하는 작업은 생략하며, 리덕스에 연결하는 함수를 사용하여 컴포넌트를 스토어에 구독시킨다.

store
상태 값을 내장하고 있다. 스토어는 언제나 단 한 개이다.

action
상태 변화를 일으킬 때 참조하는 객체이다.

dispatch
액션을 스토어에 전달하는 것을 의미한다.

reducer
상태를 변화시키는 로직이 있는 함수이다.

subscribe
스코어 값이 필요한 컴포넌트는 스토어를 구독한다.