01 수업 소개
02 실습 환경 구축
03 소스 코드 수정 방법
학습용 서적을 사면 클리셰처럼 존재하는 챕터들이다. 어떤 배움이든 마지막까지 이렇게 쉽다면 얼마나 좋을까만은 입문이라도 쉽게 할 수 있음에 감사하자. 이 책은 목차 구분을 편(Part) - 장(Chapter)으로 나눴는데, 워낙 볼륨이 작은 책(총 268p)이다 보니 절(Section)이 없다. 그래서 그런가 책을 읽다보니 저자께서도 장과 절(Section)을 혼동해서 적으시더라.
1장 수업 소개 부분은 리액트의 의의를 기술했다. html 반복적인 계층 구조를 함수화(서브루틴화)하여 효율을 높이는 것인데, 코딩의 기본이라 할 수 있겠다. 태초의 html은 마크업 언어이기 때문에 함수화를 논할 일이 없었다. 즉, 팀 버너스 리 경(Sir Tim Berners-Lee)께서 이렇게까지 html이 복잡해지리라 예측하긴 쉽지 않았을 터.
그래도 자바스크립트와 CSS를 만나면서 html은 간접적으로 함수화를 이루게 되었는데, 천재들은 이들은 이마저도 매우 귀찮았던 것이다. 그래서 등장한 솔루션 중 하나가 바로 이 리액트.
리액트는 자바스크립트의 함수화를 넘어 각 태그별 객체화를 제공한다. (이 부분은 다른 포스트로 설명할까 한다.)
예를 들어 아래와 같은 html 코드가 있을 때,
<!DOCTYPE html> <html> <head> <title>My First HTML Page</title> </head> <body> <h1>안녕하세요! 이것은 HTML 예제입니다.</h1> <p>HTML은 웹페이지를 만들 때 사용하는 마크업 언어입니다.</p> <a href="https://www.google.com">Google로 이동</a> </body> </html>
이렇게 단순화하는 것이다.
<html> <head/> <body/> <html/>
이렇게 단순화 한 부분에(head, body 등) 각각 함수 핸들러(가 붙는 구조인데, 꼭 1:1 대응은 아니고 여러가지 대응 방식이 있는 듯 싶다.
1장의 마지막엔 리액트 구현 방식에 class 문법과 function 문법이 있고 보통은 함수 문법으로 구현하고 있다고 한다. 내가 프로젝트를 맡았을 때 프론트엔드 팀원 역시 비슷한 이야기를 했고, 리액트 공식 안내 사이트에서도 보통은 function 방식을 이용한다고 한다. 하지만, 주의해야 할 것은 class를 이용하지 않는다고 해서 OOP(Object-Oriented Programming)가 아닌 것은 아니라는 것이다. React 프레임워크는 완벽한 OOP 프레임워크다.
2장과 3장은 작업환경 구축과 실습을 위한 스켈레톤 제작을 다뤘다. 컴퓨터를 다룰 줄만 알면 누구라도 쉽게 따라 할 수 있는 부분이라 공부할 내용은 없었다.
'Book Study > 생활코딩! React 리액트 프로그래밍' 카테고리의 다른 글
| 5일차 리액트 기초(09~10장) - 생활코딩! React 리액트 프로그래밍 (0) | 2025.03.20 |
|---|---|
| 4일차 리액트 기초(08장) - 생활코딩! React 리액트 프로그래밍 (0) | 2025.03.20 |
| 3일차 리액트 기초(06~07장) - 생활코딩! React 리액트 프로그래밍 (0) | 2025.03.19 |
| 2일차 리액트 기초(04~05장) - 생활코딩! React 리액트 프로그래밍 (0) | 2025.03.18 |
| '생활코딩! React 리액트 프로그래밍' 교재로 입문부터 전문가까지 (1) | 2024.12.31 |
