웹 개발이 완전 처음이기 때문에 나중에 참고하기 위해 찾아본 잡다한 내용을 정리한다.

DOM?

DOM은 "문서 객체 모델(Document Object Model)"의 약어로, 웹 페이지의 구조와 내용을 프로그래밍적으로 조작할 수 있게 해주는 프로그래밍 인터페이스이다. DOM은 HTML, XML 및 XHTML과 같은 마크업 언어로 작성된 문서의 요소, 속성, 텍스트 등을 표현하고 이를 조작하는 데 사용된다.

DOM은 다음과 같은 주요 특징을 갖는다:

• 계층 구조: DOM은 웹 페이지의 요소들을 트리 구조로 표현한다. 문서의 최상위 요소는 "문서 요소"로 시작하며, 그 하위에는 "요소 노드"와 "텍스트 노드" 등이 계층적으로 구성된다.

• 객체 지향: DOM은 객체 지향 모델을 따른다. 각 요소는 JavaScript에서 객체로 표현되며, 요소와 관련된 프로퍼티 및 메서드를 가지고 있다. 이를 통해 JavaScript를 사용하여 요소를 선택하고 조작할 수 있다.

• 동적 조작: DOM을 사용하면 웹 페이지의 내용을 동적으로 변경할 수 있다. JavaScript를 사용하여 새로운 요소를 생성하거나 기존 요소를 삭제하고 수정할 수 있다.

• 이벤트 처리: DOM을 통해 이벤트 처리가 가능하다. 사용자 상호작용에 대한 이벤트(클릭, 마우스 오버, 키보드 입력 등)를 감지하고 이벤트 핸들러를 등록하여 반응하도록 프로그래밍할 수 있다.

• 웹 페이지 조작: DOM을 통해 웹 페이지의 내용, 구조, 스타일, 속성 등을 변경할 수 있으므로, 동적 웹 애플리케이션 및 웹 사이트를 개발하는 데 필수적이다.

렌더링?

"렌더링"은 데이터나 정보를 시각적인 형태로 변환하거나 표시하는 과정을 나타내는 일반적인 컴퓨터 과학 용어다. 웹 개발 분야에서 "렌더링"은 웹 페이지를 브라우저 상에서 표시하는 과정을 가리킨다.

HTML 렌더링: HTML 문서는 브라우저에 의해 해석되고 렌더링되어 사용자가 볼 수 있는 웹 페이지로 변환된다. HTML 문서에는 웹 페이지의 구조, 내용 및 구성이 정의되어 있으며, 브라우저는 이 정보를 기반으로 웹 페이지를 그린다.

CSS 렌더링: CSS(Cascading Style Sheets)는 웹 페이지의 스타일과 레이아웃을 정의하는 데 사용된다. 브라우저는 HTML 요소에 대한 CSS 스타일을 적용하여 웹 페이지를 디자인한다.

JavaScript 렌더링: JavaScript는 웹 페이지에 동적인 기능을 추가하는 데 사용된다. JavaScript 코드는 브라우저에서 실행되며, 웹 페이지의 상호작용 및 동적 변경을 처리한다.

렌더링 엔진: 브라우저의 핵심 구성 요소 중 하나인 렌더링 엔진은 HTML, CSS 및 JavaScript를 처리하고 웹 페이지를 화면에 표시하는 역할을 한다.

DOM에 엘리먼트 렌더링하기

HTML 파일 어딘가에<div>가 있다고 하자

<div id="root"\></div\>
이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 “루트(root)” DOM 노드라고 부른다.

React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있다. React를 기존 앱에 통합하려는 경우 원하는 만큼 많은 수의 독립된 루트 DOM 노드가 있을 수 있다.

React 엘리먼트를 렌더링 하기 위해서는 우선 DOM 엘리먼트를 ReactDOM.createRoot()에 전달한 다음, React 엘리먼트를 root.render()에 전달해야 한다.

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);

위 코드를 실행하면 화면에 “Hello, world”가 보인다.

함수 및 문법

Optional Chaining

옵셔널 체이닝(Optional Chaining)은 프로그래밍 언어에서 사용되는 기술 중 하나로, 주로 객체 또는 속성에 접근할 때 발생할 수 있는 null 또는 undefined와 같은 값으로 인한 오류를 방지하기 위한 방법이다. 이 기술은 주로 JavaScript, Swift, TypeScript와 같은 언어에서 지원된다.

옵셔널 체이닝은 다음과 같은 상황에서 유용하다:

