728x90 반응형 리액트13 자바스크립트의 JSX 확장 구문과 리액트 컴포넌트에서의 활용 방법 jsx란 자바스크립트에서 HTML과 같은 코드를 작성할 수 있게 해주는 확장 구문입니다. 예를 들어 다음과 같이 쓸 수 있습니다. const element = Hello, World!; JSX의 주요 이점 중 하나 중괄호를 사용하여 HTML과 같은 코드 내에서 JavaScript 표현식을 작성할 수 있다는 것입니다. 이렇게 하면 콘텐츠를 동적으로 생성하고 데이터 및 사용자 입력을 기반으로 애플리케이션의 구조를 조작하기가 쉬워집니다. 예를들어 const items = ['apple', 'banana', 'orange']; const list = ( {items.map((item) => ( {item} ))} ); JSX를 사용하여 이와 같은 데이터 배열을 기반으로 항목 목록을 생성할 수 있습니다. 리액트는.. 2023. 2. 28. 리액트 컴포넌트 생성 및 활용 가이드: 기본 세팅과 컴포넌트 재사용의 이점 일단 컴포넌트를 작성하기 전에 기본 세팅부터 하겠습니다. index.js 폴더에서 위의 코드는 index.html에 root라는 id를 가진 div 태그를 리액트 기본 루트 돔으로 쓰겠다는 의미의 코드입니다. 을 감싸고 있는 를 지워줍니다. 해당 코드는 검사를 위한 코드로 우리가 테스트 프로젝트를 작성할 때 딱히 필요하지 않고 console.log() 사용시 에러가 발생할 수 있습니다. 이번에는 App.js에 들어와서 import logo from './logo.svg'; 와 태그 안에 있는 코드를 지워줍니다. 또한 스타일에 관련된 index.css app.css 안에 코드들도 지워줍니다. 해당 코드는 기본 스타일로써 내장되있던것입니다. 위와 같이 비워준 화면입니다. 저는 태그도 프레그먼트 태그로 비워주.. 2023. 2. 27. 리액트 사용의 이점과 시작 가이드: 프로젝트 구조 이해 및 기본 컴포넌트 생성 방법 리액트를 사용해야 하는 이유 구성 요소 기반 아키텍처: React는 구성 요소 기반 라이브러리로 코드를 쉽게 재사용할 수 있고 애플리케이션의 다른 부분을 쉽게 유지 관리하고 업데이트할 수 있습니다. 선언적 프로그래밍: React를 사용하면 응용 프로그램의 상태와 일치하도록 DOM을 변경하는 방법에 대해 걱정할 필요가 없습니다. 원하는 UI 모양을 선언하기만 하면 React가 나머지를 처리합니다. 가상 DOM: React는 가상 DOM을 사용합니다. 업데이트가 필요한 항목만 업데이트하여 성능과 속도를 개선하는 데 도움이 됩니다. JSX: React의 JSX 구문을 사용하면 HTML과 같은 코드를 쉽게 작성할 수 있습니다. 더 쉽게 읽고 이해할 수 있습니다. 크고 활동적인 커뮤니티: React에는 크고 활동.. 2023. 2. 27. 이전 1 2 다음 728x90 반응형
