여태까지 블로그 회고록을 작성하려고 하다가 3일을 못 갔기 때문에.. 가장 어려운 부분인 리액트에서만큼은 조금씩이라도 정리를 해보려고 한다.

1.1. 컴포넌트 만들기

  • 컴포넌트: 사용자의 인터페이스를 구축하는 기본
  • 여태까지 HTML로 마크업을 했지만 -> REACT 를 사용하면 JS로 마크업
  • 클라이언트 중심, 서버 중심으로 나누어짐
  • 오늘은 "클라이언트 중심" 위주로 수업

리액트를 사용하면 CSS, JS를 사용해 재사용 가능한 UI 블록 요소인 사용자 정의 컴포넌트를 작성하고 결합할 수 있다. 리액트를 사용하면 CSS와 JS를 사용해 재사용 가능한 UI 블록 요소인 사용자 정의 컴포넌트를 작성하고 결합할 수 있다.

REACT 컴포넌트는 마크업을 생성하는 JS 함수이다. 컴포넌트의 핵심은 재사용 가능성에 있다. 그렇기 때문에 다른 파일로 분리하는 것이 중요하다.

페이스북의 실시간 업데이트를 위해 이용되기 시작한 리액트는 상태값이 변경되거나 부모가 재렌더링 될 때마다 UI를 자동으로 업데이트해주는 JS 라이브러리다.

"가상 DOM을 통해 변경된 부분만 효율적으로 업데이트"

2.1. 리액트로 화면 렌더링하기

  1. 리액트는 컴포넌트의
  • 상태값이 변경되거나 부모가 재렌더링
  • UI를 자동 업데이트
  1. 이때 변경된 부분의 UI만 효율적으로 업데이트

리액트 기초 동작을 원리를 쉽게 설명해주신 블로그를 참고했다.

리액트 기초 동작 원리

  1. 오늘 실제 수업한 4-hello-react.js 파일을 불러왔다. 우선 REACT와 REACT DOM 모듈을 불러온다.

리액트 모듈 불러오기

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

리액트 앨리먼트 생성하기

앨리먼트 생성 요소

정리하다가 궁금해진 점! 엘리먼트와 컴포넌트의 차이는 무엇일까?

  • 엘리먼트는 컴포넌트를 이루는 작은 단위다. 엘리먼트가 생성되면 절대로 변하지 않고 바로 사용되지도 않는다.
  • 타입과 속성 두 가지 필드로 구성된다.
  • 깊이 파고들수록 어려운 것 같아서.. 우선은 엘리먼트는 컴포넌트 안에 들어가는 작은 단위고, 바로 사용되지 않는다고 알아두면 좋을 것 같다.

엘리먼트와 컴포넌트의 차이

  1. 리액트 엘리먼트를 화면에 렌더링하기

이제 이 앨리먼트를 화면에 렌더링하기 위해서는 리액트 돔을 사용해야 한다. 리액트돔을 사용하여 createRoot를 사용하여 render 에 전달하면 무사히 렌더링된다.

리액트 돔

공식 번역 문서 참고

1개의 댓글

comment-user-thumbnail
2024년 1월 19일

많이 배우고 갑니다

답글 달기

관련 채용 정보

Powered by GraphCDN, the GraphQL CDN