IT/React

[React] 기능들 되돌아보기

HJ:: 2023. 8. 2. 20:59

주요 리액트 기능 관련 지식을 복습, 숙지해두면 프로젝트를 이해하는데 도움될 것이다.

 

가상 DOM(Virtual DOM)

리액트는 가상 DOM을 사용하여 실제 DOM과 동기화하여 변경 사항을 효율적으로 반영합니다. 가상 DOM은 실제 DOM과 동일한 구조를 가지지만, 메모리에서 관리되기 때문에 DOM 조작이 최소화되고 성능이 향상됩니다.

 

컴포넌트 기반 구조

 

리액트는 컴포넌트 기반으로 UI를 구성합니다. 작은 단위의 컴포넌트들을 조합하여 복잡한 UI를 만들 수 있으며, 코드의 재사용성과 유지보수가 용이해집니다.

 

 

 

 

 

JSX(JavaScript XML)  (별칭: 쟉스)

 

리액트에서는 JSX라는 문법을 사용하여 JavaScript 코드 안에 XML과 비슷한 형식의 코드를 작성할 수 있습니다. JSX를 사용하면 가독성이 좋고, 컴포넌트의 구조를 직관적으로 파악할 수 있습니다.

 

 

 

상태 관리(State Management)

 

리액트는 컴포넌트의 상태를 관리할 수 있는 내장 상태 관리 기능을 제공합니다. 컴포넌트의 상태가 변경되면 리액트는 자동으로 UI를 업데이트하여 변경된 상태를 반영합니다.

 

import React, { useState } from 'react';

const StateManagementExample = () => {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
};

export default StateManagementExample;

 

생명주기 매서드(Lifecycle Methods)

 

컴포넌트의 생성, 업데이트, 소멸과 같은 생명주기 단계에서 실행되는 메서드를 활용하여 필요한 동작을 수행할 수 있습니다. 예를 들어, 컴포넌트가 마운트되었을 때 초기 데이터를 불러오는 작업을 수행할 수 있습니다.

 

 

이벤트 처리

 

리액트는 다양한 이벤트를 감지하고 처리하는 기능을 제공합니다. 사용자의 입력이나 애플리케이션 내부에서 발생하는 이벤트를 처리하여 UI를 업데이트하거나 상태를 변경할 수 있습니다.

 

 

조건부 렌더링(Conditional Rendering)

 

조건에 따라 다른 UI를 렌더링하는 것이 가능합니다. 조건문을 사용하여 특정 상황에서 다른 컴포넌트나 UI를 보여줄 수 있습니다.

 return (
    <div>
      {loggedIn ? <h1>Welcome, User!</h1> : <button onClick={() => setLoggedIn(true)}>Log In</button>}
    </div>
  );
};

- ? : 논리 연산자로 조건을 주어서 랜더링 해줄 수 있다.

 

 

리스트와 Key

 

배열 데이터를 동적으로 렌더링할 수 있고, 각 아이템에 고유한 키(Key)를 할당하여 효율적으로 리스트를 업데이트할 수 있습니다.

 

 return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};

 

 

컴포넌트 스타일링

 

리액트는 스타일링을 위한 다양한 방법을 지원합니다. CSS, 인라인 스타일, CSS-in-JS 등의 방식으로 컴포넌트를 스타일링할 수 있습니다.

const StylingExample = () => {
  const buttonStyle = {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px',
    borderRadius: '5px',
  };

  return <button style={buttonStyle}>Click Me</button>;
};

- 물론, styled-components 라이브러리를 사용하여 <> 태그 형식으로 style를 적용시켜줄 수 있다! 

리액트 라우터(React Router)

 

리액트 라우터를 통해 싱글 페이지 애플리케이션(SPA)에서 브라우저 주소를 기반으로 페이지를 동적으로 제어하고 관리할 수 있습니다.

 

 

 

 

 

 

이벤트 버블링(Bubbling)과 이벤트 캡처링(Capturing)

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

- 버블링: 이벤트가 가장 깊은 자식 요소에서 시작되어 상위 요소로 전파되는 현상.

이벤트가 발생한 요소에서 상위 요소로 전파되면서 부모 요소에 등록된 이벤트 핸들러도 호출.

-이벤트 캡처링(Capturing)은 이벤트가 최상위 요소에서 시작하여 이벤트가 발생한 가장 깊은 자식 요소까지 전파되는 현상을 말합니다. 이벤트 캡처링은 이벤트 버블링과 반대 방향으로 진행되며, 이벤트 버블링보다 더 적게 사용됩니다.