우주원숭이의 개발여행

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

Javascript를 확장한 문법.
JSX는 React element를 생성한다.

React는 마크업파일과 로직을 분리하는 대신 둘 다 포함하는 컴포넌트 라는 느슨하게 연결된 유닛으로 관심사를 분리한다.

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

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

JSX의 중괄호 안에는 유효한 모든 Javascript 표현식을 넣을 수 있다.
즉, {name} 처럼 변수만 넣을 수도 있고 {2 + 2}처럼 수식을 넣을수도 있고 {user.id} 처럼 객체의 프로퍼티값을 넣을 수도 있고 함수를 넣을수도 있다.

컴파일이 끝나면 JSX 표현식의 js 함수가 호출되고 js객체로 인식된다.
if, for 등의 함수안에서 사용하고 변수할당, 인자 등으로 활용가능.

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

컴파일 후 formatName이 호출

const element = <div tabIndex="0"></div>;
const element = <img src={user.avatarUrl}></img>;

속성에 따옴표를 이용해 문자열 리터럴을 정의하거나
중괄호를 사용하여 속성에 js표현식을 넣을수도 있다.
그러나 위 2가지를 동시에 사용하면 안된다. 따옴표안에 표현식을 넣는것처럼..
"{user.avatarUrl}" 이런식으로.. 이거 은근히 자주하게 되는 실수.

JSX는 HTML보다 Javascript에 가깝다.
따라서 HTML속성이름은 camelCase 로 적어야한다.
예를들어 class='btn' 은 className='btn'
tabindex는 tabIndex 로

태그는 항시 닫아주어야한다.
JSX 태그는 자식을 포함할 수 있다.

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

검색