[한경xToss] 5주차 요약 : React.js 기초

 

* 개인의 학습 내용 기록 중, 극히 일부의 내용만 작성되었습니다.

 

 

마크다운 파일 작성법

git, github 사용법

github desktop

 

React.js 기초

React는 웹 프레임워크로, JS 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용됨

- facebook에서 제공해주는 프론트엔드 라이브러리

- 컴포넌트 기반의 UI 라이브러리

 

명령형 프로그래밍 vs 선언형 프로그래밍

명령형 프로그래밍: 명령형 프로그래밍은 컴퓨터에게 수행해야 할 작업을 순차적인 명령어들로 구성한 프로그래밍 방식입니다. 명령형 프로그래밍에서는 코드가 프로그램 상태를 변경하는 데 필요한 절차를 명시적으로 기술하며, 변수를 사용해 상태를 추적합니다. 대표적인 명령형 프로그래밍 언어로는 C, C++, Java, Python 등이 있습니다.

 

선언형 프로그래밍: 선언형 프로그래밍은 프로그램이 어떻게 동작하는지에 대한 절차를 설명하는 대신, 원하는 결과를 얻기 위한 조건과 제약 조건을 명시하는 프로그래밍 방식입니다. 선언형 프로그래밍에서는 프로그램이 어떻게 수행되는지에 대한 세부 사항을 추상화하여, 코드가 더 간결하고 이해하기 쉬워집니다. 대표적인 선언형 프로그래밍 언어로는 SQL, Haskell, Prolog 등이 있습니다.

리액트는 선언형 프로그래밍 패러다임을 따르며 개발자가 UI의 상태와 동작을 선언적으로 정의할 수 있도록 합니다. 이렇게 함으로써 코드가 더 간결하고 가독성이 좋아지며, 유지 보수가 쉬워집니다.

 

React의 특징

1. Data Flow
2. Component 기반 구조
3. Virtual Dom
4. Props and State
5. JSX

---

JSX란?

JSX는 JavaScript XML의 약자로, React에서 UI를 정의하기 위해 사용되는 문법.

JSX는 HTML과 비슷해 보이지만 JavaScript 코드 안에서 작성되며 컴파일러에 의해 순수한 JavaScript로 변환됨

React 컴포넌트는 JSX로 UI 구조를 선언하고 이를 렌더링.

 

1. JSX의 주요 특징

  HTML과 비슷한 문법으로 UI를 정의할 수 있음

  브라우저에서 직접 실행되지 않으며 Babel 같은 도구에 의해 JavaScript로 변환됨

  동적 데이터 바인딩 가능 ({} 중괄호로 JavaScript 표현식을 삽입)

 

2. JSX의 장점

  가독성

  직관적인 동적 데이터 렌더링

  컴포넌트 기반 개발

 

리액트 컴포넌트 개념

1. Props를 입력받고, 리액트 엘리먼트를 반환해 주는 것

2. 컴포넌트의 이름은 항상 대문자로 시작(파스칼)

---

Lifecycle : 생애주기

리액트 라이프사이클의 개념

리액트의 라이프사이클은 컴포넌트가 생성되고, 업데이트되며, 제거될 때 일어나는 일련의 과정을 의미. 클래스형 컴포넌트에서 더 명확하게 사용되었지만, 함수형 컴포넌트에서는 useEffect Hook을 통해 비슷한 동작을 구현할 수 있습니다.

 

React component 라이프사이클의 3단계

1. 마운트 (Mount): 컴포넌트가 처음 DOM에 추가될 때 발생하는 단계
2. 업데이트 (Update): 상태나 props가 변경되어 컴포넌트가 다시 렌더링될 때 발생하는 단계
3. 언마운트 (Unmount): 컴포넌트가 DOM에서 제거될 때 발생하는 단계

 

fetch vs axios 비교

  fetch → 브라우저 기본 내장 API (작은 프로젝트나 간단한 요청에 적합)

  axios → 더 편리한 기능이 많아 React 프로젝트에서 더 일반적으로 사용됨

---

React Hook

리액트 훅(React Hooks)은 함수형 컴포넌트에서도 클래스 컴포넌트의 기능(예: 상태 관리, 생명 주기 관리)을 사용할 수 있도록 도와주는 기능입니다.

훅은 리액트 v16.8부터 도입되었으며, useState, useEffect, useContext 등 다양한 훅이 제공됨.

커스텀 훅

개념: 커스텀 훅은 리액트의 기본 훅(useState, useEffect, useRef 등)을 조합하여 재사용할 수 있는 로직을 만드는 훅입니다.

1. 커스텀 훅은 반복되는 로직을 분리하여 다른 컴포넌트에서도 재사용할 수 있도록 만듭니다.
2. 이름 규칙: use로 시작하는 함수로 작성해야 합니다. 예: useCounter

리액트 이벤트 (Event)

리액트에서 이벤트는 일반적인 HTML DOM 이벤트와 유사하지만 약간의 차이점이 있습니다.

리액트 이벤트는 기본적으로 synthetic event(합성 이벤트) 시스템을 사용합니다.

 

 

캡쳐링 & 버블링

 

조건부 렌더링

특정 조건에 따라 컴포넌트나 엘리먼트를 화면에 렌더링하는 기법입니다.

자바스크립트의 조건문(예: if-else, 삼항 연산자, 논리 연산자(AND) 등)을 활용하여 동적으로 UI를 제어할 수 있습니다.

 

조건부 렌더링 방법

1. if문 사용
2. 삼항 연산자 (? :) 사용
3. 논리 연산자 (&&) 사용