유튜브관련/리액트입문(멤버십용) (30) 썸네일형 리스트형 [React강좌] 6강 React Props - 오쌤의 니가스터디 보호되어 있는 글입니다. [React강좌] 5강 JSX문법 - 7가지 규칙 - 오쌤의 니가스터디 1. JSX란? ## 정의 - JavaScript XML의 약자입니다. - 리액트에서 UI를 표현할 때 쓰는 문법입니다. - 자바스크립트의 확장문법, XML과 매우 비슷하게 생겼습니다. - JSX를 반드시 사용해야 하는 것은 아니지만 JSX를 사용하면 React 애플리케이션을 더 쉽게 작성할 수 있습니다. ## 변환 - 브라우저에서 실행되기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다. ## 장점 - HTML코드 작성과 비슷하기 때문에 보기 쉽고 익숙합니다. - 컴포넌트들도 HTML 태그를 쓰듯이 그냥 작성하여 활용도가 높습니다. 2. JSX문법 - JSX문법을 자손 컴포넌트에 저장 후 [index.js]로 불러오겠습니다. ## index.js 코드 import React from '.. [React강좌] 4강 컴포넌트 만들어보기 - 오쌤의 니가스터디 1. 컴포넌트 제작을 위한 이해 - 지난 강좌 때 이야기 했던 가상돔(Virtual Dom)을 이용한 페이지 구현 설명 그림입니다. - 이것을 이용해서 컴포넌트들을 만들어보도록 하겠습니다. - 지난 강좌를 확인해 보세요. https://ossam5.tistory.com/402 2. 컴포넌트란? 1) 컴포넌트의 정의 ## 정의 - 재사용 가능한 UI - 단순한 템플릿 이상의 구현체 ## 기능 - 부모에게서 값을 받아와서 보여주거나 사용 => props - 컴포넌트 자신이 사용할 값을 정의하고 필요할 때 업데이트 => state - UI에서 보여줘야 하는 값이 바뀌면 DOM에 변화를 줌 ## 자손 컴포넌트를 부모가 사용할 때 # 불러오기 import 컴포넌트명 from '파일경로'; # JSX로 자손데이터 .. [React강좌] 3강 Virtual DOM을 이용한 리액트 - 오쌤의 니가스터디 1. DOM 1) DOM의 정의 - 문서객체 모델(Document Object Model)의 약자입니다. - 객체로 문서구조는 표현하는 방법으로 XML이나 HTML로 작성합니다. ## 간단한 HTML코드 로고 리스트 리스트 리스트 메인네비게이션 ## DOM트리 ## DOM의 단점 - 동적 UI에 최적화되어 있지 않다는 단점이 있습니다. - HTML자체적으로는 정적이어서 이것을 Javascript로 동적으로 만듭니다. - 리액트를 제작한 페이스북의 페이지는 스크롤바를 내릴수록 수많은 데이터가 로딩되는데 데이터를 표현하는 요소가 너무 많아 직접적으로 접근하여 변화를 주다 보면 성능 이슈가 발생해서 조금씩 느려지기 시작합니다. - DOM을 조작할 때마다 엔진이 웹페이지를 새로 그리기 때문에 업데이트가 너무 잦.. [React강좌] 2강 VS Code를 이용한 프로젝트 생성 - 오쌤의 니가스터디 1. 새 터미널 생성하기 - 원하는 폴더를 선택한 후 [터미널]의 [새 터미널]을 눌러줍니다. - [Git]을 지난 강좌에서 설치했으므로 굳이 [cmd]를 열지 않아도 [BASH] 시뮬레이터로 사용 가능합니다. - 혹시 Git이 설치되어 있지 않은 분은 하단 주소를 클릭해서 Git을 설치해 주세요. git-scm.com/download/win Git - Downloading Package Download for Windows Click here to download the latest (2.39.1) 32-bit version of Git for Windows. This is the most recent maintained build. It was released 12 days ago, on 2023-0.. [React강좌] 1강 리액트작업을 위한 환경설정하기 - 오쌤의 니가스터디 1. 리액트(React)란? 1) 프런트엔드 라이브러리 / 프레임워크 ** 단순한 정적페이지 자바스크립트 없이 HTML과 CSS만을 사용한 정적페이지를 제작하는 것이라면 프런트엔드 라이브러리를 사용할 필요는 없습니다. ** 현재 트렌드 단순한 웹페이지가 아닌 웹어플리케이션, 유저의 행동에 따라 동적인 화면을 보여줘야 하고, 동적으로 유저인터페이스를 관리하기 위해서는 수많은 상태를 관리해야 해야 한다. 그래서 기존 자바스크립트나 제이쿼리로는 부족한 상황입니다. ** 프런트엔드 라이브러리의 등장 수많은 DOM, 상태값, 업데이트값에 대한 관리를 최소한으로 줄이고, 오직 기능개발과 사용자 유저 인터페이스(UI)를 구현하는데 집중할 수 있도록 새로운 형태의 JS들이 등장했습니다. 2) 프론트엔드 라이브러리 3 .. 이전 1 2 3 4 다음
