1. 가상 DOM
- 가상 DOM은 실제 DOM을 흉내 낸 가상의 DOM입니다.
- React 같은 라이브러리는 가상 DOM을 사용해서 실제 DOM보다 빠르게 UI 변경사항을 관리해줍니다.
- 가상 DOM은 변경이 필요한 부분만 실제 DOM에 반영해줘서, 페이지 전체를 새로 불러오는 것보다 훨씬 효율적입니다.
- 개발자 입장에서도 DOM을 직접 다루는 대신, React가 가상 DOM을 이용해 필요한 부분만 자동으로 업데이트를 해주니 훨씬 편리하게 그리고 높은 생산성으로 서비스를 만들 수 있어요.
2. JSX
- JSX는 Javascript를 확장한 문법으로, React에서 UI 구조를 표현하는데 사용됩니다.
- HTML 태그와 유사하게 생겼지만, 실제로는 Javascript의 확장입니다.
- JSX는 React의 createElement 함수 호출보다 직관적으로 표현해주는 문법적 편의를 제공하는 데에 불과합니다.
- 컴포넌트의 구조를 한눈에 파악하기 쉬워, 프로젝트의 유지보수성이 향상됩니다.
- 브라우저는 Javascript의 확장인 JSX는 읽지 못하고 Javascript만 읽을 수 있습니다.
- 따라서 트랜스파일러(Babel 등)을 사용하여 JSX를 일반 Javascript로 변환하여 웹 브라우저에 보내주어야 합니다.
3. React Component vs React Element
01. 리액트 컴포넌트
- 리액트 컴포넌트는 UI의 한 부분을 캡슐화한 코드 블록입니다.
- 과거에 클래스를 사용하여 컴포넌트를 만들었지만 이제는 함수로 만드는 것이 일반적입니다.
function Greeting() {
return <div>Hello World</div>
}
02. 리액트 엘리먼트
- 리액트 엘리먼트는 컴포넌트의 인스턴스로, 화면에 표시할 내용을 기술한 객체입니다.
- JSX 문법을 사용하여 생성할 수 있습니다.
<Greeting />
4. State
- State는 React 컴포넌트 내부의 동적인 데이터를 관리하는데 사용되는 데이터 구조입니다.
- 일반적으로 시간에 따라 변하는 값이나 사용자의 상호작용 또는 네트워크 응답 등에 의해 변경되는 값을 State로 관리합니다.
- State가 바뀌면 컴포넌트는 리렌더링을 합니다.
- 리렌더링이 된다는 것은 함수가 재실행된다는 뜻이고, 그 결과 화면이 다시 그려지게 됩니다.
- 함수는 재실행되지만 상태값을 어딘가에 계속 기억이 되고 있습니다.
5. Props
- 부모 컴포넌트로부터 자식 컴포넌트에 전달하는 데이터를 Props라고 합니다.
- 자식 컴포넌트 입장에서 Props는 읽기 전용으로, 수정해서는 안됩니다.
- Props를 잘 사용하면 컴포넌트의 재사용성과 유연성이 크게 증가합니다.
- 부모가 전달해주는 Props값이 바뀌면 자식 컴포넌트는 리렌더링을 합니다.
6. 리렌더링의 조건
1. state가 변경되면 컴포넌트는 리렌더링 됩니다.
2. 부모 컴포넌트로부터 전달받는 props의 값이 변경되면 컴포넌트는 리렌더링 됩니다.
3. 부모 컴포넌트가 리렌더링되면 자식 컴포넌트는 리렌더링 됩니다. (방지하려면 React.memo)
7. React Component의 생애주기
1. Mount
- 리액트 컴포넌트를 DOM 노드에 추가할 때 발생하며, 한 번만 실행됩니다.
2. Update
- 속성이나 상태가 변경되어 리액트 컴포넌트를 업데이트할 때 발생하며, 여러 번 실행됩니다.
3. Unmount
- 리액트 컴포넌트를 DOM에서 제거할 때 발생하며, 한 번만 실행됩니다.