[React 공식사이트] 주요개념 1,2

1. Hello World

---

ReactDOM.render(
	<h1>Hello, World!!</h1>,
   document.getElementById('root')
);

---

2. JSX 소개

---

JSX란?

• React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘다 포함하는 "컴포넌트"라고 부르는 유닛으로 관심사를 분리한다.

• React는 JSX 사용이 필수가 아니지만, JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각한다.

  JSX에 표현식 포함하기

  const name ='Josh Perez';
  const element = <h1>hello, {name}</h1>;
  
  ReactDOM.render(
  	element,
     document.getElementById('root');
  );
  

• JSX의 중괄호 안에는 모든 JavaScript 표현식을 넣을 수 있다.

  function formatName(user){
  	return user.firstName + ' ' + user.lastName;
  }
  
  const user = {
  	firstName: 'Harper',
     lastName: 'Perez'
  };
  
  const element = (
  	<h1>
     	Hello, {formatName(user)}
     </h1>
  );
  
  ReactDOM.render(
  	element,
     document.getElementById('root')
  );

  JSX도 표현식입니다.

• 컴파일이 끝나면 JSX 표현식이 정규 JavaScript 함수 호출이 되고 JavaScript 객체로 인식된다.

• JSX를 if 구문 및 for loop 안에 사용하고, 변수에 할당하고, 인자로서 받아 들이고, 함수로부터 반환할 수 있다.

  function getGreeting(user){
  	if(user){
     	return <h1>Hello, {formatName(user)}!</h1>;
     }
     return <h1>Hello, Stranger.</h1>;
  }

  JSX 속성 강의

• 어트리뷰트에 따옴표를 이용해 문자열 리터럴을 정의할 수 있다.
  const element = <div tabIndex="0"></div>

• 중괄호를 사용하여 어트리뷰트에 JavaScript 표현식을 삽입할 수도 있다.
  const element = <img src={user.avatarUrl}></img>

• 따옴표(문자열 값에 사용) 또는 중괄호(표현식에 사용) 중 하나만 사용해야한다.

• JSX는 HTML보다는 JavaScript에 가깝기 때문에 ReactDOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명규칙을 사용한다. 예) JSX에서 class는 className, tabindex는 tabIndex가 된다.

JSX로 자식 정의

• 태그가 비어있다면 XML처럼 />를 이용해 닫아주어야 한다.
  const element = <img src={user.avatarUrl } />;
• JSX 태그는 자식을 포함할 수 있다.

const element = (
	<div>
    	<h1>Hello!</h1>
        <h2>Good to see you here.</h2>
    </div>
);

JSX는 주입 공격을 방지합니다.

• JSX에 사용자 입력을 삽입하는 것은 안전하다.

const title = response.potentiallyMaliciousInput;
// 이것은 안전하다.
const element = <h1>{title}</h1>;

• 기본적으로 ReactDOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프 하므로 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않습니다.
• 모든 항목은 렌더링 되기 전에 문자열로 변환되는 특성으로 인해 XSS공격을 방지할 수 있다.

※XSS공격 : 악의적인 사용자가 공격하려는 사이트에 스크립트를 넣는 기법을 말한다. 공격에 성곡하면 사이트에 접속한 사용자는 삽입된 코드를 실행하게 되며, 보통 의도치 않은 행동을 수행시키거나 쿠키나 세션 토큰 등의 민감한 정보를 탈취한다.

JSX는 객체를 표현합니다.

• Babel은 JSX를 React.createElement() 호출로 컴파일한다.

const element = (
	<h1 className="greeting">
    	Hello, world!
    </h1>
);

const element = React.createElement(
	'h1',
    {className: 'greeting'},
    'Hello, world'
);

두 예시는 동일하다.
React.createElement()는 버그가 없는 코드를 작성하는데 도움이 되도록 몇가지 검사를 수행하며 기본적으로 객체를 생성한다.

//생성되는 객체, 주의: 다음 구조는 단순화되었음.
const element ={
	type: h1,
    props:{
    	className: 'greeting',
        children: 'Helle, world!'
    }
};

이런 객체를 "React 앨리먼트" 라고 한다. React는 이 객체를 읽어서, DOM을 구성하고 최신 상태로 유지하는데 사용한다.