[React #1] What is React?

안녕하세요 미어캣입니다.

 

오늘은 React에 대해서 글을 작성해보려고합니다.

 

원래는 Vue.js를 공부하고 있었습니다. 기본적인건 사용할 줄알고 강의도 여러번 들어 계속해서 Nuxt 프레임워크로 넘어갈려는 찰나에, 실제 실무에서는 React가 압도적으로 많이 쓰이고 있어 겸사겸사 React도 공부를 하고있습니다.

 

코드적으로는 조금씩 늘려가고 있긴한데 아직 React는 무엇이다? 라는 명사적으로는 애매한 부분이 있어서

글을 끄적여 봅니다.

---

 

GPT에서는 React를 뭐라고 할까요?

 

React :

Facebook에서 개발한 JavaScript 라이브러리라고 정의하고 있습니다.

 

Features : 

가상 DOM :
가상의 DOM을 사용하여 빠르고 효율적인 UI를 업데이트(전체 DOM을 업데이트하는 대신 변경된 부분만 업데이트)

컴포넌트 기반 : UI를 작은 독립적인 컴포넌트로 나누어서 개발

단방향 데이터 흐름 : 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 바인딩

JSX(JavaScript XML) : 
JSX는 JavaScript의 확장 문법으로, JavaScript 내에서 HTML과 유사한 문법을 사용하여 UI 컴포넌트를 작성

재사용 가능한 컴포넌트 : 
UI를 작은 단위로 나누고, 필요에 따라 이러한 컴포넌트를 조합하여 복잡한 UI를 만들 수 있다?

런타임 성능 최적 

 

로 정의하고 있습니다.

 

Vue3와 비슷한 부분들이 있는데 기본적으로 SPA방식이 사용하는 특징들을 공유하고

 

특이점은 역시 JSX인것 같습니다.

 

React Reference에서는 React를 다음과 같이 소개하고 있습니다.

 

React는 The library for web and native user interfaces

웹/Native의 UI를 위한 라이브러리다 라고 소개하고 있습니다.

React를 React, React DOM으로 구분하고 있는데

React DOM의 경우에는 webApplication에서만 지원한다고 되어있습니다.

 

오늘은 산을 스케치하는 것이지 그림을 완성하는 날은 아니므로  오늘은 React의 기본적인 특징만 이해하려고 합니다.

---

 

React reference에서 크게 

Hooks

Components

APIs

Directives

을 설명하는데 APIs와 Directives의 경우에는 지침이니

 

Hooks과 Component 위주로 정의해보았습니다.

---

 

Hooks : 

state Hooks :  사용자의 Inputs과 같은 메모리해야할 부분을 컴포넌트에게 전달해주는 Hook
 - useState :컴포넌트에서 상태를 관리하기 위해 사용
 - useReducer : 복잡한 상태 관리와 상태 업데이트 로직을 다루는데 사용

context Hooks : React의 컨텍스트(Context)를 사용하여 전역 상태를 관리하기 위한 훅
 - useContext : 컨텍스트의 값을 읽어 오는 곳의 사용


Ref Hooks : DOM 요소에 접근하여 클래스 컴포넌트에서의 인스턴스를 참조할 때 사용되는 Hook
 - useRef : 컴포넌트 내에서 가변적인 값을 유지할 때, 지속되어야 하는 데이터를 관리할 때 사용

Effect Hooks : network, 브라우저 DOM,  animations... 등의 UI 라이브러리나 React Code가 아닌 외부 시스템과 연결할 수 있게 하는 Hook
 - useEfffect : 외부시스템과 연결할 때 사용

Performance Hooks :  퍼포먼스를 개선하거나 최적하하는데 도움을 주는 Hooks
 - useMemo : 계산 비용이 높은 연산의 결과를 기억하고, 의존성 배열이 변경되지 않는 한 이전 값을 재사용
 - useCallback :  새로운 콜백함수를 생성하지 않고도 렌더링간 동일한 콜백 함수를 사용

 

//useState()
const example = () => {
	
    const [test, setTest] = useState('');
   
   	const incrementCount = () => {
    	setTest(test +1);
    }
    return(
            <p>{test}</p>
            <button onClick={incrementCount}>+</button>
    )
}

 

setTest를 통해 test의 값을 update하고

onClick을 통해 메서드를 이벤트에 참조할 수 있습니다.

 

//useContext

import ExampleContext from './ExampleContext';

const example = () => {
	const theme = useContext(ExampleContext);

	return(
		<div style={{ background: theme.background, color: theme.text}}>
			Example
		</div>
	)
}

 

ExampleContext를 import하여 전역에서 해당 컨텍스트의 값을 읽어와 사용할 수 있습니다.

 

//useRef, useEffect
import React, { useRef, useEffect } from 'react';

const MyComponent = () => {
  // useRef를 사용하여 input 요소에 대한 참조를 생성합니다.
  const inputRef = useRef(null);

  // 컴포넌트가 마운트되면 input 요소에 포커스를 줍니다.
  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return (
    <div>
      <input ref={inputRef} type="text" />
    </div>
  );
};

 

참조를 통해 inputRef.current로 해당 DOM 요소에 접근할 수 있습니다.

useEffect를 사용하여 컴포넌트가 마운트될 때 input 요소에 자동으로 포커스주기 때문에 . 이컴포넌트에서도 DOM 요소에 접근하고 조작할 수 있습니다.

 

//useMemo

import React, { useMemo } from 'react';

const MyComponent = ({ a, b }) => {

  const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

  return <div>{memoizedValue}</div>;
};

export default MyComponent;

 

 a와 b가 변경될 때마다 computeExpensiveValue 함수가 호출됩니다.

 

//useCallback

import React, { useCallback } from 'react';

const MyComponent = ({ onClick }) => {

  const handleClick = useCallback(() => {
    onClick();
  }, [onClick]);

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

export default MyComponent;

 

onClick 함수가 변경되지 않는 한 이전에 생성된 함수를 재사용합니다.

 

useState경우 vue3에서 state()와 동일한 것같아 익숙하지만

 

useEffect, useMemo, useCallback은 프로젝트를 진행하면서 좀 더 익혀야할 부분인 것 같습니다.

---

 

Components :

<Fragment> 구문 혹은 <>...</> 구문 : 
 여러 개의 JSX 노드를 그룹화하는데 사용하는데 불필요한 DOM요소를 생성하지 않고 코드를 더 깔끔하게 유지할 수 있습니다.

<Profile> React 트리의 렌더링 성능을 프로그래밍적으로 측정하는데 사용

<Suspense> 자식 컴포넌트가 로딩이 되는 동안의 대기시간을 측정하여, 로딩 중 대체 콘텐츠를 표시할 수 있도록 도와줌

<StriceMode> 개발 환경에서 추가적인 검사를 활성화하여 잠재적인 문제를 조기에 발견하는데 도움(부적절한 사용법, 레거시 API...)

 

컴포넌트는 좀 더 부수한 환경에 대한 부분이 아닌가 생각됩니다.

 

vue랑은 또 다른 스타일인 React 먼가 vue 보다는 Java스럽다고해야하나? 객체지향적이며

처음에는 달라서 적응이 필요했는데 며칠 써보니 가독성이 더 좋은 것 같기도 했습니다.

기본적인 hooks들을 사용하면서 Performance적인 부분도 사용하는 방향으로 공부를 하도록 해야겠습니다.