[React] JSX 2

Enini·2022년 5월 24일
0

React JS

목록 보기
5/10

1. 컴포넌트를 다른 컴포넌트에 넣기

const container = React.createElement("div", nulln [Title, Button]);
ReactDOM.render(container, root);

이 전 글과 똑같이 위의 코드를 아래처럼 바꿔줄 수 있다.(대소문자 잘 지켜주자)

const Container = <div>Title Button</div>;
ReactDOM.render(Container, root);

이렇게 코드를 작성하면 Title Button이 버튼이 아니라 텍스트로 나오는데 요소들을 하나도 포함시키고 있지 않아서이다.

이 전 글에서 작성한 title과 button의 코드를 가져와보자.

<script type=""text/babel">
  const Title = () => (
      <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
      Hello I'm a title
      </h3>
  );
  const Button = () => (
	<button 
      style = {{
        backgroundColor: "tomato",
        }} 
        onClick={() => console.log("im clicked")}
    >
        Click me
    </button>
</script>

const Titleconst Button 뒤에 () =>라는 arrow function을 넣어준다.
const Title = () =>function Title과 같다.

아래 코드로 정확하게 이해해보자.

  function Title() {
      return (
        <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
        Hello I'm a title
        </h3>
      );
  }
  const Button = () => (
	<button 
      style = {{
        backgroundColor: "tomato",
        }} 
        onClick={() => console.log("im clicked")}
    >
        Click me
    </button>

위 두 개의 코드는 구현 방식은 다르지만 똑같다.

그럼 아까 맨 위에 있던

const Container = <div>Title Button</div>;
ReactDOM.render(Container, root);

이 코드는 어떻게 바꿔줄 수 있을까? 우리는 div에 이미지를 넣고 싶을 때

const Container = <div><img />Title Button</div>;

이렇게 해주었다. 그럼 Title이나 Button을 랜더링 하고 싶으면 대문자로 적어주면 된다.

const Container = (
	<div>
    	<Title /> 
        </Button />
    </div>;
);

이렇게 <Title />을 입력해주는건

<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
        Hello I'm a title
        </h3>

위 코드를 복사해서 넣어주는 것과 같다. 하지만 코드를 더 깔끔하고 정돈되게 해주는 것이다.
기억해야 될건 컴포넌트의 첫 글자는 대문자가 되어야 하고, 만약 소문자면 React랑 JSX는 이게 HTML button이라고 생각할 것이다.

무조건 대문자!!!!!!!

profile
안녕하세요! 만나서 반갑습니다!

0개의 댓글