React - 완전 기초

 

리액트 Quick Start

Quick Start – React

 

React Component

- 반드시 대문자로 시작해야합니다.

- HTML은 반드시 소문자이어야 합니다.

 

 

JSX

아래와 같은 Markup Syntax를 JSX라 부른다.

별도 설치 없이 사용할 수 있습니다.

- JSX 태그는 HTML보다 엄격한 규칙을 따라야합니다.

- 닫는 태그 <br />가 반드시 필요하며,

- 여러 개의 JSX를 리턴할 수 없습니다.

  - 하나의 JSX태그로 감싸서 리턴해야합니다. ex) <div> ...</div>, <>...</>

 

엄청 긴 HTML을 JSX코드로 바꾸려면, 다음 페이지에서 변환해보세요~

https://transform.tools/html-to-jsx

 

Styles

react에서 css class를 지정하려면 className이라는 이름으로 지정합니다.

 

In React

<img className = "test"/>

일반 HTML

<img class = "test"/>

 

 

Displaying Data

• {} 를 활용해서 JSX 코드 상에 변수를 넣을 수 있습니다.

return (
	<h1>
    	{user.name}
    </h1>
);

return (
	<img
    	className="avatar"
        src = {user.imageUrl}
    />
);

Conditional rendering  - 조건부 렌더링

• 조건부 렌더링을 위한 Syntax가 따로 있지 않다.
• Javascript 코드를 활용해야합니다.

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

•  좀더 간략하게하면 아래와 같습니다.

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

• else절이 필요가 없으면 아래와 같습니다.
• 이런 방식은 다른 attribute을 지정하는데에도 사용할 수 있습니다.
• <div> {isLoggedIn && <AdminPanel />} </div>
• JSX 코드가 익숙지 않으면, 제일 처음 방식으로 먼저 익숙해지는게 좋다고 하네요..ㅎㅎ

 

리스트 렌더링

• 유일하게 특정할 수 있는 key값을 li tag에 지정해줘야합니다.
  • database Id같은 걸로 쓴다고 합니다.
  • key를 바탕으로 추후 아이템 insert, delete, reorder에 사용합니다.

const products = [
  { title: 'Cabbage', id: 1 },
  { title: 'Garlic', id: 2 },
  { title: 'Apple', id: 3 },
];

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

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

 

이벤트에 반응

• onClick 이벤트 등!

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

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