Chapter02. 리엑트 JSX

<< 학습 목표 >>

1. JSX를 사용할 수 있다.

---

리엑트는 JS 라이브러리이므로 JS코드와 리엑트 코드가 혼합되어있음

노란 밑줄이 그어진 코드는 JS 코드이고

주황 밑줄이 그어진 코드는 리엑트 코드임

 

let element = <h1>Hello React!</h1>;

위 코드는 element 변수를 선언한 후 element 변수에 h1 태그를 저장한 것으로 리엑트의 JSX가 적용된 코드임

JS만 사용했다면 위 코드는 문법에 어긋난 코드임

 

JSX는 A syntax extension to JavaScript 를 뜻하는 말로 우리말로 번역하면 자바스크립트 확장 문법임

자바스크립트의 문법에 리엑트 문법을 더 할 수 있음

---

JSX코드는 실제 웹 사이트가 동작할 때 JS 코드로 변환됨

JSX를 JS 코드로 변환 시켜주는 건 리엑트의 createElement 함수가 함

 

createElement 함수는 중요하지 않으므로 "이런게 있구나" 정도로만 기억하면 됨

---

JSX를 사용하면 많은 장점이 생기지만 가장 큰 장점은 Injection Attack을 방어할 수 있다는 점이라고 생각함

Injection Attack 이란 사용자가 입력한 값을 JS에서 사용한다는 점을 이용해 사이트를 해킹하는 기법임

왼쪽의 이미지와 같이 네이버에 로그인할 때 일반적인 사용자는 아이디, 비밀번호를 입력함

그러나 해커는 아이디, 비밀번호를 JS에서 사용해 로그인 처리를 한다는 점을 파악하고 JS에서 실행 가능한 코드를 넣어 서비스를 해킹하려고 시도할 수 있음

해커의 이런 방식을 Injection Attack 이라고 하며 JSX를 사용해서 사용자가 입력한 아이디, 비밀번호를 가져온다면 해커가 입력한 실행 가능한 코드가 실행되지 않도록 막아줌

---

지금까지는 JSX에 대한 서론, 설명이었고 여기서부터가 본론인 JSX를 사용하는 방법임

그러나 굉장히 간단함

 

우리는 이미 지난 Chapter에서 JSX를 사용했었음

 

App 함수를 선언(1)했는데 이는 JS 문법임

JS는 아래처럼 HTML을 직접 반환할 순 없고 문자열로 반환해야함

App 함수가 HTML을 직접 반환할 수 있는 이유는 JSX를 사용(2)했기 때문

 

변수를 JSX로 사용해보자

변수를 선언(1)하고 JSX를 사용해 변수를 사용(2) 할 수 있음

 

리엑트 프로젝트를 실행시켜보자

우리가 text 변수에 저장했던 문자열이 출력된 화면을 볼 수 있음

리엑트 프로젝트를 실행시키는 방법이 기억 나지 않으면 https://codingaja.tistory.com/70 글을 보자

 

변수 선언(1)은 JS 코드로만 이루어져있고 변수에 저장한 값을 h1 태그에 넣기 위해 JSX를 사용(2)한 것임

이렇게 JSX의 {변수명} 을 사용하면 변수가 가지고 있는 값을 사용함

 

JSX에서 객체를 활용할 수있고 함수를 호출할 수도 있음

 

JSX는 App 내에서 뿐만 아니라 JS 코드 어디든 사용할 수 있음

왜? JSX의 X가 (extention) 이므로...

 

여기까지가 JSX의 끝~!

간단하지만 JS를 잘모른다면 JS와 JSX의 차이, JSX를 어떻게 활용해야하는지 알 수 없음

JS가 부족하다 생각된다면 JS 공부도 함께 병행해야함