Component vs JSX

상황

컴포넌트에 onClick으로 바로 onClick메소드를 실행하려했는데 실행이 되질 않는다.
너무 답답했다.

-> 컴포넌트가 뭔지 정확히 알지 못해서 생긴 문제

컴포넌트는 함수 컴포넌트이면 그냥 함수 이고
클래스 컴포넌트이면 그냥 클래스 이다.

함수 컴포넌트에서 props로 전달하는 것은 함수에 인자를 전달하는 것과 같다.

// App.js
import React from "react";
import "./styles.css";
import Child from "./Child";

export default function App() {
  return (
    <Child
      onClick={() => {
        console.log("click!");
      }}
    />
  );
}

//Child.js

import React from "react";

const Child = () => <button>click</button>;

export default Child;

콘솔에 click!이 찍히길 기대한 나는 정말 바보이다.

Child컴포넌트에 onClick이라는 props를 전달한것뿐이다
= Child 함수에 onClick이라는 인자를 전달했을 뿐이다.
(props로 전달된, 인자로 전달된 onClick함수를 호출하지 않으니 당연히 발생이 안된다..)

onClick이라는 이벤트 메소드는 직접 해당 DOM이 발생시킨다.
즉, JSX(===React.createElement())가 리턴하는 React 엘리먼트에 직접 전달해야한다.

그러므로 custom 컴포넌트에 onClick을하던 onChange를 하던 이러한 이벤트 메소드는 이벤트 메소드로써 존재하는게 아닌 단순이 onClick이라는 이름으로 인자로(props로) 전달되는 것이다.

즉,

//Child.js

import React from "react";

const Child = ({onClick}) => <button onClick={onClick}>click</button>;

export default Child;

이렇게 Child 컴포넌트(=함수) 에서 props로 받은 onClick(=인자) 를 직접 jsx의 속성인 onClick에 넣어줘야 콘솔에 찍히는걸 볼수가 있다.

결론

• 함수 컴포넌트는 함수일 뿐이다.
• 자식 컴포넌트에 props를 전달하는 것은 자식 함수에 parmas(인자)를 넣는것과 같다.
• JSX는 React 엘리먼트를 리턴하므로 onClick같은 이벤트 메소드는 jsx에 속성으로 넣어주어야한다.(엘리먼트는 React가 DOM으로 구성한다.!)

React를 익힌다는 것은 아애 JS와 아애 별개의 하나의 기술을 배우는게 아니다.
기초를 단단히하고 공식문서를 공부해야겠다는걸 또 느끼게된 시간이었음.