React 기본 개념 정리

1. React.js 기본 개발환경 설정

• Facebook (Meta)에서 개발한 JavaScript 라이브러리이다.
• UI를 구현하는 도구로 javascript 언어를 기반으로 사용한다.
• "반응하다" 라는 의미로 javascript 중심으로 사용되는 정의형 프로그래밍이 아닌 반응형 프로그래밍이다.
• 화면상에 출력될 코드를 컴포넌트의 return문을 이용해서 jsx코드로 표현하는 것이 목적이다.
• 자바스크립트의 이벤트 역할을 하는 것이 리액트의 컴포넌트이다.

Vanilla JavaScript

• 자바스크립트만으로 작성한 언어로 간단한 FE 코드를 작성하는 것은 다수의 코드양이 필요하다.
• 자바스크립트의 코드가 길어질수록 에러를 내재할 확률이 높아지기 때문에, 유지 보수가 어렵다.
• 따라서, React가 이를 보완하기 위해 JSX위주의 프로그램 방식을 채택하였다.

Node.js 설치

• 리액트 프로젝트에서 원할한 서버 구축을 위한 웹서버 프로그램
• 리액트 프로젝트 만든 후, 디렉토리 접근한다.
  • npm create vite@latest (프로젝트이름)
    cd (프로젝트이름)
  • 테스트용 서버 설치 및 실행
    npm install
    npm run dev

vite

• 리액트 프로젝트의 디렉토리 구조를 만들어 주는 툴

SPA(Single Page App)

• 페이지 하나에서 구현되는 것
• 레이아웃의 변화는 적지만, 그 안에서 실시간으로 변화가 많을때 적합한 방식이다.

2. 컴포넌트

프로그램의 모든 실행을 위한 구성단위로 함수로 표현한다.

function App (){
state(); // state로 변수 선언
return; // return 키워드안에 JSX코드
}

• 보통, 1개의 파일에는 1개의 컴포넌트가 권장사항이지만, 예외도 있다.

2-1. 웹 페이지를 구성하는 리액트

웹페이지	역할	리액트
HTML	뼈대	컴포넌트의 JSX
CSS	살	CSS
JavaScript	내장기관	JavaScript

2-2. 컴포넌트를 왜 이용하는가

• 재사용성
  • 컴포넌트는 결국 함수로서, 재사용이 가능하다.
  • (레고 블록처럼) 작은 블록을 제작하고, UI로써 조립해서 사용가능하다는 장점이 있다.
• 모듈화 : 컴포넌트는 내부에 html, css, javascript 코드를 모두 품고 있어 모듈화가 가능하다.

2-3. 컴포넌트의 생성 규칙

• 컴포넌트는 자바스크립트 함수의 형태이다.
• 컴포넌트의 이름의 첫글자는 언제나 대문자이다.
• return되는 코드는 리액트가 랜더링 할 수 있는 JSX코드여야만 한다.

2-4. JSX

• html태그와 유사한 형태로 return 키워드 안 코드이다.
• 컴포넌트가 랜더링시, 실제 랜더링이 되는 대상이 된다.

return (
	<div>
      <Header />
      <main>
      	<h2>시작해봅시다!</h2>
      </main>
	</div>
);

2-5. JSX의 표현식

• { } 안에 자바스크립트 표현식을 사용한다.
  - 삼항연산자, map(), with()등을 사용가능하다.
  - 조건절은 사용불가
• JSX코드는 JSX문법만을 사용해야 하지만, 자바스크립트의 "식"을 이용하고 싶다면 JSX 코드 내부에서 중괄호를 이용해서 접근해서 사용하면 된다.

3. ReactDOM 라이브러리

• 리액트에서 사용하는 가상 DOM가 있다.
• JSX으로 만들어진 가상 DOM이 있는데, 각각의 DOM 객체를 조립하여 사용한다.
• 이렇게 조립된 객체는 ReactDOM 라이브러리를 통해 리액트가 브라우저 상에 노출되는 DOM으로 변환하여 랜더링한다.
  • ReactDOM의 createRoot메서드를 활용하여
  • <App />로 랜더링되는 컴포넌트를 표현
• 실제 DOM 객체와 가상 DOM 객체는 일치하게 된다.
• ReactDOM의 render()함수가 해당 컴포넌트를 랜더링을 하며 진입을 시작한다.

import ReactDOM from "react-dom/client";
import App from "./App.jsx";
ReactDOM.createRoot(
document.getElementById("root")
).render(<App />);

각각의 컴포넌트는 Tree구조로 표현할 수 있다.

• 리액트는 "트리형태의 컴포넌트 구조"를 만든다.
  
• 컴포넌트의 데이터 접근은 HTML > JS > jsx로 진입한다.
  즉, javascript를 통해 리액트 코드를 실행시킨다.

4. Props

• 매개변수를 사용해서 로직을 구현할 수 있다.
  • 이때의 매개변수는 별개의 properties의 변수명으로 나열하는 방식이 아니라 객체를 매개변수로 담아주는 것처럼 Props(프랍)을 사용한다.
• 매개변수의 네이밍은 제약이 없다.

5. State

• 변경이 감지되면, 랜더링된다.
• set함수로 상태를 변경한다.
• 변수와 수정할 함수로 구성된 리스트로 이뤄져 있다.

6. useState와 useRef

useState는 변경감지시, 랜더링되는 반면,
Ref는 변경감지 되어도 랜더링되지 않는다.

• ref객체의 current객체로 해당 DOM에 접근함

7. useEffect

컴포넌트에는 생명주기가 있다.

• 특정시점에 작동하는 기능을 useEffect를 실행시키면 구현가능

 useEffect(() => {
        // 실행 구문
        return () => {
        // 컴포넌트가 사라지기 전에 호출 
        }
}, [변경감지할 변수]);

그러나, 변경이 감지 될때마다 랜더링이 계송실행되므로 쓸데없는 메모리 낭비 발생할 수 있다. 굳이 알아야 할 필요 없다면, 랜더링 방지할 필요있음

useMemo 사용하면됨

8. useMemo

useMemo(()=>{
        return 
        // 랜더링하지 않을 구문
},[랜더링하지 않을 변수]);