여태까지 블로그 회고록을 작성하려고 하다가 3일을 못 갔기 때문에.. 가장 어려운 부분인 리액트에서만큼은 조금씩이라도 정리를 해보려고 한다.
1.1. 컴포넌트 만들기
- 컴포넌트: 사용자의 인터페이스를 구축하는 기본
- 여태까지 HTML로 마크업을 했지만 -> REACT 를 사용하면 JS로 마크업
- 클라이언트 중심, 서버 중심으로 나누어짐
- 오늘은 "클라이언트 중심" 위주로 수업
리액트를 사용하면 CSS, JS를 사용해 재사용 가능한 UI 블록 요소인 사용자 정의 컴포넌트를 작성하고 결합할 수 있다. 리액트를 사용하면 CSS와 JS를 사용해 재사용 가능한 UI 블록 요소인 사용자 정의 컴포넌트를 작성하고 결합할 수 있다.
REACT 컴포넌트는 마크업을 생성하는 JS 함수이다. 컴포넌트의 핵심은 재사용 가능성에 있다. 그렇기 때문에 다른 파일로 분리하는 것이 중요하다.
페이스북의 실시간 업데이트를 위해 이용되기 시작한 리액트는 상태값이 변경되거나 부모가 재렌더링 될 때마다 UI를 자동으로 업데이트해주는 JS 라이브러리다.
"가상 DOM을 통해 변경된 부분만 효율적으로 업데이트"
2.1. 리액트로 화면 렌더링하기
- 리액트는 컴포넌트의
- 상태값이 변경되거나 부모가 재렌더링
- UI를 자동 업데이트
- 이때 변경된 부분의 UI만 효율적으로 업데이트
리액트 기초 동작을 원리를 쉽게 설명해주신 블로그를 참고했다.
리액트 기초 동작 원리
- 오늘 실제 수업한 4-hello-react.js 파일을 불러왔다. 우선 REACT와 REACT DOM 모듈을 불러온다.

- 리액트 앨리먼트를 생성하기 위해서는 React 객체의 createElement 메서드로 리액트 요소를 생성하는 방법이 있다. 순서는 1) 요소 이름, 2) 속성 집합, 3) 중첩된 요소 또는 텍스트 순서대로 구성된다. 빈 객체 또한 생성이 가능하다.


정리하다가 궁금해진 점! 엘리먼트와 컴포넌트의 차이는 무엇일까?
- 엘리먼트는 컴포넌트를 이루는 작은 단위다. 엘리먼트가 생성되면 절대로 변하지 않고 바로 사용되지도 않는다.
- 타입과 속성 두 가지 필드로 구성된다.
- 깊이 파고들수록 어려운 것 같아서.. 우선은 엘리먼트는 컴포넌트 안에 들어가는 작은 단위고, 바로 사용되지 않는다고 알아두면 좋을 것 같다.
엘리먼트와 컴포넌트의 차이
- 리액트 엘리먼트를 화면에 렌더링하기
이제 이 앨리먼트를 화면에 렌더링하기 위해서는 리액트 돔을 사용해야 한다. 리액트돔을 사용하여 createRoot를 사용하여 render 에 전달하면 무사히 렌더링된다.

공식 번역 문서 참고
많이 배우고 갑니다