Loading...
2023. 1. 10. 21:20

리액트 기본 배우기 -컴포넌트에 대하여-

1. 컴포넌트 기반의 구조 리액트에서는 모든 페이지가 컴포넌트로 구성되어 있고, 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성될 수 있다. 이러한 컴포넌트들을 마치 레고 블록을 조립하듯이 끼워 맞춰서 새로운 컴포넌트를 만들 수 있다 에어비앤비 웹사이트 화면을 캡쳐하고 컴포넌트를 간단히 표시한 것이다. A, B로 표시된 부분이 리액트 컴포넌트이다. 이러한 컴포넌트를 여러 번 반복적으로 사용해서 하나의 페이지를 구성하고 있다. 이처럼 리액트는 작은 컴포넌트들이 모여서 하나의 컴포넌트를 구성하고, 이러한 컴포넌트들이 모여서 전체 페이지를 구성한다. 이렇게 하나의 컴포넌트를 반복적으로 사용함으로써 전체 코드의 양이 줄어 자연스레 개발 시간과 유지 보수 비용도 줄일 수 있다. 2. 리액트 컴포넌트..

2023. 1. 10. 21:11

react 기본 익히기 - element에 대하여-

1. element의 정의 리액트 앱을 구성하는 요소 Elements are the smallest building blocks of React apps "엘리먼트는 리액트 앱의 가장 작은 빌딩 블록들" 개발자 도구에서 볼 수 있는 elements 탭의 elements는 DOM element이고, HTML의 요소이다. 실제로 화면에서 볼 수 있는 것들 그러면 react element는..? 리액트 초창기에는 "화면에 나타나는 내용을 기술한 자바스크립트 객체"를 나타냈다고 한다 실제 브라우저의 DOM에 존재하는 엘리먼트는 DOM 엘리먼트가 되고, 리액트의 Virtual DOM에 존재하는 엘리먼트가 리액트 엘리먼트가 된다 리액트 엘리먼트는 DOM 엘리먼트의 가상 표현이 된다 DOM 엘리먼트는 리액트 엘리먼트..