React 기초 그리고 입문1

 

리액트 강의를 보며 공부한 내용을 정리 및 작성한 글입니다.

 

 

 

---

 

 

 

리액트의 기술적인 특징

리액트의 기술적인 특징은 세 가지가 있다.

 

1. 컴포넌트 기반으로 UI를 표현한다.

컴포넌트(Component)란 말 그대로 화면을 이루는 "구성 요소"를 뜻한다. 아래에 자세한 설명을 포함한다.

프로젝트의 사이즈가 점점 커지고 페이지가 많아질수록 코드를 수정하기 어려워지는데

이렇게 중복되는 코드들을 컴포넌트화하여 제거하면 유지보수 차원에 용이하다는 이점이 있다.

 

2. 화면 업데이트에 대한 구현이 쉽다.

화면 업데이트란 쉽게 말해 사용자의 행동에 따라 웹 페이지가 스스로 모습을 바꿔 상호작용하는 것이다.

리액트는 과정을 생략하고 목적만 간결히 명시하는 방법인 선언형 프로그래밍 방식으로 동작하고,

자바스크립트는 목적을 이루기 위한 모든 일련의 과정을 설명하는 방식인 명령형 프로그래밍 방식으로 동작한다.

리액트의 컴포넌트가 가진 state 변수의 값에 따라 다양한 렌더링이 가능하다.

즉, 업데이트를 위한 복잡한 동작을 직접 정의할 필요 없이 특정 변수의 값을 바꾸는 것만으로도 화면을 업데이트 할 수 있다.

 

3. 화면 업데이트가 빠르게 처리된다.

화면 업데이트는 자바스크립트가 DOM을 수정하게 되면 발생한다. (자세한 과정은 브라우저 동작 원리로 알 수 있다.)

자주 업데이트 될수록 화면이 계속 렌더링되면서 성능에 영향을 끼치게 되는데

리액트는 업데이트가 발생하면 실제 DOM이 아닌 가상 DOM을 수정하고, 업데이트들을 모아 실제 DOM을 한 번만 수정한다.

 

---

리액트 앱 생성

Vite로 리액트 앱을 생성할 수 있다.

npm create vite@latest

 

생성된 프로젝트의 기본 구조 및 설명은 다음과 같다.

 

package.json

- devDependencies : 개발 시 사용하는 라이브러리의 의존성 묶음이다.

실제 배포 시 이 라이브러리들은 배포되지 않는다.

 

public

- 정적 파일 보관 장소이다.

 

src

- 코드들이 보관되어 있다.

- assets: 정적 파일이 보관되어 있다.

- App.css

- App.jsx: jsx는 리액트 파일 확장자이다.

- eslintrc.cjs: 코드 스타일 통일 도구인 ESLint의 설정 파일

- .gitignore

- index.html

- vite.config.js: vite 설정 파일

 

---

컴포넌트 (Component)

HTML 태그를 반환하는 리액트의 함수이며 함수의 이름을 따서 부른다.

함수로 만든 컴포넌트를 함수 컴포넌트라고 부르며 첫 글자는 반드시 대문자로 시작한다.

소문자로 시작하면 리액트는 함수 컴포넌트로 인식하지 않는다.

계층 구조에서, App Component는 Root Component와 동일하다.

 

---

JSX (JavaScript Extensions)

확장된 자바스크립트 문법이다.

동적으로 특정 변수의 값을 html로 렌더링 할 수 있다.

function Foo() {
	const language = "React";
    return <div>Hello {language}!</div>;
}

 

jsx 문법에는 몇 가지 주의 사항이 있다.

우선 중괄호 내부에는 자바스크립트 표현식(숫자, 문자, 변수 등)만 넣을 수 있다. if, for 등의 조건문, 반복문은 넣을 수 없다.

또한 숫자, 문자열, 배열 값만 렌더링 되며, true, undefined, null 등은 렌더링되지 않는다.

객체 또한 그대로 렌더링 할 수 없다.

세 번째로, 모든 태그는 닫혀 있어야 하며, 최상위 태그는 반드시 하나만 존재할 수 있다.

 

---

이벤트 핸들링 (Event Handling)

이벤트(event)란 웹 내부에서 발생하는 여러 가지 사용자의 행동들이다. (버튼 클릭, 메세지 입력, 스크롤 등)

이벤트 핸들링은 이러한 이벤트들이 발생했을 때 처리하는 것을 뜻한다.

 

합성 이벤트(Synthetic Base Event)

- 모든 웹 브라우저의 이벤트 객체를 하나로 통일한 형태다. 크로스 브라우징 이슈에서 자유로운 이점이 있다.

 

---

State 관리

상태(State)는 현재 가지고 있는 형태나 모양을 정의하고, 변화할 수 있는 동적인 값을 뜻한다.

리액트의 모든 컴포넌트는 State를 가질 수 있고, 이 값에 따라 렌더링 되는 UI가 결정된다.

이 때 컴포넌트에 렌더링이 다시 발생하는 상황을 리렌더 또는 리렌더링이라고 한다.

 

하나의 컴포넌트는 여러 State를 가질 수도 있다.

 

새로운 State를 생성하는 useState()라는 함수는 인수로 state의 초기값을 받아 두 개의 요소를 담은 배열을 반환한다.

import { useState } from 'react';

function App() {
  const state = useState(0);
  // const [state, setState] = useState(0);
}

 

반환되는 배열의 첫 번째 값은 state의 현재 값이며, 두 번째 값은 state를 변경시키는 상태 변화 함수이다.

javascript의 일반 변수는 그 값이 바뀌더라도 리렌더링이 발생하지 않는다.

하지만 state는 변경 시 리렌더링이 발생하는데 이는 리액트의 컴포넌트는 state의 값이 변화할 때만 리렌더링을 발생시키기 때문이다.

 

---

리렌더링(Re-rendering)이 발생하는 조건

자식 컴포넌트(하위 컴포넌트)는 자신이 관리하는 state의 값이 변경되지 않아도

부모 컴포넌트(상위 컴포넌트)로부터 제공받는 props의 값이 변경되었을 때 리렌더링이 일어난다.

 

성능 이슈를 최소화하기 위해 관련 없는 컴포넌트는 분리할 수 있게 설계하도록 한다.