리액트 공식 문서 정리 (1)-JSX

Jessie H·2022년 9월 6일
0

react

목록 보기
2/13
post-thumbnail

JSX란?

  • 자바스크립트를 확장한 문법으로 리액트와 함께 사용된다
  • 리액트 엘리먼트를 생성한다
const element = <h1>리액트 공부한드앗</h1>;


JSX 표현식으로 쓰기

  • 표현식으로 쓸 때는 선언한 변수를 활용할 때 중괄호로 감싸서 표현한다.
const mydinner = "hamburger";
const element = <h1>I had {mydinner} for my dinner</h1>;
//I had hamburger for my dinner

  • JSX는 컴파일이 끝나면 자바스크립트 함수에서 호출되고 자바스크립트 객체로 인식된다.
  • JSX를 if문 , for문, parameter, return 값으로 사용할 수 있다.
function myfood (user) {
  if (user) {
    return <h1>I'd like to have {mydinner} for my dinner</h1>;
  }
  
  return <h1>Let's skip dinner today</h1>;
}

  • attribute에 표현식 삽입 가능
    • 따옴표로 문자열처럼 삽입 or 중괄호 표현식 이용 가능
    • 둘 중에 하나만 쓸 수 있다
const naver = <a href="http://www.naver.com">Naver</a>;
const logo = <img src={naverLogo}></img>;

리액트 돔에서 attribute는 CamelCase 규칙을 적용한다.

ex) className



JSX는 XSS공격 방지가 가능하다

  • XSS(Cross-site scripting): 여러 사용자가 이용하는 곳에 의도적으로 악성 스크립트를 입력해서 사용자들의 정보를 탈취하는 해킹 방법
  • html 이스케이프: 특수문자를 html로 변환하는 것(예-  는 공백 의미)
  • JSX는 렌더링하기 전에 이스케이프 하고 명시적으로 등록하지 않은 것(변수 선언 등)은 문자열로 변환된다
  • 문자열로 변환되기 때문에 악성코드는 문자열로 변환되어 적용되지 않고, 그래서 XSS공격 방지가 가능하다.

JSX는 자식을 포함할 수 있다

1. 자식이 없는 경우
const element = <img src="www.xxx.com/image" />;

2. 자식을 포함할 경우
const element = (
  <div>
    <h1>오늘 저녁 메뉴</h1>
    <p>피자</p>
    <p>햄버거</p>
  </div>
);

리액트의 특징

  • 마크업과 로직을 분리하지 않고 "컴포넌트(component)"로 관심사를 분리한다.
    (컴포넌트 부분에 대해서는 컴포넌트 부분에서 자세하게 다룰 예정)
  • JSX 사용이 필수는 아니지만 JSX 사용 시 UI 관련 작업 시 더 용이하다

관심사를 분리한다의 의미

  • 직교성(orthogonality)
    (링크에서 직교성 관련 자세한 내용 알 수 있음)
  • 즉 연관성이 매우 적은 여러 개의 독립된 컴포넌트 및 함수로 구성하는 것


JSX 문법 예시로 보면 좋은 사이트

Airbnb JSX guide KR

profile
코딩 공부 기록장

0개의 댓글