React에 대해 알아보기

emit·2023년 8월 2일

React

서론

오랜만에 글을 써야 하는데 뭘 써야 좋을지 정말 많이 고민했다.
이제까지 2년 넘게 리액트를 사용했지만
진짜 아이러니하게 리액트에 대해 정리하지 않았던 것 같다.

그래서 지금에서야 적어보려고 한다.
흠.. 빠르게 속성으로 알아보자

❓리액트란

React는 사용자 인터페이스(User Interface, 이하 UI)를 만들기 위한 Javascript 라이브러리다.

💯 리액트를 사용하는 대표적인 이유 3가지

재사용 가능한 구성 요소로 복잡한 애플리케이션 구축 가능
동적이고 빠른 UI를 생성하는 기능
강력한 레퍼런스 - 깔끔한 공식 Docs, 블로그, 책 그리고 지원(Meta!)

🔮 리액트의 특징

1.JSX

JSX(Javascript XML)는 Javascript를 확장한 문법이다. 이는 자바스크립트와 HTML을 동시에 사용 가능하다.

const App = () => {
  const name = "Lee";
  
  return (
    {/* HTML의 사용 가능, 하나의 최상위 요소로 구성되어야 합니다. */}
    <> {/* 빈 태그 모양을 사용할 수 있는데, fragment라고 불린다. */}
      <h1>이름 : {name}</h1> {/* 표현식은 중괄호 */}
      <button onClick={()=>console.log("click")}>클릭!</button> {/* 요소는 camelCase */}
    </>
  )
}

2.컴포넌트 기반

컴포넌트(Component)란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 뜻한다.

UI를 개발하는 데 있어 컴포넌트를 레고 블록이라고 생각하면 쉽다.

각 컴포넌트들을 조립하여 하나의 완성품을 만들어 전체 화면을 차근차근 구성할 수 있다.

// App.js
import Gallery from './Gallery.js';
import { Profile } from './Gallery.js';

// App 컴포넌트
export default function App() {

  return (
    {/* 컴포넌트를 불러와서 사용가능 */}
    <Profile />
    <Gallery />
  );
}

// Gallery.js

// Profile, Gallery 컴포넌트
export function Profile() {

  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}

export default function Gallery() {

  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

3.Virtual DOM

리액트는 Virtual DOM을 사용해서 빠른 성능을 유지하도록 한다.

Virtual DOM은 메모리에 가상으로 존재하는 DOM으로 Javascript의 객체형태로 이루어져 있다.

현재 브라우저에 보여주고 있는 DOM의 상태가 업데이트되면 Virtual DOM과 먼저 비교하여 실제 DOM에 업데이트를 한다.

참고

💡 React에서 “직접 DOM에 접근하는 것은 지양해야 한다."

이는 DOM에 직접 접근해도 기능 구현에 문제는 없다.
하지만, DOM이 직접 변경되면 사소한 변경사항에도 전체가 리렌더링되기 때문에 브라우저에 예상치 못한 과부하가 올 수 있다.
따라서 최대한 DOM에 직접 접근하지 말아야 한다.

4.Data Flow(단방향 데이터)

React는 양방향 바인딩이 전제되는 MVC패턴과는 다른 특징을 보인다. 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가진다.

부모에서 자식 컴포넌트로 단방향 데이터 흐름이 일어나며 이로 인해 데이터의 흐름을 명확히 알 수 있고 예측 가능하다. (Angular.js와 같은 양방향 데이터 바인딩은 규모가 커질수록 데이터의 흐름 추적이 어렵다.)

5.Props와 State

위의 단방향 데이터와 연계되는 개념이며 부모와 자식 컴포넌트간에 데이터를 전달하고 사용할 수 있도록 해준다.

Props
- Props란 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터를 말한다.
- 쉽게 말해 읽기 전용(Read) 데이터라고 생각하면 된다.
- 자식 컴포넌트에서 Props를 받아 사용할 때 직접적인 수정이 불가능하며, 부모 컴포넌트에서 수정가능하다.
State
- State는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다.
- State는 동적인 데이터를 다룰 때 사용하며, 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용한다.
- state를 여러개 선언할 수 있고, 각각 독립적으로 사용된다.

import React, {useState} from "react";

const Text = ({text}) => {
    return <div>{text}</div>
}

const App = () => {
    const [text, setText] = useState("Hello world!"); // Hello world!로 초기값 선언
    // 자식컴포넌트에 Props를 이용하여 Hello world!라는 데이터를 전달
    return <Text text={text} /> 
}