[ReactJS] JSX 문법

JSX에서 element를 만들 때에는

함수 형식으로 만들어 이를 return 즉 반환하는 형태로 나타낸다.

function Title() {
      return (
        <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
          Hello I'm a title
        </h3>
      );
    };
    // arrow function
    const Button = () => (
      <button
        style={{ backgroundColor: "tomato" }}
        onClick={() => console.log("I am clicked!")}
      >
        Click me
      </button>
    );
    const Container = () => (
      // the first letter of component should be upper case
      // lower case -> HTML tages
      // upper case -> React component
      <div>
        <Title /> 
        <Button />
      </div>
    );

위와 같이 일반 함수와 화살표 함수 둘 다 모두 사용할 수 있다.

화살표 함수의 경우 별도의 return문은 필요없다.

 

그리고 가장 중요한 것은,

함수명을 선언할 때 반드시 대문자로 시작해야 한다는 것이다.

그렇지 않으면 브라우저는 이를 HTML 태크로 인식한다.