• Facebook, Meta에서 개발한 오픈 소스 JavaScript 라이브러리
• FE 개발에 있어 가장 많이 언급되고 인기 있는 라이브러리

import ReactDOM from 'react-dom';

function App ({name}){
  return (
    <h1>Hello, {name}!</h1>
  )
}

ReactDOM.render(<App name="테스트앱" />, document.getElementById('root'));

• 기본적인 함수형 코드 형태이며, 초기엔 클래스 형태로 만들었지만 권장하지 않는 방식이라 한다
• 공식 Docs : https://react.dev/reference/react

특징

Virtual DOM

• React의 가장 큰 특징으로 가장 DOM을 사용하여 실제 DOM과의 상호작용을 최소화한다
• 페이지를 구성하는 컴포넌트의 상태들이 변경될 때, 가상 DOM으로 변경사항을 빠르게 반영하여 변경한 부분만 실제 DOM에 적용한다
  • 가상 DOM과 실제 DOM 비교 : 컴포넌트가 변경될 때마다 새 가상 DOM 트리를 생성, 이전 가상 DOM과 비교하여 실제 변경이 필요한 부분안 DOM에 반영한다
  • DOM 조작 최적화 : 실제 DOM을 조작을 많이 하게 되면 성능에 영향을 미치기에, 가상 DOM으로 변경 사항을 메모리에서 계산하여 필요한 변경 사항만 반영한다

JSX

• JavaScript eXtension, 자바스크립트의 확장 문법을 사용하여 React의 요소, 컴포넌트 구조를 쉽게 기술하도록 한다
• HTML과 매우 유사한 문법을 가지며, 개발자가 UI 구조를 명확하게 이해하는 것을 돕는다

Component 기반

• React는 각 페이지에 대한 요소들을 Component로 구분하여 재사용할 수 있도록 한다
• 여러 Component들을 조합하여 페이지를 꾸밀 수 있으며, 대규모 어플리케이션의 개발도 쉽게 관리하도록 만들어준다

그 외 사용 관련

Do not use Array index is keys

• UI 내 리스트 컴포넌트 중 각 컴포넌트의 Key를 인덱스로 넣지 말라는 경고
• 인덱스로 넣지 말라고 한 이유는, React 내 배열 요소를 렌더링시 필요한 부분만 렌더링을 하는데 인덱스로 부여하게 되면 리스트 업데이트시 Key 인덱스를 거의 모두 조정해야 하기 때문에 불필요한 성능을 초래한다
• 인덱스가 아닌 ID 같은 Key로 부여하게 되면, 요소를 조정할 필요 없이 변경점만 렌더링을 하게 된다