[리액트] Rendering Elements

Element란 리액트 앱을 구성하는 가장 작은 블록들 기존엔 엘리먼트를 DOM의 Element를 의미하는 단어로 사용했다. 하지만 리액트에서의 Element는 리액트 Element를 뜻한다. DOM elements와 React Elements의 차이 리액트 개발 초창기엔 현재 React Element를 Descriptor라고 불렀다. (화면에 나타나는 내용을 기술한다는 의미에서 Descriptor) Descriptor는 최종적으로 DOM Element 형태로 나타나기 때문에 통일성을 위해 React Element로 변경되었다. DOM element는 실제 DOM에 존재하고 React Element는 React의 Virtual DOM에 존재한다. React Element는 DOM Element의 가상 표..

• format_list_bulleted Current Study/처음 만난 리액트
• · 2023. 10. 15.
• textsms

[리액트] JSX란

JSX 정의와 역할 JSX란 A syntax extension to JavaScript (자바스크립트 문법의 확장) JavaScript + XML/HTML , JavaScript and XML의 앞글자를 따서 JSX라 한다. 자바스크립트 코드와 HTML 코드를 같이 쓰는 형태 const element = Hello, world! 쉽게 말해 HTML 태그를 JavaScript 문법과 같이 사용할 수 있다. JSX 역할 JSX는 내부적으로 XML, HTML 코드를 자바스크립트 코드로 변환하는 과정을 거쳐서 최종적으론 자바스크립트 코드가 나온다. 이때 리액트의 createElement가 변환하는 역할을 맡는다. // JSX 사용한 코드 class Hello extends React.Component { ren..

• format_list_bulleted Current Study/처음 만난 리액트
• · 2023. 10. 13.
• textsms

[리액트] 리액트란

인프런 처음 만난 리액트 [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., 깔끔한 강의자료, 꼼꼼한 설명으로쉽게 배우는 리액트 강의입니다. 👨‍🏫 리액트의 세계로초대합니다 💫 www.inflearn.com 개인 프로젝트를 A-Z로 진행하기 위한 준비과정으로 리액트 공부를 시작했다. 백엔드 개발자지만 항상 어느 정도 프론트에 대한 지식과 코드를 작성할 수 있어야 한다는 생각을 갖고 있었는데 이번 기회에 리액트란 어떤 것인지 명확하게 인지하고 기본적은 사용법을 익혀보자. 들어가기 전 SPA(Single Page Application) 전통적으로 화면에는 각 html 페이지가 존재했다. 다른 컨텐츠를 보기 위해선 다..

• format_list_bulleted Current Study/처음 만난 리액트
• · 2023. 10. 13.
• textsms