[React] React이란?, React 기본 개념 - Component, JSX(Javascript + xml), Virtual DOMLifeCycle(render), state, props, SPA, CSR, Hooks, Event

 

 

---

 

React이란?

• 프로젝트 규모가 커지고, 다양한 유저 인터렉션이 전달되면서 DOM요소의 변화가 많아지게 되면서 DOM 요소의 변화를 개발자가 직접 관리하는 어려움을 개선하기 위해 DOM 관리와 상태 변화 관리를 최소화하고, 개발자 오직 기능 개발, 사용자 인터페이스에 더 집중할수 있게 만들어진 프론트앤드 라이브러리, 프레임워크중 하나 이다.
• 리액트에서는 컴포넌트 단위로 작성하여 하나의 컴포넌트를 여러 부분에서 재사용하여 생산성과 유지보수에 좋다.
• Virtual DOM을 사용하여 렌더링 효율성이 높다.

 

React가 인기있는 이유는 무엇일까?

• 기술 쏠림 현상을 가지고 있는 대한민국 IT문화상 Virtual DOM을 토대로한 장점으로 초기 독점을 하였고, 현재까지 유지되어 사용율 1위를 차지하고 있다.
• 2024년 기준 리액트를 대신할 수 있는 프레임워크가 나오지 않는 이상 아마 트랜드가 유지될것으로 전망된다.

 

JSX이란?

• JS보다 직관성, 가독성이 좋은 HTML을 이용하여 만들어진 자바스크립트에 대한 확장 구문
• 익숙한 HTML 문법과 유사한 JSX를 통해 컴포넌트 단위로 분리는 생성되는 렌더링 방식 지원
• 마크업 코드에 익숙하다면 그것만으로도 JSX를 통해 컴포넌트를 구성하는데 쉽게 적응할 수 있다.
• 리액트에서 요소를 제공하여 사용되며 리액트에서 JSX 사용이 필수가 아니지만, JS안에서의 JSX는 렌더링에 도움을 준다. 렌더링 마다 HTML 태그를 createElement 사용하지 않아도, JS를 통해 ui 렌더링이 편안하게 변경되어 주로 같이 사용한다.

 

JSX가 웹사이트에 어떻게 그려지나요?

• JSX 코드는 Babel이 트랜스파일링되어 html 태그가 아니라 자바스트립트 변환되어 화면을 그린다.
• 즉 브라우저 실행 전 코드가 번들링 되면서 컴파일 후 JSX 표현식이 정규 JavaScript 함수 호출이 되고 JavaScript 객체로 인식되는 코드

// JSX
const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

// JS로 변환된 JSX
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

// JSX
function App() {
	return (
    	<div>
        	Hello <b>react</b>
        </div>
    )
}

// JS로 변환된 JSX
function App() {
	return React.createElement("div", null, "Hello ", React.createElement("b", null, "react"));
}

 

JSX 문법 특징

• 속성을 정의할때 HTML 속성 값 대신 cameCase 프로터미 명명규칙을 사용, 역할은 같다.
  • 예 class는 className가 되고 tabindex는 tabIndex
• <></> 닫힘 태그가 필요하다.
• React DOM은 JSX에 삽입 된 값은 렌더링 완료전 통과하고 JS 작성 시 주입되므로 XSS을 방지하고, 렌더링 후 문자열로 변경되어 값이 표출된다.
• 브라우저에서 컴파일 시 Babel은 JSX를 React.createElement()로 사용한다.
• 여러 요소를 사용 시 반드시 부모요소가 감싸여야한다.
• 대소문자를 구분한다.

 

DOM 개념

웹페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델

1. 실행 순서
   • 먼저 브라우저는 HTML 파일을 스크린에 보여주기 위해 DOM 노드 트리 생성, 렌더트리 생성, 레이아웃, 페인팅 과정을 거칩니다. DOM 노드는 HTML의 각 엘리먼트와 연관되어 있기 때문에 HTML 파일에 20개의 변화가 생기면 DOM 노드가 변경되고 그 이후의 과정역시 20회 다시 이루어 집니다.
2. 단점
   • 작은 변화에도 매우 복잡한 과정들이 다시 실행되기 때문에 DOM 변화가 잦을 경우 성능이 저하됩니다.

 

virtual DOM(가상돔)이란

1. 정의
   • 실제 돔의 가벼운 사본같은 개념
   • 상태변화가 일어나면 브라우저 작동 원리에 의해 렌더링 과정이 일어나는데 이때 렌더 트리를 재생성하거나 리플로우, 리페인트 과정이 필요하다.
   • 이러한 과정이 발생되는 많은 연산에서발생하는 비효율성을 최소화하기 위해 탄생한 개념이다.
   • 리액트는 성공적으로 가상돔의 개념을 적용한 선발 주자 중 하나이다.
2. 실행 순서
   • Virtual DOM은 뷰에 변화가 있다면, 그 변화가 실제 DOM에 적용되기 전에 Virtual DOM에 적용시키고 최종 결과만 실제 DOM에 전달합니다. 따라서 20개의 변화가 있다면 Virtual DOM은 변화된 부분만 가려내어 실제 DOM에 전달하고 실제 DOM은 그 변화를 1회로 인식하여 단 한번의 렌더링 과정만 거치게 됩니다.
     • Diff : 1회로 인식하여 단 한번의 렌더링 과정 / 바뀐부분만 재조정하는 행위
3. 장점
   • Virtual DOM은 실제 DOM 변화를 최소화 시켜 돔을 조작하는 비용을 줄임

 

 

React 기본 개념 9가지

1. 컴포넌트 생성 및 중첩하기

React는 컴포넌트로 구성된다.
- component(컴포넌트): 고유한 로직과 모양을 가진 UI

