React 공부 - 1

React 란?

메타에서 개발한 오픈 소스 자바스크립트 라이브러리

 

SPA(Single Page Application)을 전제로 하고 있으며,

Dirty checking과 Virtual DOM을 활용하여

업데이트 해야하는 DOM 요소를 찾아서 해당 부분만 업데이트하기 때문에,

리렌더링이 잦은 동적인 모던 웹에서 엄청나게 빠른 퍼포먼스를 내는게 가능하다.

 

SPA	웹 애플리케이션이 단일 HTML 페이지로 구성되어 있고, 페이지 전환이나 콘텐츠 갱신이 클라이언트 측에서 JavaScript를 통해 동적으로 이루어지는 구조
Dirty checking	양식(form) 데이터의 변경 여부를 추적하는 개념으로, 컴포넌트 상태나 입력값이 변경되었는지 확인하는 프로세스를 의미
Virtual DOM	UI 렌더링을 효율적으로 처리하기 위해 사용하는 가상화된 DOM(Document Object Model) 표현

 

---

설치 방법

1. node 설치

2. 설치 후 환경 변수 등록 [NODE_HOME]

// react 기본 설치

//pwa 대고객 대상 활용
npx create-react-app my-app

// react + typescript
npx create-react-app my-app --template typescript

// react + pwa
npx create-react-app pwa-react --template cra-template-pwa

// react + pwa + typescript
npx create-react-app pwa-react --template cra-template-pwa-typescript

 

 html을 컴포넌트화 하기 위해  자바스크립트 언어인 JSX 사용해 DOM을 렌더링

function App() {  
  return (  
    <div className="App">  
      <header className="App-header">  
        <img src={logo} className="App-logo" alt="logo" />  
        <p>          Edit <code>src/App.js</code> and save to reload.  
        </p>  
        <a          className="App-link"  
          href="https://reactjs.org"  
          target="_blank"  
          rel="noopener noreferrer"  
        >  
          Learn React  
        </a>  
      </header>    </div>  );  
}

 

JSX에서 class="" -> className 사용, 변수는 {name}
style 직접 넣을 땐 style="{ color : 'red' }" 처럼 object형으로 넣어준다.
 

# REACT 프로젝트 생성 React PWA + Typescript
npx create-react-app react-study --template cra-template-pwa-typescript

# 라이브러리 설치
npm install react-router-dom yarn @mui/material @emotion/react @emotion/styled axios

npm install react-router-dom
npm install yarn
npm install @mui/material @emotion/react @emotion/styled
npm i axios

 

---

react-router

React Router는 React로 작성된 SPA(Single Page Application)에서 클라이언트 측 라우팅을 관리하기 위한 라이브러리

 

• 페이지 새로고침 없이 URL을 변경하고, URL에 따라 적절한 컴포넌트를 동적으로 렌더링 가능
• SPA의 네비게이션과 페이지 전환을 부드럽게 만들어 사용자 경험을 향상

---

React Router VS React Router Dom

리액트 라우터를 설치하는데 두가지 선택지가 있다.

 

react-router 와 react-router-dom 이다.

 

react-router	SSR이나 네이티브 앱 같은 특정 환경에서의 라우팅을 지원
react-router-dom	웹 개발을 위한 추가 기능을 제공, 웹 개발 시 react-router-dom, native 같은 웹-앱 프로젝트에서는 react-router 를 사용

---

react-router 설정

1. index.tsx

index.tsx 파일에서 app 최상단에 BrowserRouter 를 선언

라우터 종류는 HTML5를 지원하는 BrowserRouter와

해시주소를 지원하는 HashRouter가 있다.

 

	BrowserRouter	HashRouter
