[포스코x코딩온] 웹개발자 입문 과정 8주차

프론트앤드/React

[포스코x코딩온] 웹개발자 입문 과정 8주차 | JSX문법

영최 2023. 4. 21. 14:31

1.JSX란?

JSX는 JavascriptXML의 줄임말로, "자바스크립트에 XML을 추가한 확장형 문법" 이다.

한마디로, JSX = JavaScript + XML

*XML: 데이터를 저장하고 전달할 목적으로 만들어진 언어로,

HTML과 매우 비슷한 문자기반의 마크업언어 (text-basedmarkuplanguage)이다.

EJS와 같은 템플릿 언어와 차이점:

EJS는 *트랜스파일링과정을 거치면 HTML파일로 변환되지만
JSX는 자바스크립트 파일로 변환된다.

*트랜스파일링과정: 특정언어를 다른언어로 변환하는 작업

다음 코드 에서 return 안의 부분이 JSX이다.

import React from 'react'; //node_modules 디렉터리에 react모듈 불러옴

//function ~ 함수형 컴포넌트 사용
function App() {
  return ( {/* JSX */}
   {/* 하나로 감싸야함*/}
    <div>
        <h1>Hello react</h1>
        <h2>Bye react</h2>
    </div>
  );
}
export default App;

JSX는 하나의 파일에 javascript와 html을 동시에 작성할 수 있어 편리하다.

import React from 'react' : node_modules 디렉터리에서 import구문으로 리액트 모듈을 불러오는 코드이다.
function App() ~: function 키워드를 이용해서 함수형 컴포넌트 만든다.
return (JSX): 함수에서 반환하는 내용이 HTML 작성한 것과 유사한데 이것을 바로 앞서 말한JSX라고 한다.

다음으로 src폴더에 있는 index.js파일을 열어보면 아래와 같다..
index.js안의 아래와 같은 코드들로 리액트가 화면을 출력하게된다.

root.render부분을 보면 <App />부분에서 App컴포넌트를 불러온다.

App 컴포넌트는 아까 실행된 리액트화면에 대한 코드를 담고있다.

2.JSX 문법

가.부모 요소로 감싸기

컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다.

리액트 컴포넌트에서 요소 여러개를 하나의 요소로 꼭 감싸주어야 하는 이유는

VirtualDOM에서 컴포넌트 변화를 감지해내기 위해서이다.

import React from 'react';
 
function App() {
  return ( 
  {/* div 없으면 에러남  */} 
    <div> 
        <h1>리액트 안녕!</h1>
        <h2>잘 작동하니?</h2>
    </div>
    );
}
 
export default App;

VirtualDOM에서 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록

컴포넌트내부는 하나의 DOM 트리구조로 이루어져야 한다는 규칙이 있기 때문이다.

여기서 div요소를 사용하고 싶지 않다면, Fragment라는 기능을 사용하면 된다.

import React, { Fragment } from 'react';
 
function App() {
 return (
  <Fragment>
   <h1>리액트 안녕!</h1>
   <h2>잘 작동하니?</h2>
  </Fragment>
 );
}
 
export default App;

그러나 Fragment를 사용하려면 추가적으로 import가 필요하다.

(import React, { Fragment } from 'react';)

여기서 Fragment를 더 짧게 사용하는 방법은 빈 태그 <> </>이다.

import React, from 'react';
 
function App() {
 return (
  <>
   <h1>리액트 안녕!</h1>
   <h2>잘 작동하니?</h2>
  </>
 );
}
 
export default App;

나.JSX 안 {자바스크립트 표현식}

JSX 안에서 자바스크립트 표현식을 사용하기 위해서는 코드를 {}로 감싸면 된다.

import React from 'react';
 
function App() {
 const name = "리액트";
 return (
  <>
   <h1>{name} 안녕!</h1>
   <h2>잘 작동하니?</h2>
  </>
 );
}
 
export default App;

다.JSX 안 IF(X) -> 삼항연산자(O), 단축평가(O)

JSX 내부의 자바스크립트 표현식에서 If문을 사용할 수 없다.

그래서 조건에 따라 다른 내용을 렌더링해야 할 때는

1) JSX밖에서 If문을 사용하여 사전에 값을 설정하거나,

2) {} 안에서 삼항연산자(= 조건부 연산자)를 사용하거나

3) 단축평가(&&, ||)를 사용한다.

먼저 삼항연산자 사용 방법은 다음과 같다.

import React from 'react';
 
function App() {
 const name = "리액트";
 return (
  <div>
   {name === "리액트" ? (
    <h1>리액트입니다.</h1>
   ) : (
    <h2>리액트가 아닙니다.</h2>
   )}
  </div>
 );
}
 
export default App;

다음으로 단축평가 &&를 사용하는 방법은 다음과 같다.

&&연산자는 두 조건 모두 만족해야 출력된다.

만약 false를 렌더링 시에는 null과 마찬가지로 아무것도 나타나지 않는다.

여기서 주의할 점은 만약 false가 아닌 0이 사용될 경우 null이 아닌 0이 화면에 출력된다.

import React from 'react';
 
function App() {
 const name = "뤼액트";
 return <div>{name === "리액트" && <h1>리액트입니다.</h1>}</div>;
}
 
export default App;

아래 코드는 예외적으로 화면에 0이 출력된다.

const number = 0;
return number && <div>내용</div>

