[리액트 공식문서 정독하기] 리액트 주요개념 - 1 (JSX, DOM에 React 엘리먼트를 렌더링하는 방법, Components와 Props)

리액트 공식문서의 주요개념 파트를 읽으면서 꼭 기억하고 싶은 개념들을 정리해보았다.
잘 이해가 되지 않는 개념들은 GPT에게 물어봐서 이해하려고 노력했고
그렇게 습득된 개념들을 기록해보려고 한다!

---

JSX

React에서는 JSX라는 문법을 사용하여 UI(사용자 인터페이스)를 작성한다.
JSX는 HTML과 비슷한 모양새를 가지고 있어서 javaScript로 UI 관련 작업을 할 때 시각적으로 더 도움이 된다.

JSX는 HTML보다는 JavaScript에 가깝기 때문에,
React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용한다.

 

또한 JSX 코드는 React 컴포넌트에서 사용되는 가상 DOM (Virtual DOM) 요소를 정의하는데
React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프하므로
애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않는다.
이러한 동작은 React의 보안과 안정성 측면에서 좋은 영향을 주어서 XSS (cross-site-scripting) 공격을 방지할 수 있다.

* 이스케이프 : 특정 문자나 코드를 무효화하는 것

 

이것이 무슨 말 이냐면
React는 어떤 값이든 JSX 코드에 직접 작성되지 않으면 그 값을 무시한다.

<div>
  <h1>Hello, {name}!</h1>
</div>

예를들면 이 JSX 코드에서 {name}은 변수가 들어갈 자리이다.

Hello는 JSX 코드에 직접 작성되었기 때문에 그 값을 무시하지 않고
{name}는 변수가 들어갈 자리니까 JSX 코드에 직접 작성되지 않았으니 그 값을 무시하하여
이런 특성으로 인해 XSS (cross-site-scripting) 공격을 방지할 수 있다.

다시한번 정리하자면,
JSX 코드에서 중괄호 안에 전달된 변수나 표현식은 JSX 코드 내부에서 명시적으로 정의되지 않은 값이므로, 
React 엔진은 이 값을 이스케이프하여 이를 통해 보안과 안정성 측면에서 중요한 역할을 수행한다.

사용자가 악의적인 코드를 입력해 웹페이지가 이상하게 동작하거나 사용자 정보가 노출될 수 있어서 
웹 애플리케이션에서는 사용자가 입력한 내용을 그대로 보여주면 안 되는 경우가 있다.
이를 방지하기 위해 React는 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프(escape) 처리를 하는 것이다.

이러한 이스케이프 처리로 인해, 애플리케이션에서 사용자 입력과 같이 명시적으로 작성되지 않은 내용은 그대로 보여지지 않고, 문자열로만 취급된다. 이렇게 함으로써 악의적인 사용자가 제공한 코드가 실행되지 않도록 방지하는 것이다. 이것이 XSS(Cross-Site Scripting) 공격을 방지하는 메커니즘이다.

간단히 말해서, React의 이스케이프 기능은 웹 애플리케이션을 보다 안전하게 만드는 기능으로,
사용자가 입력한 내용을 그대로 표시하지 않고 무효화하여 보안 측면에서 안전성을 확보해준다.

---

DOM에 React 엘리먼트를 렌더링하는 방법

엘리먼트는 React 앱의 가장 작은 단위이고 화면에 표시할 내용을 기술한다.

const element = <h1>Hello, world</h1>;

React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트한다.

 

"루트(root)" DOM 노드

<div id="root"></div>

이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리한다.

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

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

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

 

엘리먼트 업데이트 하기

리액트에서 UI를 업데이트하는 유일한 방법은 새로운 엘리먼트를 생성하고 이를 root.render()로 전달하는 것이다.

const root = ReactDOM.createRoot(
  document.getElementById('root')
);

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  root.render(element);
}

setInterval(tick, 1000);

setInterval 콜백을 이용해서 초마다 root.render()를 호출하는 코드이다.

React DOM은 해당 엘리먼트와 이전의 엘리먼트와 비교하여 필요한 경우에만 DOM을 업데이트하기에

매초 전체 UI를 다시 그리도록 엘리먼트를 만들었지만 React DOM은 내용이 변경된 텍스트 노드만 업데이트한다.

---

Components와 Props

컴포넌트는 개념적으로 JavaScript 함수와 유사하다.
“props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환하기에 개념적으로 비슷하다.

 

컴포넌트 이름이 항상 대문자로 시작하는 이유

React는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리한다.
예를 들어,  <div />는 HTML div 태그를 나타내고 <Welcome />은 컴포넌트를 나타낸다.
그래서 컴포넌트 이름은 대문자로 시작해야하는 것이다.

 

컴포넌트 추출 : 컴포넌트를 여러 개의 작은 컴포넌트로 나누기

1. 컴포넌트를 여러 개의 작은 컴포넌트로 나누는 것을 두려워하지 말자.

 

재사용 가능한 컴포넌트를 만들어 놓는 것은 더 큰 앱에서 작업할 때 두각을 나타낸다. 
UI 일부가 여러 번 사용되거나(Button, Panel, Avatar), 
UI 일부가 자체적으로 복잡한 (App, FeedStory, Comment) 경우에는
별도의 컴포넌트로 만드는 게 좋다.

 

2. props의 이름은 사용될 context가 아닌 컴포넌트 자체의 관점에서 짓는 것을 권장한다. 

예를 들어, Avatar 컴포넌트는 자신이 Comment 컴포넌트 내에서 렌더링 된다는 것을 알 필요가 없다.
따라서 props의 이름을 author에서 더욱 일반화된 user로 변경하는 것이다.

 

 

⇒ 컴포넌트를 추출하는 기준과 prop의 이름을 어떻게 지을지에 대한 권장사항이 있었다.
prop의 이름을 지을 때 기준을 컴포넌트 특징으로 잡으니 조금 더 직관적인 코드를 쓸 수 있게 되었다 🙂