React와 JSX

by

게시일: 2022년 12월 21일

HTML, CSS, Javascript로 구축된 Wistagram을 React로 변환하는 작업을 하고 있습니다. 기본을 구성 요소로 나누면 구성 요소당 코드가 짧아져 보기가 더 쉬워집니다. Vue.js와 Angular를 사용해보지 않았지만 React가 왜 그렇게 인기가 있는지 이해할 수 있습니다. 학습이 끝나면 React로 사이트를 구축하면서 SCSS를 잘 활용하고 싶습니다. 내가 좋아하는 React에 대해 알아보자!!

반응하다

React는 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리입니다. JavaScript 라이브러리이기 때문에 JavaScript의 구문을 그대로 사용합니다. 그래서 React를 잘 알고 싶다면 자바스크립트도 공부해야 합니다.

'추천 관련글,

반응의 속성

1. 선언적 프로그래밍

선언적 프로그래밍은 “어떻게”가 아니라 “무엇”에 초점을 맞추는 방법입니다. 예를 들어 선언적 프로그래밍에서 화면을 렌더링할 때 화면을 렌더링하는 행위는 중요하지 않지만 어떤 화면을 렌더링할지가 중요합니다. 달성하려는 목표(예: 기본 페이지에 Nav, Feeds 및 MainRight 화면 표시)에 집중하면 React가 렌더링에 필요한 프로세스 종류를 처리하므로 걱정할 필요가 없습니다. 그것에 대해.

2. Virtual DOM을 통한 재렌더링

화면이 변경되면 다시 렌더링하는 것은 어떻습니까? 웹사이트가 복잡할수록 성능은 낮아집니다. 그래서 React는 효율적인 방법을 사용하여 이전에 그려진 화면과 비교하여 화면이 변경된 부분만 다시 렌더링합니다.

이를 위해 필요한 것은 가상 DOM입니다. React는 화면에 변경 사항이 있을 때마다 가상 DOM에 적용하고 변경 사항을 즉시 실제 DOM에 전파하므로 렌더링은 한 번만 수행됩니다.

2. 컴포넌트를 이용한 화면 구성

구성 요소는 재사용할 수 있는 사용자 인터페이스의 단위입니다.


이렇게 검색 영역, 내비게이션 영역, 로그인 영역, 기사 영역 등을 하나의 컴포넌트로 만들어 추후 페이지 생성 시 필요한 컴포넌트를 삽입하여 사용할 수 있습니다. 구성 요소를 사용하면 페이지를 만드는 데 걸리는 시간을 줄일 수 있습니다. 열심히 부품만들다보면 언젠가는 꼭 필요한 부품들을 조립해서 아주 빠르게 사이트를 구축할 수 있는 날이 오지 않을까 싶네요!! 더블 엑스

JSX

React는 JSX(JavaScript XML) 구문을 사용합니다.
상수 요소 =

안녕 송아지

코드를 보면,
JavaScript에서 변수를 선언할 때 const를 사용하고, h1은 HTML 태그임을 알 수 있습니다.

어떤 하이브리드인지 궁금하실 수도 있겠지만 JSX는 자바스크립트와 HTML을 모두 사용할 수 있는 자바스크립트 확장 구문입니다.

JSX를 사용할 때 주의할 점

1. 클래스 대신 클래스 이름 사용

React에서 태그에 클래스를 할당하려면 class 대신 className을 사용해야 합니다. 수업시간에 그 이유가 언급되지 않아서 궁금해서 찾아보니 자바스크립트에서 클래스가 예약어이기 때문이라고 합니다.

예약어는 이미 프로그래밍 언어에서 문법적 목적으로 사용되기 때문에 식별자로 사용할 수 없는 단어입니다. 클래스는 HTML과 달리 객체 지향 프로그래밍에서 객체를 생성하기 위한 템플릿으로 사용되기 때문에 JavaScript에서는 클래스를 사용할 수 없습니다.

2. 카멜 케이스 규칙 사용

JSX는 JavaScript처럼 Camel Case를 사용합니다. 따라서 변수 이름, 속성, 이벤트 등을 className 및 onClick 형식으로 입력할 수 있습니다.

3. 상위 태그로 JSX 요소 래핑

  1. <다양한> 또는 <파편> 또는 <> <h1> 캥거루처럼 JSX는 실내에 있어야 합니다. h1> 다양한> 또는 파편> 또는

태그를 사용할 수 있지만 React에서는 더 많이 사용할 수 있습니다. 또는 조각의 단축 구문인 빈 태그를 사용하십시오.

태그를 사용하는 경우 HTML의 DOM 구조는 div – h1로 구성되지만 fragment를 사용하는 경우 h1만 어셈블됩니다.

4. 태그 닫기

  • 다음과 같이 닫는 태그가 필요하지 않은 것 예: img , 현재 존재 이렇게 닫아야 합니다.

React로 전환할 때 새로운 통찰력!!



로그인 화면에서는 id 입력에 onChange 이벤트가 발생하면 idValue가 변경되도록 useState를 사용합니다. 그러나 idValue가 너무 늦게 업데이트되었습니다. onChange 이벤트는 변경시마다 인식되는데 문제를 생각한 후 onKeyUp 이벤트로 변경을 시도했지만 결과는 같았습니다. 그래서 멘토에게 물었습니다.

결과적으로 idValue는 setUserID 함수 실행이 완료된 후 event.target.value 값으로 업데이트되므로 idValue 변경은 한 시계 후입니다.

  1. 숫자 1을 눌렀습니다.
  2. 이벤트.대상 값 = 1.
  3. setIdValue로 idValue가 1로 바뀔 줄 알았는데 idValue는 여전히 0입니다. 그래서 console.log(idValue) = 0입니다.
  4. idValue는 함수가 종료된 후에만 1로 업데이트됩니다.

함수 외부에 console.log(idValue)를 놓았더니 생각한대로 값이 출력되더군요!! 함수가 종료된 후에 값이 업데이트된다는 것을 잊지 마세요!!