React (4) 썸네일형 리스트형 React(4) - 대화형 틱택토 게임 구현 1) React 1-1) 대화형 틱택토 게임 구현 1-1-1) 개요 1-1-2) 게임 완성하기 1-1-3) 시간 여행 추가하기 1-1-4) 완성 코드 1) React 1-1) 대화형 틱택토 게임 구현 참조 사이트 : https://ko.reactjs.org/tutorial/tutorial.html 자습서: React 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 1-1-1) 개요 React 정의 : 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리 "React"는 "Component"라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 도움! 여기서 .. React(3) - Counter 구현, React 주요 개념 복습 및 comment(댓글) 구현 복습 1) React 1-1) Counter 1-2) React 주요 개념 복습 및 comment(댓글) 구현 복습 1) React 1-1) Counter React를 이용하여 만들 때 꼭 만드는 것 중 하나가 "Counter"이다! Counter : "+" 버튼을 누르면 1씩 증가하고, "-" 버튼을 누르면 1씩 감소하게 하는 것 counter.html counter2.html 1-2) React 주요 개념 복습 및 comment(댓글) 구현 복습 주요 개념 JSX : JSX 문법은 "{}(중괄호)"를 사용해야 한다는 점을 기억할 것!! Component : Component는 "Element의 모음"을 의미하며, 단 하나의 상태만을 가질 수 있고, 상태에 따라 Element가 바뀜! Props : Prop.. React(2) - Login 버튼, comment(댓글) CR 구현 1) React 1-1) Login 버튼 1-2) comment(댓글) CR(Create, Read) 1) React 1-1) Login 버튼 이번 chapter에서 살펴볼 내용 ReactDOM JSX state Component, Props 생명주기 조건부 rendering JSX // App Component가 있다고 가정함! React.createElement(App, null, "hi~~~") // div Element에 내용을 "hi~~~"로 넣기 React.createElement("div", null, "hi~~~") // babel의 도움을 받아서 JSX // React.createElement(App, null, "hi~~~") --> JSX // React.createElement('E.. React - React 기본 및 DOM, Babel, class, component 1) React 1-1) DOM & React 1-2) Babel 1-3) class & component 1) React 1-1) DOM & React 화면을 꾸밀 때 "Javascript"를 활용해서 HTML을 조작함! --> DOM parser 작업이 진행됨! 브라우저 rendering 과정 1. response body에 있는 HTML 내용(string type의 텍스트를 의미함)을 파싱(parsing)함! 2. 파싱 후 tree 구조를 만듦 3. 표현 준비 4. Render(화면이 그려짐) React와 무슨 관계가 있는가? - DOM 조작을 쉽게 하기 위해서 React는 언제 누가 만들었는가? - Facebook(현 meta)이 만듦 Facebook은 사용자 경험을 위해 SPA(Single Pa.. 이전 1 다음
