반응형 Spec UP - Frontend/소플의 처음 만난 리액트3 chap 4. 엘리먼트 렌더링 4.1 엘리먼트에 대해 알아보기 1. 엘리먼트의 정의 엘리먼트는 리액트 앱을 구성하는 가장 작은 블록들을 의미한다. 리액트 엘리먼트는 화면에서 보이는 것을 기술하며, 엘리먼트가 기술한 내용을 토대로 실제 화면에서 보게되는 DOM 엘리먼트가 만들어진다. 아래 JSX 예제코드를 살펴보자. const element = Hello world! element 변수에 값을 대입하는 코드가 실행되면, 리액트의 createElement() 함수를 사용하여 엘리먼트를 생성하게 된다. 이렇게 생성된 것이 리액트 엘리먼트이며, 리액트는 이 엘리먼트를 이용해 실제 화면에서 보게될 DOM 엘리먼트를 생성한다. 2. 엘리먼트의 생김새 리액트 엘리먼트는 컴포넌트 유형(ex. Button)과 속성(ex. color) 및 내부의 모든.. 2024. 3. 18. chap 1. 리액트 소개 1.1 리액트는 무엇인가? 1. 리액트란? : 사용자와 웹사이트의 상호작용을 돕는 인터페이스를 만들기 위한 자바스크립트 라이브러리 * 라이브러리란, 특정 프로그래밍 언어에서 자주 사용되는 기능을 모아서 정리해놓은 모음집이다. * 사용자 인터페이스(UI)란 사용자와프로그램이 서로 상호작용을 하기 위해 중간에서 서로간에 입/출력을 제어하는 것이다.(ex. 버튼, 텍스트 입력창) UI를 만들기 위한 기능 모음집을 UI 라이브러리라고 하며, 리액트는 대표적인 자바스크립트 UI 라이브러리이다. - UI 라이브러리 예시 : React, 앵귤러JS, Vue.js 1.2 리액트의 장점 1. 빠른 업데이트와 렌더링 속도 리액트는 빠른 업데이트를 위해 Virtual DOM(가상의 DOM)을 이용한다. * DOM(Docum.. 2024. 3. 5. chap 0. 준비하기 1. HTML 이란 무엇인가? HTML(하이퍼 텍스트 마크업 언어) : 웹 페이지를 구조화하고 콘텐츠를 표시하는 데 사용되는 표준 마크업 언어. 태그를 사용하여 문서의 구조를 정의한다. 태그는 시작 태그와 종료 태그로 구성되며, 문서의 제목, 본문, 이미지, 링크 등을 구분하고 위치를 지정한다. CSS와 JavaScript를 이용하여 문서의 디자인과 동작을 구현할 수 있다. CSS는 문서의 스타일을 정의하고, JavaScript는 문서의 동작을 제어한다. 웹 브라우저에서 해석되어 화면에 출력된다. 대부분의 웹 브라우저는 HTML을 지원하며, HTML로 작성된 문서는 웹 브라우저에서 정상적으로 표시된다. 다양한 버전이 있으며, 현재는 HTML5가 최신 버전이다. 2. 웹사이트의 뼈대를 구성하는 태그들 : .. 2024. 3. 5. 이전 1 다음 반응형