• React component
• 정의 : 마크업을 반환하는 자바스크립트 함수이다.
• 특징 : React 컴포넌트의 이름은 항상 대문자로 시작, HTML 태그는 소문자로 시작
  - MyButton : React component
  - button, div, h1 : HTML 태그 (JSX)

function MyButton() {
  return (
    <button>
      I'm a button
    </button>
  );
}

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

 

 

2. JSX로 마크업 작성하기 

React에서  HTML(마크업 문법)을 JSX라고 한다.
React 프로젝트는 편의성을 위해 JSX를 사용합니다. 로컬 개발에 권장하는 모든 도구는 JSX를 기본적으로 지원한다.

• JSX
• 정의 : React에서  HTML(마크업 문법)
• 특징 :
  • JSX는 HTML보다 엄격하다.
  • 무조건 태그를 닫아야 한다.
  • 컴포넌트 반환 시 여러 개의 JSX 태그를 사용할 수 없고, 부모로 감싸야 한다. ( <div>...</div> 또는 빈 <>...</>)

function AboutPage() {
  return (
    <div>
      <h1>About</h1>
      <p>Hello there.<br />How do you do?</p>
    </div>
  );
}

 

Fragment 사용하여 JSX 그룹화 하기

• Fragment는 DOM트리에 추가되지 않는다.
• <></>로 사용이 가능하다.

function AboutPage() {
  return (
    <Fragment>
      <h1>About</h1>
      <p>Hello there.<br />How do you do?</p>
    </Fragment>
  );
}

function AboutPage() {
  return (
    <>
      <h1>About</h1>
      <p>Hello there.<br />How do you do?</p>
    </>
  );
}

 

 

3. 스타일 추가하기 

React에서는 className으로 CSS class를 지정한다.
css 내용은 HTML의 class 어트리뷰트와 동일한 방식으로 동작한다.

/* In your CSS */
.avatar {
  border-radius: 50%;
}
<img className="avatar" />

 

4. 데이터 표시하기 

JSX를 사용하면 자바스크립트에 마크업이 가능하다.
중괄호를 사용하면 코드에서 일부 변수를 삽입하여 사용자에게 표시한다.
- 이스케이프 백 : JSX 어트리뷰트에서 따옴표 대신 중괄호를 사용하여 지정하는 것

const user = {
  name: 'Hedy Lamarr',
  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
  imageSize: 90,
};

return (
	<>
    	<h1>{user.name}</h1>
        <img
            className="avatar"
            src={user.imageUrl}
            alt={'Photo of ' + user.name}
            style={{
              width: user.imageSize,
              height: user.imageSize
            }}
          />
    </>
);

 

 

5. 렌더링

• Render
• 정의 : 화면에 컴포넌트를 반환하는 행위
• 특징 : React 안에서는 자바스크립트와 동일한 문법으로 작성 가능하며 JSX 를 포함하여 작성할 수도 있다.

 

조건부 렌더링

let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return (
  <div>
    {content}
  </div>
);

<div>
  {isLoggedIn ? (
    <AdminPanel />
  ) : (
    <LoginForm />
  )}
</div>

<div>
  {isLoggedIn && <AdminPanel />}
</div>

 

리스트 렌더링 

for 문 및 map() 함수와 같은 자바스크립트 기능을 사용한다.
★ 가장 큰 차이점으로 목록의 각 항목에 대해, 형제 항목 사이에서 해당 항목을 고유하게 식별하는 문자열 또는 숫자를 전달해야 한다.
이는 나중에 항목을 삽입, 삭제 또는 재정렬할 때 어떤 일이 일어났는지 알기 위해 key가 되기 위함이다.

const products = [
  { title: 'Cabbage', id: 1 },
  { title: 'Garlic', id: 2 },
  { title: 'Apple', id: 3 },
];

const listItems = products.map(product =>
  <li key={product.id}>
    {product.title}
  </li>
);

return (
  <ul>{listItems}</ul>
);

 

6. 이벤트에 응답하기 

• event
• 정의 : 컴포넌트 내부에 이벤트 핸들러 함수를 선언하는 것
• 특징 : 이벤트 핸들러 함수를 호출하지 않고 전달이 가능하다 (()=>{})

function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

 

7. 화면 업데이트하기 

이전에는 Ajax 또는 document를 직접 수정하는 작업을 하였지만, React에서는 useState를 사용하여 간편하게 UI를 업데이트 할 수 있다.

• state
• 정의 : 컴포넌트가 특정 정보를 “기억”하는 저장소
• 특징 : 내장 Hook 사용시 useState로 사용한다. 변수명은 일반적으로 [A, setA]로 작성한다.

function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}

 

8. Hooks 사용하기 

위 useState는 React에서 제공하는 내장 Hook이다. ( Hook : https://ko.react.dev/reference/react )
기존의 것들을 조합하여 자신만의 Hooks를 작성할 수 있다.

•  Hooks
• 정의 : React에서 use로 시작하는 함수
• 특징 : 컴포넌트(또는 다른 Hooks)의 상단에서만 Hooks를 호출한다.

 

9. 컴포넌트 간에 데이터 공유하기 

컴포넌트의 독집적인 state 변수를 하위 컴포넌트에서 사용하거나, 공유하고 싶은 경우 props로 넘겨준다.

• props
• 정의 : 데이터를 공유하고 항상 함께 업데이트하기 위한 컴포넌트가 필요한 경우사용하는 방법
• 특징 : JSX 중괄호를 사용하여 MyButton에 정보를 전달

export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Counters that update together</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

function MyButton({ count, onClick }) {
  return (
    <button onClick={onClick}>
      Clicked {count} times
    </button>
  );
}

 

 

---

https://ko.react.dev/learn