# JSX

428개의 포스트
post-thumbnail

[React] JSX 문법

JSX란 ✨JSX(JavaScript XML)는 자바스크립트에 XML을 추가한 자바스크립트의 확장 문법이다. JSX는 하나의 파일에서 html문법과 javascript 문법을 동시에 사용할 수 있어서 편리하며 가독성이 높다. ✅ 브라우저로 실행 되기 전, 번들링되

약 7시간 전
·
0개의 댓글
·
post-thumbnail

6주 4회 - 리액트 2022-09-29

더미데이터는 배열에 객체가 들어있는 형식이다. { } , { } , { } , { } 그리고 이 객체에는map을 사용할 경우 map에 있는 tweet은 배열의 객체를 차례차례 받는다. 그럴경우 배열의 첫번째 객체, 두번째 객체, 세번째 객체.. 이런식으로 객체를 받

약 14시간 전
·
0개의 댓글
·
post-thumbnail

[React] 기본_DOM,JSX,WEBPACK

리액트는 Controller, Mode, View 3가지를 기본적인 구조로 작동한다 Controller는 model을 view로 보여주는 역할view의 사용자가 요청하는 사항들을 model이 보여줄 수 있도록 전달하는 역할을 한다.리액트에서 html문법과 비슷하게 사용

약 17시간 전
·
0개의 댓글
·
post-thumbnail

React 란?

React에 대해 알아보고, JSX와 Component 사용하기 💡 React? 동적 사용자 인터페이스를 만들기 위해 2011년 페이스북에서 만든 오픈 소스 JavaScript 라이브러리이다. 데이터 변경이 잦은 복잡하고, 규모가 큰 라이브러리에 적합하다는 장점이

어제
·
0개의 댓글
·

6주 3회 리액트 2022-09-28

리액트 개념 리액트 - 한 페이지를 보여주기위해 HTML/CSS/JS로 나눈것이 아닌 하나의 파일에 JSX를 활용한 선언형 프로그래밍을 지향한다, 컴포넌트 기반으로 개발한다. 그림은 컴포넌트 기반 개발이다. 컴포넌트 - 하나의 기능 구현을 위한 여러 종류의 코드 묶

어제
·
0개의 댓글
·

JSX (JavaScript XML)

HTML + JavaScript ➡️ 새로운 문법!: JavaScript를 확장시킨 문법으로, 주로 React 컴포넌트를 작성할 때 사용하는 문법Babel을 이용해 JSX를 브라우저가 읽을 수 있는 JavaScript로 컴파일해줘야 한다.: 어떤 프로그래밍 언어의 코드

어제
·
0개의 댓글
·

Unit4 회고

프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리선언형코드를 자세히 분석하지 않고도 코드의 의도를 분명히 알 수 있게 작성하는 방식하나의 파일에 명시적으로 작성할 수 있도록 JSX를 활용한 선언형 프로그래밍을 지향컴포넌트 기반독립성: 컴포넌트 간 의존성이

1일 전
·
0개의 댓글
·
post-thumbnail

리액트 맛보기( Codecademy )

: 앱 만들기에 유용이것은 javascript파일과 html문서에서 모두 동작하지 않는다이것은 일단 javascript파일에 속한다<h1>Hello world</h1>은 JSX 라고 불린다JSX : javascript에 대한 "syntax extension(

4일 전
·
0개의 댓글
·
post-thumbnail

[React]리액트 맛보기: 리액트 라이브러리, Babel, JSX

안녕하세요! 9월 말에 접어들면서, 급격히 날씨가 선선해졌습니다.. 9월은 비염의 계절이자 새 학기의 계절이지요? 새 학기가 되면 새로운 시도를 하고 싶어지기 마련입니다.. 영광스럽게도 이번에 제가 저희 동아리의 웹 개발 프로젝트 팀에 들게 되었다는 점 그

2022년 9월 21일
·
0개의 댓글
·
post-thumbnail

[React] JSX

HTML code inside of JavascriptJSX stands for Javascript XMLJS에 XML을 추가한 확장문법JSX는 React 컴포넌트를 만들 때 사용하는 문법어플리케이션을 컴포넌트로 나누어 관리하게 한다브라우저에서 실행하기 전에 Babel

