React

React.js는 JavaScript 라이브러리 입니다. 라이브러리 개념을 아직 모르시는 분들은 잘 설명된 포스팅을 참고하세요.

왜 React를 배워야 하는지, 얼마나 많이 쓰는지, 왜 좋은지는 offline 수업 때 말씀드리기로 하고, 오늘은 React를 입문하기 위해 알아야할 기초 내용을 설명드리겠습니다.

React에서 사용되는 JSX 표현을 배워보겠습니다.

JSX

const hi = <p>Hi</p>;

위의 코드는 javascript인가요, html인가요? 네.. 둘 다 아닙니다. 확인해보고 싶으면 개발자도구 콘솔에 작성해보세요.

위의 문법은 JSX라고 불리는 JavaScript 확장버전입니다. syntax extension for JavaScript라고 합니다. HTML과 아주 비슷하게 생겼고 javascript 파일 내에서 작성할 수 있습니다.

JSX는 원래의 JavaScript 문법이 아니기 때문에, .js 파일내에 JSX 문법이 있으면 브라우저에서 해석하지 못합니다. 문법 오류가 납니다.

React.js를 사용하기 위해 JSX 문법이 포함되어 있으면, 해당 파일을 정규 javascript 문법으로 변환시키는 컴파일 과정이 필요합니다. 컴파일 방법과 환경은 offline 수업에서 다루도록 하겠습니다. 일단은 JSX 문법을 인식할 수 있는 에디터에서 연습을 해보도록 하겠습니다.

repl.it의 강의자료 에디터에 jsx 문법을 작성하면 오류로 인식하여 블로그에 강의를 작성하게 되었습니다. 코드는 codepen 에서 연습할 수 있습니다.

직접 각자의 editor에 작성하고 싶으면 가이드를 따라 파일을 생성하고 연습해보세요!

JSX element

HTML문법을 JavaScript 코드 내부에 써주면 그것이 바로 JSX입니다! .js 파일 어디에서나 필요한 곳에 작성해주세요. 변수에 저장할 수도 있고, 함수의 인자로 넘길 수도 있습니다.

const hi = <p>Hi</p>;

const myFavorite = {
    food: <li>샐러드</li>,
    animal: <li>dog</li>,
    hobby: <li>programming</li>
};

JSX attribute

태그에 attribute(속성)을 주고 싶을 때는 항상 "" 쌍따옴표로 감싸주세요. attribute를 추가하고 싶을 때는 실제 HTML에서 쓰는 attribute name(속성명)과 다를 수 있으니 react 공식문서를 참고해주세요.

예를 들어, class를 주고 싶을 때 원래 속성명은 class이지만 JSX에서는 className을 사용해야 합니다.

const hi = <input readOnly={true} />;

const myFavorite = {
    food: <li>샐러드</li>,
    animal: <li>dog</li>,
    hobby: <li className="list-item">programming</li>
};

Self-Closing Tag

그리고 JSX에서는 어떤 태그라도 self closing tag가 항상 가능합니다. <input>과 같이 하나의 태그가 요소인 경우에는 <input />와 같이 항상 /으로 끝내줘야 합니다.

<div />와 <div></div>는 같은 표현입니다.

Nested JSX

1. (필수) 소괄호로 감싸기

   const good = (
   <div>
       <p>hi</p>
   </div>
   );

   중첩된 요소를 만들려면 () 소괄호로 감싸주세요!

2. (필수) 항상 하나의 태그로 시작

   const wrong = (
   <p>list1</p>
   <p>list2</p>
   );

   위와 같이 제일 처음 요소가 sibling이면 안됩니다. 무조건 하나의 태그로 감싸져야 합니다. 아래의 코드처럼 첫 요소는 하나의 태그로 감싸주세요.

   const right = (
   <div>
       <p>list1</p>
       <p>list2</p>
   </div>
   );

Rendering

html 요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링(rendering) 이라고 말합니다.

React 요소가 DOM node에 추가되어 화면에 렌더되려면 ReactDOM.render 함수를 사용합니다. 첫 번째 인자에는 JSX로 React 요소를 인자로 넘기고, 두 번째 인자는 해당 요소를 렌더하고 싶은 container(부모요소)를 전달합니다.

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

예제 코드에서 확인해주세요. 이미 React.js의 ReactDOM.render함수를 사용할 수 있도록 추가해놓았으니 자유롭게 테스트하시면 됩니다!

reference

• codecademy