리액트 (React)

React

React는 Facebook에서 개발한 UI 라이브러리로, 모던 웹 애플리케이션 개발에 많이 사용됩니다.

React는 다음과 같은 이유로 많은 개발자들에게 선택되어 사용되고 있습니다.

1. Component 기반 구조: React는 Component 기반의 구조를 가지고 있어, UI를 작은 단위로 쪼개고 각각의 컴포넌트로 관리할 수 있습니다. 이를 통해 코드의 재사용성과 유지보수성이 높아지며, 대규모 애플리케이션 개발에 적합합니다.
2. Virtual DOM: React는 Virtual DOM을 사용하여 UI 업데이트 성능을 최적화합니다. Virtual DOM은 실제 DOM과 동기화되는 가상의 DOM 구조를 사용하여, 변경된 부분만 업데이트하고 전체 UI를 다시 렌더링하는 것을 방지합니다. 이를 통해 UI 업데이트 성능이 향상되고, 사용자 경험을 개선할 수 있습니다.
3. JSX: React는 JSX 문법을 사용하여, JavaScript 코드 내부에서 HTML과 유사한 마크업을 작성할 수 있습니다. 이를 통해 UI 요소를 보다 직관적이고 가독성 좋게 작성할 수 있으며, 코드 작성과 디버깅이 더욱 쉬워집니다.
4. 생태계: React는 많은 개발자들이 사용하고 있어, 다양한 개발 도구와 라이브러리, 커뮤니티가 존재합니다. 이를 통해 문제 해결에 용이하며, 애플리케이션 개발 생산성을 높일 수 있습니다.

React는 위와 같은 이유로 모던 웹 애플리케이션 개발에서 널리 사용되며, 빠르고 유연한 UI 라이브러리로 자리 잡았습니다.

---

 

JSX

JavaScript XML의 약어로, React에서 사용되는 문법 JavaScript 코드 내부에서 HTML과 유사한 마크업을 작성 React에서 JSX를 사용하면 UI 요소를 보다 직관적이고 가독성 좋게 작성할 수 있으며, 코드 작성과 디버깅이 더욱 쉬워진다.

JSX는 또한 React 엘리먼트를 생성하는 데 사용되며, 이는 React의 컴포넌트 기반 구조에서 중요한 역할을 한다. JSX는 Babel과 같은 JavaScript 컴파일러를 사용하여 일반 JavaScript 코드로 변환됩니다. 이를 통해 브라우저에서 JSX를 지원하지 않는 경우에도 React 애플리케이션을 실행할 수 있습니다.

 

예시

import React from 'react';

function App() {
return (
<div>
<h1>Hello, World!</h1>
<p>This is a React app using JSX.</p>
</div>
);
}

export default App;

위 코드에서는 JSX를 사용하여 <div> 요소 안에 <h1>과 <p> 요소를 작성하고 있습니다. 이러한 JSX 코드는 Babel과 같은 컴파일러를 사용하여 일반적인 JavaScript 코드로 변환됩니다.

---

리액트 장점은 리렌더링에 있다 - 비교 알고리즘

엘리먼트 타입이 바뀌면 이전 엘리먼트를 버리고 새로 그린다.

엘리먼트 타입이 같다면?

*(key를 먼저 비교함)

props(DataSet: [], {}, [{}])를 비교해서 변경사항만 새로 그린다.

*파라미터에 {}가 있으면 props이다.

---

바닐라 JS와 리액트의 차이점

• 바닐라 JS - 변경이 발생하면 무조건 다시 그림
• React - 변경된 부분만 다시 그림 -> 효과적 / 바뀐걸 알려면 계속 비교해야 함 - 단점

React는 불변객체이다 (immutable) - 변하지 않는 객체 우리는 그저 ReactDOM.render 함수로 element(JSX) 전달할 뿐

변경에 대한 판단은 리액트가 알아서 함 : 즉 변경 사항에 대항 반영은 리액트 일임

---

Component

React에서 component는 재사용 가능한 UI 요소입니다.

Component는 UI 요소의 모습과 동작을 정의하는 코드를 포함하며, 다른 component와 조합하여 더 복잡한 UI를 구성할 수 있습니다.

React에서 component는 클래스 컴포넌트 또는 함수 컴포넌트 두 가지 형식으로 작성할 수 있습니다.

 

클래스 컴포넌트는 React.Component를 상속하고, render() 메소드를 구현하여 UI 요소를 반환합니다.

함수 컴포넌트는 일반 함수와 유사하게 작성되며, JSX 문법으로 UI 요소를 반환합니다.

 

Component는 자체적으로 상태(state)를 가질 수 있으며, 상태의 변경이 발생할 때마다 React는 자동으로 해당 component를 다시 렌더링합니다. Component는 또한 속성(props)을 받을 수 있으며, 속성은 부모 component로부터 전달됩니다. 이러한 속성과 상태를 이용하여 component의 모습과 동작을 동적으로 변경할 수 있습니다.

React의 component 기반 구조는 코드 재사용성과 유지보수성을 높여주며, 대규모 애플리케이션 개발에 적합합니다.

---

Fragment

React에서 컴포넌트가 여러 엘리먼트를 반환하는 것은 흔한 패턴입니다.

Fragment는 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화할 수 있습니다.

 

예시

import React, { Fragment } from 'react';

function SomeComponent() {
  return (
    <Fragment>
      <p>Some content here.</p>
      <p>Some more content here.</p>
    </Fragment>
  );
}

<Fragment> 컴포넌트를 사용하여 두 개의 자식 요소를 그룹화하고 반환하고 있습니다.

<Fragment> 컴포넌트는 실제로 렌더링되지 않으며, 자식 요소만 렌더링됩니다.

Fragment는 이전에는 <div>나 <span> 태그를 사용하여 여러 요소를 그룹화했지만, 이러한 방식은 DOM에 추가적인 불필요한 노드를 추가할 수 있고, CSS 스타일링이나 구조에 영향을 미칠 수 있습니다. Fragment를 사용하면 이러한 문제를 방지할 수 있으며, 불필요한 노드를 추가하지 않고, 코드 가독성도 높일 수 있습니다.

---

Element

React에서 Element(요소)는 UI를 구성하는 가장 작은 단위로,

React 애플리케이션에서 화면에 표시되는 모든 것들을 Element로 표현할 수 있습니다.

Element는 JavaScript 객체로 표현되며, React에서 이를 사용하여 UI를 구성합니다.

Element는 다음과 같은 방식으로 작성됩니다.

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

위 예제에서는 <h1> 태그를 사용하여 Element를 생성하고 있습니다.

Element는 React에서 이를 통해 가상 DOM을 구성하고, 실제 DOM에 렌더링됩니다.

React에서는 Element는 다른 Element를 자식으로 가질 수 있으며, 이를 통해 복잡한 UI를 구성할 수 있습니다.

다음 예제에서는 두 개의 <h1> Element를 포함한 부모 Element를 작성하는 방법을 보여줍니다.

const element = (
  <div>
    <h1>Hello, world!</h1>
    <h1>Welcome to my app!</h1>
  </div>
);

React에서 Element는 불변(immutable)이며, 생성된 후에는 변경할 수 없습니다.

Element의 속성이나 자식을 변경하려면 새로운 Element를 생성해야 합니다.

이를 통해 React는 성능을 최적화하고, 변경사항을 더 효율적으로 감지할 수 있습니다.