2022년 9월 21일
·
0개의 댓글
·
post-thumbnail

[노마드클론] React-바닐라기초

(참고 : CRA 이용 안하는 것 부터 시작함.리액트ver : 17.0.2 )기존의 렌더링 방식브라우저는 서버가 보내준 HTML 파일 을 해석(Parsing)하여 DOM 트리 를 만든다. 브라우저는 서버가 보내준 CSS 파일 을 해석(Parsing)하여 CSSOM 트

2022년 9월 13일
·
0개의 댓글
·
post-thumbnail

React에선 JSX, 데이터 바인딩을 하고 싶을 땐?

저번시간에는 리액트에 대한 간단한 셋팅과 리액트를 쓰면 좋은 점들에 대해서 알아보았고,이번 시간에는 리액트에서 데이터바인딩을 하는 법과 navbar를 만드는 법,변수를 선언할 때 state로 데이터를 저장하는 방법에 대해서 알아보겠습니다.계속해서, 자바스크립트와 제이쿼

2022년 9월 6일
·
0개의 댓글
·
post-thumbnail

리액트 공식 문서 정리 (1)-JSX

리액트 공식문서 정리 : JSX

2022년 9월 6일
·
0개의 댓글
·

JSX

JavaScript XML 의 줄임말로 문자열도 아니고 HTML도 아니다React 에서 Ul를 구성할 때 사용하기 위해 JavaScript를 확장한 문법으로 React 엘리먼트 만들기가 가능하다Babel을 이용하여 JSX를 브라우저가 이해할 수 있는 JavaScript

2022년 9월 5일
·
0개의 댓글
·
post-thumbnail

[React] 정의와 특징 그리고 JSX에 대하여

React의 특징인 선언적과 컴포넌트의 개념에 대해 알아보고 더 나아가 자바스크립트 확장 문법인 JSX에 대해서도 알아본다.

2022년 9월 4일
·
0개의 댓글
·

React 공부를 해보자😎💻 (3주차-2)

앞선 React 공부를 해보자 (3주차)에서 이어지는 내용입니다 🤗💪React를 공부한 내용을 하나씩 정리하겠습니다💪<App.js>App.js 파일입니다말 그대로 React가 실제로 작동하는 부분(ex/ App.js)은 하나의 태그로 감싸져 있어야 올바르게

2022년 8월 29일
·
0개의 댓글
·
post-thumbnail

Next.js style 적용

최근 리엑트를 사용하다가 Next.js를 알게되어서 공부를 시작하였는데, 리엑트보다 장점도 많기 때문에 리엑트를 사용하시는 분이라면 꼭 Next.js를 공부해 보세요!!다양한 방법이 있는데 첫 번째는 module을 적용하는 것 입니다.css 파일을 만들 때 'css파일

2022년 8월 28일
·
0개의 댓글
·

JSX Key 속성

리액트에서 요소의 리스트를 나열할 때는 Key를 넣어줘야한다.Key는 리액트가 변경, 추가 또는 제거된 항목을 식별하는 데 도움이 된다.요소에 안정적인 ID를 부여하려면 배열 내부의 요소에 키를 제공해야 한다.리액트는 가상 돔을 이용해서 바뀐 부분만 실제 돔에 적용한다

2022년 8월 28일
·
0개의 댓글
·

TIL | React 01 / React란? / 작업 환경 설정 / JSX & 바벨 / 웹팩

규모가 커지고 복잡한 애플리케이션을 개발하며 생산성을 향상시키고 많은 양의 데이터 관리와 코드 유지 보수를 더욱 편리하게 하기 위해 다양한 Frontend Framework(Library)가 등장하게 된다. 그 중 가장 많이 쓰이는 세 가지가 Angular, Vue,

2022년 8월 25일
·
0개의 댓글
·
post-thumbnail

[React]여러개의 input 상태 관리하기

input 여러 개 일때 useState를 여러개 사용하는건 좋은 방법이 아님. 좋은 방법은, input에 name이라는 값을 설정하고, 이벤트가 발생했을 때 이값을 참조하는거다. 여러개의 문자열 형태를 가지고 있는 객체 형태를 관리 해 줘야한다. 이 값들을 참조해

2022년 8월 24일
·
0개의 댓글
·