FRONT 썸네일형 리스트형 React Essentials [React - The Complete Guide] 본 글은 udemy의React- The Complete Guide 2024 (incl. Next.js, Redux)를수강하며 작성한 글입니다. 리액트의 핵심적인 부분들에 대해 알아보자. Components, JSX, Props, State & More"React Apps are built by combining components."=> Reusable Building Blocks, Related Code Lives Together, Separation of Concerns HTML, CSS, JS => React Component (JSX) - (transpile) > Browser DOM *JSX : JavaScript Syntax Extension Rules of React Components1... 더보기 02. 리액트 핵심 요소 깊게 살펴보기 [모던 리액트 Deep Dive] JSX란?JSX(JavaScript XML)는 JavaScript 코드 안에서 HTML을 작성할 수 있게 해주는 문법이다. JSX를 사용하면 React 컴포넌트를 직관적이고 가독성 있게 작성할 수 있다. JSX 코드는 브라우저가 직접 이해할 수 없으므로, Babel 같은 트랜스파일러를 통해 JavaScript 코드로 변환된다. 이 변환된 코드는 React의 React.createElement() 함수를 사용해 DOM 요소를 생성하게 된다.JSX의 기본 구성 요소JSXElement:HTML 구문 외에도 사용자 정의 컴포넌트 태그를 나타낸다. 사용자 정의 태그는 대문자로 시작해야 한다.JSXAttributes:JSXElement에 부여할 수 있는 속성들로, HTML 속성처럼 동작한다. props를 통해 컴포.. 더보기 01. 자바스크립트 [모던 리액트 Deep Dive] 해당 게시글은 [모던 리액트 Deep Dive]를 공부하며 작성하는 것으로, 문제가 될 시 삭제하겠습니다. 1장은 리액트에서 자주 사용되는 JS문법들에 대해 다루고 있다. 동등 비교원시 타입(primitive type) boolean null undefined niimber string symbol bigint - 값을 직접 저장객체 타입(object/reference type) object - 값을 참조로 저장== : 타입이 다르다면 자동 변환 후 비교=== : 타입 변환 없이 비교 (엄격히 비교)Object.is( , ) : 객체와 원시 타입 모두 비교 5 == '5' (true) / 5==='5' (false) ,+0 === -0 (true) / Object.is(+0, -0) (false) 객.. 더보기 이전 1 2 3 다음
