[처음 만난 리액트] React 책읽기 : Chapter 0-5 정리

토스뱅크 멘토님 조언을 따라서 요즘 전공서적(?) 개발서적(?) 책들을 읽고 있는데,

오래 기억하려면 내용을 요약해두면 좋을 것 같아 정리한다.

 

이 책은 입문자 기준이라, 설명이 꽤 자세하다.

프론트엔드 개발자들은 개념을 탄탄히 다지는 데에 도움이 될 것 같다.

 

지금 읽고 있는건 React 도서랑 Node JS 도서인데,

이번 달 내로 완독하고 Next JS와 Springboot 책도 읽어보고 싶다.

 

어릴 땐 책을 참 좋아했는데, 요즘은 읽을 시간이 많이 없어서 아쉽다 🤓📖

요약은 깔끔하게 하려고 chatgpt의 도움을 받았다!

---

[ 참고 서적 : 소플의 처음 만난 리액트(2판) - 한빛미디어 ]

 

🔹 웹 개발 기본 개념 정리

🏗 HTML (HyperText Markup Language)

• 웹사이트의 뼈대를 구성하는 마크업 언어
• 태그(tag) 를 사용하여 웹페이지의 구조를 정의

🎨 CSS (Cascading Style Sheets)

• 웹사이트의 레이아웃, 글꼴, 색상 등의 디자인을 담당

⚡ JavaScript (JS)

• 웹페이지의 동적인 기능을 구현하는 스크립트 언어
• 웹사이트가 상호작용 가능하게 동작하도록 함
• 정식 명칭: ECMAScript
• ES6(2015년 출시) 이후 다양한 문법이 추가되며 표준화 진행
• 주요 개념: 자료형, 연산자, 함수 등

🛠 개발 환경 설정

1. Node.js 및 npm 설치 (JavaScript 실행 및 패키지 관리)
2. VS Code 설치 (코드 편집기)

---

⚛️ React 정리

✅ React란?

• 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리
• SPA(Single Page Application) 개발을 쉽고 빠르게 도와주는 도구

🚀 React의 장점

• 빠른 업데이트와 렌더링 속도 (Virtual DOM 사용)
• 재사용성이 높은 컴포넌트 기반 구조
• 메타(구 페이스북)의 지원으로 지속적인 발전
• 활발한 커뮤니티와 지식 공유
• React Native를 이용한 모바일 앱 개발 가능

⚠️ React의 단점

• 방대한 학습량 (JSX, 상태 관리, 훅 등 익혀야 할 개념 많음)
• 상태 관리의 복잡성 (Redux, Context API 등 추가 도구 필요할 수도 있음)

---

📝 JSX 정리

✅ JSX란?

• JavaScript와 XML/HTML을 함께 사용할 수 있는 JavaScript의 확장 문법

🔹 JSX의 역할

• JSX로 작성된 코드는 JavaScript 코드로 변환됨
• React는 JSX 코드를 createElement() 함수를 사용한 코드로 변환

🚀 JSX의 장점

• 코드가 간결해짐
• 가독성이 향상됨
• Injection Attack 방어 → 보안성이 향상됨

🔹 JSX 사용법

• 기본적으로 모든 JavaScript 문법을 지원
• JavaScript 코드에 XML과 HTML을 혼합하여 사용 가능
• {}(중괄호)를 사용하여 JavaScript 코드를 삽입

---

🔹 React 엘리먼트(Element) 정리

✅ 엘리먼트란?

• 리액트 앱의 가장 작은 빌딩 블록
• 화면에 나타나는 내용을 기술하는 JavaScript 객체
• DOM 엘리먼트의 가상 표현 (Virtual DOM 기반)

🔹 엘리먼트의 생김새

• JavaScript 객체 형태
• 컴포넌트 유형, 속성, 내부 자식 요소 등의 정보 포함

🚀 엘리먼트의 특징

• 불변성(Immutability) → 생성 후 자식이나 속성을 변경할 수 없음

🔹 엘리먼트 렌더링

• ReactDOM.createRoot() 로 만든 root의 render() 함수 사용
• React 엘리먼트를 실제 HTML 엘리먼트로 렌더링
• 렌더링 과정: Virtual DOM → 실제 DOM 반영

🔄 엘리먼트 업데이트

• 엘리먼트는 변경할 수 없으므로 새로운 엘리먼트를 생성하여 교체
• 기존 엘리먼트를 수정하는 것이 아니라 새로운 엘리먼트를 만들어 바꿔치기

---

⚛️ React 컴포넌트 정리

✅ 컴포넌트란?

• 컴포넌트 기반 구조
  • 작은 컴포넌트들이 모여 하나의 컴포넌트를 구성 → 이러한 컴포넌트들이 모여 전체 페이지를 만듦
• 자바스크립트 함수와 개념적으로 유사
  • 속성(Props) 을 입력으로 받아 React 엘리먼트를 생성하여 반환

🎯 Props (Properties)란?

🔹 Props의 개념

• 컴포넌트의 속성을 의미
• 컴포넌트에 전달할 다양한 정보를 담은 JavaScript 객체

🚀 Props의 특징

• 읽기 전용 (Immutable) → Props 값은 변경할 수 없음
• 같은 Props가 들어오면 항상 같은 엘리먼트를 반환해야 함

🔹 Props 사용법

• JSX 사용 시 → 키-값 쌍 형태로 컴포넌트에 전달
• 문자열 외의 값(정수, 변수, 다른 컴포넌트 등) → {}(중괄호)로 감싸서 전달
• JSX 미사용 시 → createElement() 함수의 두 번째 파라미터로 Props 객체 전달

---

⚛️ React 컴포넌트 만들기 정리

✅ 컴포넌트의 종류

• 함수 컴포넌트 → 함수 형태로 된 컴포넌트
• 클래스 컴포넌트 → ES6의 클래스를 사용하여 만든 컴포넌트

🔹 컴포넌트 이름 짓기

• 항상 대문자로 시작해야 함
• 소문자로 시작하면 DOM 태그로 인식됨

🎯 컴포넌트 렌더링

• 컴포넌트로부터 엘리먼트를 생성 → React DOM에 전달하여 화면에 표시

🚀 컴포넌트 활용법

• 컴포넌트 합성 → 여러 개의 컴포넌트를 조합하여 하나의 컴포넌트를 만듦
• 컴포넌트 추출 → 큰 컴포넌트에서 일부 기능을 분리하여 새로운 컴포넌트로 만듦
  • 기능 단위로 구분하여 재사용 가능하도록 추출하는 것이 좋음