유튜브관련 (84) 썸네일형 리스트형 [React강좌] 10강 useState를 통한 Input 데이터관리 - 오쌤의 니가스터디 보호되어 있는 글입니다. [React강좌] 9강 useState를 통한 컴포넌트 값 관리 - 오쌤의 니가스터디 보호되어 있는 글입니다. [React강좌] 8강 React Conditional Rendering - 오쌤의 니가스터디 보호되어 있는 글입니다. [React강좌] 7강 React Event - 오쌤의 니가스터디 보호되어 있는 글입니다. [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을 조작할 때마다 엔진이 웹페이지를 새로 그리기 때문에 업데이트가 너무 잦.. 이전 1 ··· 6 7 8 9 10 11 다음