추가적으로 ||을 사용하는 코드의 예제는 아래와 같다.(JSX아닌 그냥 JS파일)

// 단축평가 ||(논리합) &&(논리곱)
const a = 20;
const b = 10;

//2개 다 true일 경우에만 출력됨
//논리 곱은 조건식일 때 사용
a > b && console.log("A가 큽니다");

//논리합 - 조건에 상관없이 실행됨
//기본 값 설정 시 사용
function test(name) {
  const obj = {
    a: name || "기본 이름",
  };
  console.log(obj);
}

test(); //{ a: '기본 이름' }
test("홍길동"); //{ a: '홍길동' }

라.undefined 반환 불가

리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 안된다.

예를 들어 다음과 같은 코드는 오류를 발생시킨다.

import React from 'react';
import './App.CSS';
 
function App() {
 const name = undefined;
 return name;
}
 
export default App;

어떤 값이 undefined일 수도 있다면, OR(||)연산자를 사용하여 해당 값이 undefined일 때

사용할 값을 지정할 수 있으므로 간단하게 오류를 방지할 수 있다.

import React from 'react';
import './App.CSS';
 
function App() {
 const name = undefined;
 return name || '값이 undefined입니다.';
}
 
export default App;

그러나, 아래와 같이 JSX내부에서 undefined를 렌더링하는 것은 괜찮다.

import React from 'react';
import './App.CSS';
 
function App() {
 const name = undefined;
 return <div>{name}</div>;
}
 
export default App;

그렇지만 바람직한 코드는 아니므로, 아래처럼 || 연산자로 undefined일 때의 값을 지정해두자.

import React from 'react';
import './App.CSS';
 
function App() {
 const name = undefined;
 return <div>{name || '리액트'}</div>;
}
 
export default App;

마.JSX 스타일 적용시 1) 객체{}형태로 넣어야함, 2) 카멜표기법 사용

리액트에서 DOM요소에 스타일 적용 시 객체형태로 넣어야 한다.

또한 스타일 이름은 대시(-)로 잇지 않고, 카멜 표기법을 사용해서 작성해야한다.

예를 들면 background-color -> backgroundColor로 작성해야 한다.

스타일 적용 예시는 아래와 같다.

	
import React from 'react';
 
function App() {
 const name = "리액트";
 const style = {
  backgroundColor: "black",
  color: "aqua",
  fontSize: "48px",
  fontWeight: "bold",
  padding: 16
 };
 
 return <div style={style}>{name}</div>;
}
 
export default App;

아래의 방식은 style객체를 미리 선언하지 않고 바로 style값을 지정하는 방식이다.

import React from 'react';
 
function App() {
 const name = "리액트";
 return (
  <div 
   style={{
    backgroundColor: "black",
    color: "aqua",
    fontSize: "48px",
    fontWeight: "bold",
    padding: 16
   }}
  >
   {name}
  </div>
 );
}
 
export default App;

바.JSX 클래스 지정 className

기존 HTML 방식에서 class 지정할 때 class가 아닌 className으로 지정해야한다.

class -> className

import React from 'react';
import './App.css';
 
function App() {
 const name = "리액트";
 return <div className="react">{name}</div>
}
 
export default App;

사.JSX 클래스 지정 className

input태그와 같은 self-closing태그 작성시 반드시 '/'로 닫아주어야

오류가 발생하지 않는다.

예를 들면 <input/>으로 작성해야한다.

import React from 'react';
import './App.css';
 
function App() {
 const name = "리액트";
 return (
  <>
   <div className="react">{name}</div>
   <input />
  </>
 );
}
 
export default App;

아.JSX 주석 다는 방법: {//} , 안에 // 가능**

JSX 내부에서 주석을 작성할 때는 {/*....*/}와 같은 형식으로 작성한다.

안에 여러줄로작성도 가능하다.

여러줄로 작성할 때는 그 내부에서 //...과 같은 형태의 주석도 작성가능하다.

	
import React from 'react';
import './App.css';
 
function App() {
 const name = "리액트";
 return (
  <>
   {/* 주석은 이렇게 시작합니다!! */}
   <div
    className="react" // 시작 태그를 여러 줄로 작성하게 된다면 여기에 주석을 작성할 수도 있습니다.
   >
    {name}
   </div>
   // 하지만 이런 주석이나
   /* 이런 주석은 페이지에 그대로 나타나게 됩니다. */
   <input />
  </>
 );
}
 
export default App;

저작자표시 비영리 변경금지

'프론트앤드 > React' 카테고리의 다른 글

[포스코x코딩온] 웹개발자 입문 과정 8주차 \| 이벤트 핸들링 (0)	2023.04.25
[포스코x코딩온] 웹개발자 입문 과정 8주차 \| state 와 useState (0)	2023.04.23
[포스코x코딩온] 웹개발자 입문 과정 8주차 \| Props (0)	2023.04.23
[포스코x코딩온] 웹개발자 입문 과정 8주차 \| 컴포넌트(함수형\|클래스형) (0)	2023.04.23
[포스코x코딩온] 웹개발자 입문 과정 8주차 \| React.js 정의 및 설치(MAC) (0)	2023.04.20

현재글[포스코x코딩온] 웹개발자 입문 과정 8주차 | JSX문법

흥미 = 적성 = 지속성 https://github.com/jayoung977

Today :
Yesterday :

일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

영최의 개발켈로그