URL 형식	깔끔한 URL (예: /about)	해시 URL (예: /#/about)
기술	HTML5 History API	URL 해시(#) 기반
서버 설정	필요 (모든 경로를 index.html로 라우팅)	불필요 (클라이언트 측에서 처리)
SEO	유리 (SSR과 결합 시)	불리 (검색 엔진이 해시 무시 가능)
사용 환경	현대적인 SPA, 서버 제어 가능 환경	정적 호스팅, 서버 설정 불가 환경
브라우저 지원	현대 브라우저에서 잘 작동	모든 브라우저에서 안정적

 

jsx
<React.StrictMode>  
	<BrowserRouter>    
  		<App />
	</BrowserRouter>
</React.StrictMode>

2. useNavigate

 

JavaScript 코드로 페이지 이동을 처리 (예: 버튼 클릭, 폼 제출, 조건에 따른 리다이렉트)

 

jsx
const navigate = useNavigate();

// index page 이동
navigate('/');

// 이전 페이지 이동
navigate(-1);

navigate('/post/detail', { state: { postId: '001' } });

---

useEffect

React의 함수형 컴포넌트에서 사이드 이펙트를 처리하는 훅. 컴포넌트 렌더링 후

특정 작업(예: API 호출, DOM 업데이트)을 수행하거나, 정리(cleanup) 작업을 처리

사이드 이펙트 처리	렌더링 후 외부 시스템과의 상호작용(예: API 호출, 타이머 설정)
정리(Cleanup)	컴포넌트 언마운트 또는 의존성 변경 시 이전 이펙트 정리(예: 타이머 제거, 구독 해제)
의존성 기반 실행	의존성 배열에 따라 이펙트를 조건부로 실행

useEffect는 컴포넌트가 mount 됐을 때, unmount 됐을 때, component가 update 됐을 때 특정 작업을 처리

함수형 라이프사이클 훅을 대체 할 수 있다. (componentDidMount, componentDidUpdate, componentWillUnmount)

사용 방법 

 

 jsx
useEffect( function, deps )

 

function	수행하고자 하는 function 을 작성. 리액트는 이 함수를 기억했다가 DOM이 업데이트 된 후 함수를 호출 이 함수에서 함수를 return 할 경우 컴포넌트가 unmount 될 때 다시 한번 실행.
deps	배열 형태이며, 배열 안에 검사하고자 하는 특정 값이나 빈배열을 통해 useEffect 가 실행된 의존성을 결정.

1. componentDidMount

 

클래스 컴포넌트가 DOM에 마운트된 직후 호출되는 생명주기 메서드

 

초기 설정 작업(예: 데이터 가져오기, 구독 설정)을 수행

deps에 빈 배열을 넣으면 첫 mount 시 한번 실행

jsx
useEffect(() => {  
  console.log('dependency []. 첫 렌더링시 실행');  
}, []);

2. componentDidUpdate

클래스 컴포넌트의 props 또는 state 변경으로 인해 재렌더링된 직후 호출되는 생명주기 메서드

 

업데이트 후 추가 작업(예: 데이터 가져오기, DOM 업데이트)을 처리

 

deps 에 특정 porps 나 state를 넣어 해당 상태가 변경 될 때마다 실행

jsx
useEffect(() => {  
  console.log('dependency [bool1]. bool1 변경 시 실행');  
}, [bool1]);

3. componentDidUnMount

 

클래스 컴포넌트가 DOM에서 제거되기 직전에 호출되는 생명주기 메서드

 

리소스 정리(예: 타이머, 이벤트 리스너, 구독) 작업을 수행

useEffect 함수 내에 return으로 함수를 작성하면 unmount 될 떄 실행

 

이 reutrn 함수를 클린 업(Clean Up) 함수라 한다.

아래 코드에서 deps에 bool3 가 선언되었고 bool3 에 의해 렌더링 되는 컴포넌트가 있는 경우

react 는 bool3 가 unmount 될 때를 인식하고 unmount 시에만 return 함수를 실행

bool3 에 의해 변경되는 컴포넌트가 없고 단순 값 변경이 일어나면 클린업 함수는 update시에 매번 실행

jsx
useEffect(() => {  
  if (isFirstRender.current) {  
    isFirstRender.current = false;  
    return;  }  
  console.log('dependency [bool3]. bool3 변경 시 실행.');  
  return () => {  
    console.log('dependency [bool3]. bool3 unmount 시 실행.');  
  };  
}, [bool3]);

return (
{bool3 && <CardComponent1 bool3={bool3} />}
)

 

---

useRef

React 훅으로, .current 속성을 가진 변경 가능한 참조 객체를 반환

 

컴포넌트의 생애주기 동안 유지되며, DOM 요소 참조나 값을 저장하는 데 사용

 

DOM 요소 참조	<input ref={myRef}>로 DOM 요소 접근
값 유지	렌더링과 무관하게 변수 저장(예: 이전 상태, 타이머 ID)
비렌더링 데이터 관리	값 변경 시 리렌더링 방지
지속성	컴포넌트 생애주기 동안 .current 값 유지
비렌더링	.current 변경 시 리렌더링 발생 안 함(성능 최적화)
DOM 접근	document.querySelector와 유사하지만 React 방식으로 안전
유연성	DOM 외에도 임의의 값을 저장 가능
장점	렌더링 없이 값 관리 가능(useState 대비 성능 우위)
	간단한 DOM 조작 지원
	외부 라이브러리와 통합 용이
	리렌더링 방지로 성능 향상
	useRef로 이전 값 저장해 불필요한 연산 감소

 

jsx
const 변수명 = useRef(초기값);

//결과 값으로 { current: 초기 값 } 을 지닌 객체가 반환