간결한 코드 출처 : 처음 만난 리액트-인프런 강좌
# 동일한 역할 수행 ㄴ JSX를 사용한 코드의 경우 HTML의 div 태그를 사용해서 name이란 변수가 들어간 인삿말 표현 ㄴ JSX를 사용하지 않은 코드의 경우 React의 createElement 함수를 사용 type, props, children 파라미터 사용
가독성 향상 # 가독성이 높을수록 코드상에 존재하는 버그를 쉽게 발견할 수 있다.
Injection Attacks 방어 # 인젝션 어택이라 불리는 해킹 방법을 방어함으로써 보완성이 올라간다. # 인젝션 어택은 쉽게 설명해서 입력창에 문자나 숫자 같은 일반적인 값이 아닌 소스 코드를 입력하여 해당 코드가 실행되도록 만드는 해킹 방법이다. 출처 : 처음 만난 리액트-인프런 강좌
# 위 코드에는 title이라는 변수에 잠재적으로 보안 위험 가능성이 있는 코드가 삽입되었다 JSX 코드에서는 괄호를 사용해서 타이틀 변수를 삽입, 인베딩하고 있다. React DOM은 랜더링하기 전 임베딩된 값을 모두 문자열로 변환하기 때문에 명시적으로 선언되지 않은 값은 괄호 사이에 들어갈 수 없어 JSX를 사용하면 잠재적인 보안 위협을 줄일 수 있다는 장점이 있다.
※ 임베딩이란? 사람이 쓰는 자연어를 기계가 이해할 수 있는 숫자의 나열인 벡터로 바꾼 결과 혹은 그 과장 전체를 의미
■ JSX 사용법
JSX는 자바스크립트 문법을 확장 시킨 것이기 때문에 모든 자바스크립트 문법을 지원하며
추가로 XML과 HTML을 섞어서 사용하면 된다.
엘리먼트를 선언하는 부분의 코드처럼 HTML과 자바스크립트가 섞인 형태로 코드를 작성하면 된다.
xml, html 코드를 사용하다가 중간에 JavaScript 코드를 사용하고 싶으면?
중괄호를 사용해서 묶어주면 된다.
# 위 코드에서 중괄호, name, 중괄호로 표시된 부분이 name이라는 javaScript 변수를 참조하기 위해 중괄호 사용
# JSX를 사용할 때 xml, html 코드 사이의 중괄호를 사용해서 자바스크립트 변수 및 함수를 사용하면 된다.
# JSX를 사용해서 사용자 이름에 따라 다른 인삿말을 표시하도록 만든 컴포넌트다.
사용자가 존재하면 FormatName이라는 함수를 써서 포매팅된 이름을 출력하고
그렇지않으면 스트레인저에게 하는 인사말을 출력하게 된다.
HTML 태그 중간이 아닌 태그의 속성에 값을 넣고 싶을 때는?
# 큰 따옴표 사이에 문자열을 넣거나 중괄호 사이에 자바스크립트 코드를 넣으면 된다.
※ JSX에서는 중괄호를 사용하면 무조건 자바스크립트가 들어간다!
# 평소 HTML을 사용하듯이 상위 태그가 하위 태그를 둘러싸도록 하면 칠드런이 정의된다.
