프론트엔드 개발/React - 이론 썸네일형 리스트형 JSX에 대한 간단한 실습 1. 개요 지금까지 JSX에 대한 이론을 간단하게 정리하였다. 이제 JSX 문법을 이용한 간단한 실습을 하고자 한다. create-react-app 을 이용하여, react에 대한 기본적인 스켈레톤 코드를 받고 그 src 폴더 밑에 Chapter_03이라는 폴더를 하나 만든다. 그리고 위와 같이 Book.jsx 와 Library.jsx 파일을 하나씩 만들겠다. 2. Book.jsx import React from "react"; function Book (props) { return ( {`이 책의 이름은 ${props.name} 입니다.`} {`이 책은 총 ${props.numOfPage}페이지로 이뤄져 있습니다.`} ); } export default Book; 코드에 대한 설명을 하겠다. Book이.. 더보기 JSX의 장점 및 사용법 1. JSX의 장점 ⓐ 간결해진 코드 > 높은 가독성 > 오류 잡기 쉬움 저번 포스팅에서 말했듯이, JSX를 쓰면 하나의 JSX 코드 내에서 JS와 HTML 코드를 혼용해서 사용할 수 있었다. 이는, JS 로직과 그것을 연결하려고 하는 HTML 요소를 특정하는 로직을 한번 더 작성할 필요가 없기 때문에 코드가 짧아지고, 간결해진다. 이는 엄청난 장점이다. ⓑ Injection attack 해킹 방어에 용이 이건 그렇게 와닿는 내용이 아니라서 깊게 듣지는 않았다. JSX를 쓰면 해당 주입성 공격을 방어하기 더 용이하다고 한다. 2. JSX 사용법 ⓐ HTML 요소를 하나의 JS 변수로 사용한다. const element1 = Hello World!! 요렇게 하나의 요소를 변수로 특정이 가능하다. 당연히 해.. 더보기 JSX의 정의와 원리에 대하여 1. JSX의 정의 원래 프론트 코드는 화면을 띄우는 HTML, 그 HTML을 꾸미는 CSS, 프리젠테이션 로직을 담당하는 JS 총 3가지로 나뉜다. 이렇게 영역을 구분하여 작성하는 것은 때때로, 피로감을 유발한다. 왜냐하면, JS로 만든 모듈(특정 기능을 하는 코드)을 연결할 특정 HTML 요소(elements)와 연결하는 작업을 항상 해줘야하기 때문이다. 해당 작업을 위해 따로 코드를 작성해야 하기에 가독성이 더욱 안 좋아진다. JSX는 JavaScript & XML/HTML의 약자로, 위에서 보여진 프론트 엔드 전반의 약점을 보완하기 위해 만들어진 개념이다. JSX에서는 Javascript 코드 안에서 HTML 코드를 작성하는 것이 가능하다. 따라서 밑과 같은 코드 작성이 가능해진다. const e.. 더보기 이전 1 2 다음
