React JSX 문법 정리

JSX 문법

1. React에서 컴포넌트는 함수로 만들 수 있다.
2. 함수네임의 맨첫글자는 대문자로 해줘야함
3.  component는 return()안에 작성하는데 이때 JSX문법을 사용해야한다.
4. JSX문법
   • React에서 컴포넌트를 반환할때에는 하나의 태그만 반환해야한다. 다수의 태그를 반환하고싶다면 <>, <div>, <Fragment>등 부모태그에 다수의 태그를 상속시키는식으로 작성해야한다.
   • class를 사용하고싶다면, class대신에 className을 사용해야한다.
   • 컴포넌트범위내에 자바스크립트문법을 작성하고싶다면 중괄호{}안에 작성할 것
     (아래코드에서는 name, style값, list.map등이 이에 해당함)

function App() {
  const name = "inguk";
  const list = ["우유", "딸기", "바나나". '요거트'];
  return (
    <Fragment>
      <h1 className="orange">{`Hello! ${name}아!`}</h1>
      <h2>Hello!</h2>
      <p>{name}</p>
      <ul>
        {list.map((item) => (
          <li>{item}</li>
        ))}
      </ul>
      <img
        style={{ width: "200px", height: "200px" }}
        // 얘 style에 객체넣은거임. width라는 key에 200px라는 value가 있는거임.
        src="https://images.unsplash.com/photo-1669926504091-2735b6cb51a7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxOHx8fGVufDB8fHx8&auto=format&fit=crop&w=900&q=60"
        alt="디저트"
      ></img>
    </Fragment>
  );
}

 

HTML코드를 JSX로 변환해주는 유용한 사이트

 

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

HTML to JSX