• 객체 내부의 중첩된 속성 또는 메서드에 접근할 때, 중간 단계의 객체가 존재하지 않을 수 있는 경우.
• 배열 요소에 접근할 때 해당 인덱스에 해당하는 요소가 존재하지 않을 수 있는 경우.

옵셔널 체이닝을 사용하면 코드에서 Null Pointer Exception이나 Undefined 오류를 방지하고 코드를 더 안전하게 만들 수 있다. 기본적으로 "?." 연산자를 사용하여 객체 또는 속성에 접근할 때, 해당 객체가 존재하지 않으면 그냥 null 또는 undefined를 반환하며 프로그램이 중단되지 않는다. 또 예외 코드를 줄일 수 있다는 장점도 있다.

예시

const user = {
  name: 'John',
  address: {
    city: 'New York',
  }
};

// 옵셔널 체이닝을 사용하여 중첩된 속성에 안전하게 접근
// 만약 address가 없다면 city는 undefined가 됨
const city = user?.address?.city; 

createRoot

JavaScript의 createRoot는 React 라이브러리의 일부인 Concurrent Mode를 사용할 때 사용되는 API 중 하나다. Concurrent Mode는 React 애플리케이션의 성능을 향상시키는 데 도움을 주는 기능을 제공한다. createRoot 함수는 Concurrent Mode에서 루트 React 애플리케이션을 생성하는 데 사용된다.

기존의 React 애플리케이션에서는 ReactDOM.render 함수를 사용하여 루트 엘리먼트를 렌더링한다. 그러나 Concurrent Mode를 사용하려면 createRoot를 사용하여 루트 엘리먼트를 생성하고, 그 루트 엘리먼트에서 render 메서드를 호출하여 렌더링을 시작한다. createRoot를 사용하면 React가 더 많은 유연성을 제공하고 렌더링 우선순위를 조절하는 데 도움이 된다.

appendChild

appendChild는 JavaScript의 DOM(Document Object Model)에서 사용되는 메서드 중 하나로, 특정 HTML 요소(HTMLElement)를 다른 HTML 요소의 하위 요소로 추가하는 역할을 한다.

appendChild 메서드는 부모 요소에 속한 자식 요소로 다른 요소를 추가할 때 사용된다. 이 메서드를 호출하면, 지정된 자식 요소가 부모 요소의 맨 뒤에 추가된다. 부모 요소에 이미 자식 요소가 있을 경우, 추가되는 요소는 가장 마지막 자식으로 배치된다.

Hook

훅(Hook)은 React 버전 16.8부터 도입된 기능으로, 함수 컴포넌트에서 상태(state), 생명주기 메서드, 컨텍스트(Context), 리듀서(Reducer), 렌더링 이후 실행되는 코드 등 React의 기능을 사용할 수 있게 해주는 함수다. 함수형 컴포넌트에서 클래스 컴포넌트의 기능을 활용하기 위한 도구로서, 코드를 더 간결하고 읽기 쉽게 만들어주며 상태 관리와 부작용(side effect)을 효과적으로 다룰 수 있도록 돕는다.

Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있다.

상태와 변수의 차이?
class variable은 변경했을 때 React가 알아채지 못한다.

state의 값이 변경되면 React 컴포넌트가 리렌더링된다. 이로 인해 UI 업데이트가 자동으로 발생한다.

useState: 컴포넌트에서 상태를 관리하기 위한 훅으로, 상태 변수를 선언하고 초기값을 설정할 수 있습니다. 예를 들어, const [count, setCount] = useState(0);는 count 상태 변수를 만들고 초기값을 0으로 설정합니다.

useEffect: 부작용(비동기 작업, 데이터 가져오기, DOM 조작 등)을 다루기 위한 훅으로, 컴포넌트의 생명주기 메서드 역할을 합니다. 컴포넌트가 렌더링되거나 상태가 업데이트될 때 특정 동작을 수행하거나 정리(clean-up)를 수행할 수 있습니다.

useContext: 컴포넌트 트리 상에서 컨텍스트(Context) 값을 사용하기 위한 훅으로, 부모 컴포넌트에서 제공한 컨텍스트 값을 현재 컴포넌트에서 사용할 수 있게 합니다.

useReducer: 리듀서 패턴을 사용하여 상태를 관리하기 위한 훅으로, 복잡한 상태 관리나 상태 업데이트 로직을 분리하여 처리할 수 있습니다.