[React] 리액트(React)의 정의 및 JSX

1. 리액트(React) 란?

  React는 사용자 인터페이스를 구축하기 위한 자바스크립트(JavaScript) 라이브러리이며, “컴포넌트”라고 불리는 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕는다. 사이트의 규모가 커지면 커질수록 필요한 수많은 페이지를 잘 만들어 관리한 다는 것은 쉬운 일이 아니다. 따라서 이러한 복잡한 사이트를 쉽고 빠르게 만들고 관리하기 위해 만들어진 것이 리액트라 할 수 있다.

 

2. JSX란?

  JSX는 자바스크립트의 확장 문법이다. JSX의 대표적인 코드는 아래와 같다. 

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

  const element 까지는 자바스크립트에서 흔히 사용하는 변수 선언이다. 하지만 그 옆을 보면 HTML 코드가 등장하는 것을 볼 수 있다. 즉 JSX는 자바스크립트와 XML/HTML을 합친 것이라 할 수 있으며, 위 코드는 <h1>태크로 둘러싸인 문자열을 element라는 변수에 저장하는 것을 의미한다.

 

3. JSX 사용법

  JSX는 XML/HTML 코드 사이에 중괄호를 사용하여서 함수도 사용할 수 있다. 아래는 예시 코드이다.

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

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

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

 

  또한 태그 속성에도 값을 설정하는 것이 가능하다.

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

  이처럼 따옴표를 이용하여 물자열 리터럴을 정의할 수 있으며 중괄호를 사용하여서 사용할 수도 있다.

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

  중괄호를 사용했을 때는 따옴표를 사용하지 않는다.