React 의 대해서 (1)

💻 React에 대해서 다시 공부해봅시다.

컴포넌트란?

무언가를 나눈 파일 (폴더로 안해도 됨)
function 컴포넌트만 쓸겁니다. function을 쓰면 무조건 return값을 써야합니다.
그 안에는 JSX문법을 써야합니다. HTML 문법과는 다릅니다.

import React from 'react';

위에 코드를 첫번째에 꼭 적어주어야 합니다.
그리고 function '함수명'을 'export default 함수명' 이렇게 마지막에 꼭 써주어야 합니다.

이벤트 핸들링 (onClick & onKeyUp)

React의 이벤트는 소문자 대신 카멜케이스를 사용합니다.
JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다.

<button onClick={() => alert('hello')}>Submit</button>

화살표 함수로 이벤트를 전달해주었습니다. 그래서 Submit버튼을 누를 때마다 알림창으로 hello라고 뜨는 것을 확인할 수 있습니다.
만약 함수가 없고 바로 alert('hello')만 있다고 하면 랜더링을 할 때 alert이 바로 실행되면서 Submit 버튼을 눌러도 이벤트가 일어나지 않게 됩니다. 그러므로 중괄호 안에 항상 함수가 들어갈 수 있도록 해주는 것이 중요합니다.
그런데 사실 직접적으로 로직들이 바로 들어가지는 않고, 함수를 따로 빼서 그 함수를 부르는 방식으로 진행을 많이 합니다.

import React from 'react';

function App() {

  const onSubmit = () => {
  alert('submitted');
  };
  
  return (
  <div className="App">
    <button onClick={onSubmit}
    >Submit</button>
  </div>
  );
}

export default App;

저렇게 onSubmit 이라는 함수를 만들고 그 함수를 onClick에 불러오는 겁니다.