<단어>
Props : Component에 전달하는 Data로 Component 구성을 가능하게 해주며, 부모-자식 Component 간 Data를 연결해준다.
State : Component 내부의 Data를 뜻한다.
Context : 앱을 구성하는 전체 Component의 Data를 뜻한다.
Component : 위 기능들의 집합인 Function이다.
DOM : 웹 사이트를 열 때, 화면에 표시되는 내용을 마크업 언어인 HTML을 통해 표현한다는 것이다
VDOM(Virtual DOM) : 상태 변경은 VDOM에 먼저 적용 그후 DOM에 적용. 하지만 VDOM을 업데이트한다고 해서 반드시 실제 DOM의 업데이트가 트리거 되는 것은 아님.
<react 주요 개념>
1. 컴포넌트 기반 아키텍처
React는 UI를 독립적이고 재사용 가능한 부분으로 나눈 후, 각 부분을 컴포넌트로 취급합니다. 이러한 컴포넌트는 자신의 상태를 관리할 수 있으며, 애플리케이션의 UI를 효과적으로 구성하기 위해 조합될 수 있습니다.
2. 선언적 뷰
React를 사용하면, 애플리케이션의 상태가 변할 때 애플리케이션의 뷰가 어떻게 보여야 할지 선언적으로 설계할 수 있습니다. 데이터가 변경될 때 React는 적절하게 컴포넌트를 업데이트하고 렌더링하여, 개발자가 직접 DOM을 조작할 필요 없이 UI를 최신 상태로 유지할 수 있게 해줍니다.
3. 가상 DOM
React는 가상 DOM(Virtual DOM)을 사용하여 실제 DOM과의 상호 작용을 최소화합니다. 가상 DOM은 메모리 내에 존재하는 DOM의 경량화된 사본으로, 실제 DOM에 대한 직접적인 조작을 피하고, 변화가 발생할 때 가상 DOM에 먼저 이 변화를 적용한 후, 실제 DOM과 비교하여 실제로 변화가 필요한 부분만을 업데이트합니다. 이 과정은 성능을 크게 향상시킵니다.
4. 리액트 요소와 JSX
React에서 UI를 표현하는 기본 단위는 리액트 요소(React Element)입니다. JSX는 JavaScript를 확장한 문법으로, 리액트 요소를 생성하는 데 사용됩니다. JSX는 HTML과 유사하게 보이지만, 실제로는 JavaScript로 컴파일됩니다. JSX를 사용함으로써, UI 구조를 더 직관적으로 표현할 수 있습니다.
5. 컴포넌트의 생명주기
React 컴포넌트는 생성될 때부터 소멸될 때까지 여러 생명주기 단계를 거칩니다. React 클래스 컴포넌트는 componentDidMount(), componentDidUpdate(), componentWillUnmount() 등의 생명주기 메서드를 제공하여, 컴포넌트의 생성, 업데이트, 제거 시점에 특정 동작을 실행할 수 있습니다. 함수형 컴포넌트에서는 훅(Hooks)을 사용하여 비슷한 작업을 수행할 수 있습니다.
6. 훅(Hooks)
React 16.8 버전에서 도입된 훅은 함수형 컴포넌트에서 상태 관리 및 부수 효과(side effects)를 다루기 위한 기능입니다. useState, useEffect와 같은 훅을 사용하여 클래스 컴포넌트에서만 가능했던 여러 기능을 함수형 컴포넌트에서도 사용할 수 있게 되었습니다.
