React
React는 Facebook에서 개발한 JavaScript 라이브러리. 웹 애플리케이션의 UI를 효율적으로 만들기 위해 사용된다. React를 사용하면 웹 페이지의 복잡한 구조를 관리하기 쉽게 만들어준다. React는 웹뿐만 아니라 모바일 앱 개발(React Native)에도 사용된다. HTML과 같은 구조를 JavaScript 코드로 작성하게 하고, 화면을 업데이트하는 과정을 자동화 해주어 개발자의 생산성을 크게 향상시킬 수 있다.
1. 상태(State)와 상태의 특징. 컴포넌트 내부에서 관리되는 데이터. UI의 동적인 변화를 반영하는데 사용된다. 상태는 컴포넌트의 현재 상태를 나타내는 값이며 React에서 상태가 변경되면 해당 컴포넌트와 그 자식 컴포넌트가 다시 렌더링 된다. * 상태는 컴포넌트 내부에서 선언되고, 해당 컴포넌트에만 영향을 미친다. * 다른 컴포넌트와 데이터를 공유하려면 props를 통해 전달해야 한다. * React의 상태는 변경될 수 있지만 직접 값을 수정하지 않고 setter(상태 변경 함수)를 사용한다. * 상태가 변경되면 React는 해당 컴포넌트와 관련된 UI를 자동으로 업데이트 한다. ex) const [count, setCount] = useState(0); count = count + 1; (x) setCount(count + 1); (o)
2. 컴포넌트 컴포넌트란 화면의 한 부분을 담당하는 코드 블록을 의미한다. 컴포넌트를 재사용 가능하도록 만들어 코드를 효율적이고 유지보수 하기 쉽게 만든다.
3. 가상 DOM (Virtual DOM) React는 경량화된 "가상" DOM을 사용한다. 화면이 변경될 때 실제 DOM을 바로 업데이트 하지 않고, 실제 DOM을 복사한 가상 DOM에서 변경된 부분을 계산한 뒤 최소한의 변경만 실제 DOM에 적용한다.
4. 단방향 데이터 흐름 React는 데이터가 부모에게서 자식으로만 흐른다는 특징이 있다. props를 통해 부모 -> 자식 으로 데이터를 전달하고 자식 컴포넌트는 props를 받아 UI를 생성하거나 처리한다.
5. JSX (JavaScript XML) JSX는 자바스크립트에서 HTML을 작성할 수 있는 문법이다. React 컴포넌트를 만들 때, 화면에 보여질 구조를 자바스크립트 코드로 작성할 수 있다. 자바스크립트의 기능과 HTML을 결합할 수 있어 직관적이고 생산적인 코드 작성이 가능하다.
6. React Hooks 함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있도록 만든 API 이다. 클래스형 컴포넌트에서만 상태와 생명주기 기능을 사용할 수 있었지만 Hooks를 통해 함수형 컴포넌트에서도 사용할 수 있게 되었다. (useState, useEffect, useContext 등)
7. SPA (Single Page Application) 하나의 HTML 페이지로 동작하는 웹 애플리케이션을 SPA 라고 한다. * 기존 (Multi-Page Application) 사용자가 새로운 페이지로 이동할 때마다 서버에 요청하고 서버가 새로운 HTML 문서를 반환. 페이지가 전환될 때마다 전체 화면이 다시 로드 되므로 로딩 시간이 발생하고 화면이 깜빡이는 현상이 나타난다. * SPA React로 구축된 SPA는 처음 로드 시 하나의 HTML 파일과 필요한 자바스크립트 파일을 서버로부터 받아온다. 이후 사용자가 다른 페이지로 이동하면 브라우저는 페이지 전체를 새로 로드하지 않고 필요한 데이터만 서버에서 가져온다. 변경된 데이터만 DOM에 업데이트하고, 브라우저는 이 데이터를 사용해 즉각적인 페이지 전환을 제공한다. SPA는 더 빠르고 부드러운 사용자 경험을 제공한다.
