React

프론트엔드 개발을 보다 체계적으로 할 수 있게 도와주는 라이브러리이다. (선언형, 컴포넌트, 재사용성)

HTML과 비슷한 태그를 사용해 구문을 정의 하며, 자바스크립트를 확장한 문법.

Component - 리액트로 만들어진 앱을 이루는 최소한의 단위. (props를 입력받아 state 상태에 따라 DOM Node를 출력하는 함수.)

state는 컴포넌트에 대한 데이터 또는 정보를 포함하는데 쓰이는 React 내장 객체이다.

React의 각 컴포넌트는 3가지 주요 단계(mount, update, unmount)를 통해 주기를 관리하고 관찰할 수 있다.

반복된 컴포넌트 렌더링 방법: Array.prototype.map() 메소드를 이용한다. ( key는 React가 항목을 변경, 추가 또는 삭제할 대상의 식별을 돕는다. 엘리먼트에 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다.

컴포넌트 내부에서 DOM에 직접 접근해야 할 때 ref를 사용한다.(우선, ref를 사용하지 않고도 원하는 기능을 구현할 수 있는지 반드시 고려한 후에 활용)

Hooks(useState, useEffect, useReducer, useCallback, useRef, custom Hooks)

컴포넌트 스타일링의 종류: 일반 CSS, Sass, CSS Module, styled-components

불변성 유지하기: 1. 전개 연산자와 배열의 내장 함수를 통해 배열 혹은 객체를 복사하여 불변성을 유지하며 업데이트 할 수 있음. 2. immer 라이브러리를 사용하면 불변성을 크게 신경쓰지 않아도 불변성 관리를 할 수 있다.

리덕스(Redux) - 리액트 상태 관리 라이브러리, 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 효율적으로 관리.(컴포넌트끼리 똑같은 상태를 공유해야 할 때도 손쉽게 상태 값을 전달하거나 업데이트 가능)