react 빠른 시작

component 생성 및 중첩

React는 component 로 만들어진다. component는 고유한 논리와 모양이 있는 UI의 일부이다. React component는 마크업을 반환하는 javascript 함수이다.

function MyButton() {
  return(
    <button>a</button>
    );
}

React component는 대문자로 시작해야 한다. 이를 통해 react component임을 구분한다.

스타일 추가

React에서의 className은 HTML class 속성과 동일한 방식으로 작동한다.

데이터 표시

function MyButton() {
  return(
    <button>{a.name}</button>
    );
}

조건부 렌더링

let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return (
  <div>
    {content}
  </div>
);

<div>
  {isLoggedIn ? (
    <AdminPanel />
  ) : (
    <LoginForm />
  )}
</div>

<div>
  {isLoggedIn && <AdminPanel />}
</div>

렌더링 목록

for 루프 및 map 함수와 같은 javascript 기능을 사용하여 구성 요소 목록을 렌더링 한다.

const listItems = products.map(product =>
  <li key={product.id}>
    {product.title}
  </li>
);

return (
  <ul>{listItems}</ul>
);

이벤트에 응답

함수를 호출하지 않고 전달만 하면 된다. react는 사용자가 버튼을 클릭 할 때 이벤트 핸들러를 호출한다.

function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}