Main concepts of React

리액트 공식 홈페이지의 "주요 개념" 을 참고하여 작성하는 문서입니다

Hello World - React

1. JSX

JavaScript 를 확장한 문법. 반드시 사용해야 하는 것은 아니나, 시각적으로(코드의 가독성을 위해) 더욱 도움이 되기에 공식문서에서는 사용을 권장하는 편이며, 에러 코드도 더욱 구체적으로 띄워준다고 한다.

사용예시 1

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

element 라는 인자 안에 <h1>Hello, {name}</h1> 라는 값을 할당하여 React 에서 사용하는 모습이다.

또한, 중괄호( { } , curly bracket) 안에는 JS 의 표현식 또한 사용할 수 있다

사용예시 2

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')
);

{formatName(user)} 라는 부분으로, 중괄호 안에 JS의 함수를 사용하여 함수를 실행하는 모습이다. 물론, 이런 JS 문법은 아까 말했던 것처럼 { } 안에서만 사용할 수 있다.

이 JSX 는 컴파일이 끝난 뒤 JS의 Object로 인식되기에 if 조건문이나 for loop 등에도 사용할 수 있고, 변수에 할당하거나, 인자로 받아들이는 것 등등 모두가 가능하다.