Component?

Javascript와 다른 React의 특징은, 기존의 자바스크립트폴더에 들어가는 내용물이 html+javascript의 형태로 작성한다는 점이다. SPA의 특성을 가진 React는 index.html파일 하나로 여러가지 페이지들을 작업해서 연결할 수 있다는 장점이 있다. 그리고 그 각각의 페이지에서는 컴포넌트단위로 이루어져 있다. 컴포넌트란, function처럼 기능을 하게 하며, 재사용이 가능한 UI단위를 의미한다. 이와 같이 컴포넌트를 사용하면, 코드의 유지보수가 쉽게 가능해진다.

function Welcome() {
  return <h1>Hello, World</h1>
}

위와 같이 Welcome이라는 컴포넌트를 정의하여, 그에 대한 리턴값을 h1태그에 감싸진 "Hello, World"라는 값을 반환하는 컴포넌트를 생성할 수 있다.

Component의 생성

컴포넌트의 class 와 function을 이용해서 생성이 가능하다. 초기에는 function이 제한적인 기능을 하며, class를 사용하여 컴포넌트를 생성하는게 지향되었지만, React가 업데이트가 되면서 function도 universal한 기능을 하게 되어, 개발자들이 function을 자주 사용하게되었다. 위에서 function으로 컴포넌트 생성을 해봤기에 여기선 class로 생성하는 법만 다루겠다.

class Welcome extends React.Component {
  render(
  <h1>Hello, World</h1>
  )
}

위와 같이 class를 이용하여 컴포넌트를 만들 수 있으며, 앞서 function으로 만든 컴포넌트와 같은 기능을 한다.

JSX?

앞서서 컴포넌트를 생성할때 리턴값이나 렌더 함수 안에 html코드를 넣어서 javascript의 표현이 가능해졌다. 이를 가능하게 만든 문법이 바로 JSX이다.
JSX = 자바스크립트 확장 문법
JSX에서 작성된 코드는 바벨을 사용하여 일반 자바스크립트 문법으로 변환됩니다.

JSX의 특징

• 기존의 html에서 사용하던 class 대신 className으로 클래스를 요소에 부여할 수 있다.
• Inline Styling으로 코드를 작성한다.
• 모든 태그에 대해서 Self-Closing이 가능하다.