React 공부하기 1.

프론트엔드 개발자라면 꼭 필요한 React

모든 개발 언어 및 라이브러리의 기본은 "공식문서" React 공식 문서를 통해 공부하였습니다.

출처 : https://ko.reactjs.org/docs/introducing-jsx.html

 

# Hello World

const root =
ReactDom.createRoot(document.getElementById('root));
root.render(<h1>Hello, world!</h1>);

위 코드는 페이지에 "Hello, world!"라는 제목을 구현한다.

---

JSX 소개

const element = <h1>Hello, world!</h1>;

JSX : JavaScript를 확장한 문법, JavaScript의 모든 기능이 포함되어 있음
JSX는 React "엘리먼트(element)"를 생성한다.

 

JSX란? 

React에서는 본질적으로 렌더링 로직이 UI로직 (이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들인다.

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

const name = 'Rosie Oh';
const element = <h1>Hello, {name}</h1>;

이처럼 JSX의 중괄호 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있다.
ex) 2+2, user.firstName 또는 formatName(user) 등은 모두 유효한 JavaScript 표현식이다.

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

위 예시에서는 JavaScript 함수 호출 결과인 formatName(user)을 < h1 > 엘리먼트에 포함하였다.

 

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 속성 정의

Attribute에 따옴표를 이용해 문자열 리터럴을 정의할 수 있다.

const element = <a href="https://www.reactjs.org"> link </a>;

 

 

중괄호를 사용하여 Attribute에 JavaScript 표현식을 삽입할 수도 있다.

 

const element = <img src={user.avatarUrl}></img>;

Attribute에 JavaScript 표현식을 삽입할 때 중괄호 주변에 따옴표를 입력하면 안된다. 따옴표(문자열 값에 사용) 또는 중괄호(표현식에 사용) 중 하나만 사용하고, 동일한 Attribute에 두 가지를 동시에 사용하면 안된다.

 

 

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에 삽입된 모든 값을 렌더링 하기전에 escape하므로, 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않는다. 
따라서, 모든 항목은 렌더링 되기 전에 문자열로 변환된다.

이러한 특성으로 인해 XSS(cross-site-scripting) 공격을 방지할 수 있다.

 

JSX는 객체를 표현한다.

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

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

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

React.createElement()는 버그가 없는 코드를 작성하는 데 도움이 되도록 몇 가지 검사를 수행하며, 기본적으로 다음과 같은 객체를 생성한다.

이러한 객체를 “React 엘리먼트”라고 하며, 화면에서 보고 싶은 것을 나타내는 표현과 동일!
React는 이 객체를 읽어서, DOM을 구성하고 최신 상태로 유지하는 데 사용한다.