React

다음의 원칙을 기억하자.

1. 리액트 컴포넌트는 마크업을 반환하는 JS함수이다. (클래스를 이용할 수도 있다.)

2. 사용자가 만든 컴포넌트는 대문자로 시작한다.

3. JSX로 표현되는 HTML엘리먼트는 소문자로 시작한다.

4. JSX는 모두 닫힌 태그를 갖는다.

5. 모든 컴포넌트는 JSX태그를 하나만 반환한다.

6. JSX내부에 {} 를 사용하면 자바스크립트 코드를 사용할 수 있다. (escape back to JS)

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

7. 목록을 나열할때는 반드시 key를 부여한다.

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

8. 이벤트 핸들러 함수에는 그냥 이벤트 함수를 전달만 하면 된다.

   function MyButton() {
     function handleClick() {
       alert('You clicked me!');
     }
   
     return (
       <button onClick={handleClick}>
         Click me
       </button>
     );
   }
   

9. Hooks는 use로 시작한다.

10. Hooks는 컴포넌트의 상단에서만 호출할 수 있다.

11. Hooks를 이용해 전달된 정보들을 props라고 한다. props는 데이터, 함수, 객체 모두 될 수 있다.