리액트15 소플의 처음 만난 리액트_실습3 소플의 처음 만난 리액트_실습3 컴포넌트 기반 구조 작은 컴포넌트들이 모여서 하나의 컴포넌트를 구성하고, 이러한 컴포넌트들이 모여서 전체 페이지를 구성한다. props 리액트 컴포넌트의 속성 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체 props의 특징 읽기 전용 리액트 컴포넌트의 props는 바꿀 수 없고, 같은 props가 들어오면 항상 같은 엘리먼트를 리턴해야 함 props의 사용법 JSX를 사용할 경우 컴포넌트에 키-값 쌍 형태로 넣어주면 됨 문자열 이외에 정수, 변수, 그리고 다른 컴포넌트 등이 들어갈 경우에는 중괄호를 사용해서 감싸주어야 함 JSX를 사용하지 않는 경우에는 createElement()함수의 두 번째 파라미터로 자바스크립트 객체를 넣어 주면 됨 컴포넌트의 종류 클.. 2023. 7. 11. 소플의 처음 만난 리액트_실습2 소플의 처음 만난 리액트_실습2 엘리먼트 리액트 앱의 가장 작은 빌딩 블록들 화면에 나타나는 내용을 기술하는 자바스크립트 객체 리액트 엘리먼트는 DOM 엘리먼트의 가상 표현 엘리먼트의 생김새 자바스크립트 객체 형태로 존재 컴포넌트 유형과 속성 및 내부의 모든 자식에 대한 정보를 포함하고 있는 일반적인 자바스크립트 객체 엘리먼트의 특징 불변성을 갖고 있음 엘리먼트 생성 후에는 자식이나 속성을 바꿀 수 없음 렌더링 ReactDOM의 render()라는 함수를 사용 VirtualDOM에서 실제 DOM으로 이동하는 과정 렌더링 된 엘리먼트를 업데이트 하려면 새로운 엘리먼트를 생성해서 업데이트 해야 한다!!! 시계 만들기 실습!! //Clock.jsx import React from "react"; functio.. 2023. 7. 11. 소플의 처음 만난 리액트_실습1 소플의 처음 만난 리액트_실습1 국비교육 수료 후 희미해져가는 기억을 되살리기 위해 다시 한 번 기초를 탄탄히 다지는 시간을 가지기로 했다. 아는 내용이여도 말로 설명할 수 있을 때까지 공부하기!!! 리액트란? 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 (=React.js) SPA(Single Page Application)를 쉽고 빠르게 만들 수 있도록 해주는 도구 리액트의 장점 빠른 업데이트와 렌더링 속도 재사용성이 높은 컴포넌트 기반 구조 메타의 든든한 지원 활발한 지식 공유와 커뮤니티 리액트 네이티브를 통한 모바일 앱 개발 가능 리액트의 단점 방대한 학습량 높은 상태 관리 복잡도 JSX란? 자바스크립트와 XML/HTML을 함께 사용할 수 있는 자바스크립트의 확장 문법이다. JSX의 역.. 2023. 7. 11. 이전 1 2 3 4 다음 반응형
