React Component 생성 단축키

❓React에서 컴포넌트란?

function App() {
  return (
    <>
      <h1>안녕 리액트</h1>
    </>
  );
}

어떤 함수가 html 태그들을 return 해주고 있으면 그런 함수를 리액트에서는 컴포넌트라고 부른다.

종류로는 함수 컴포넌트와 클래스 컴포넌트가 있지만 클래스 컴포넌트는 함수 컴포넌트보다 상대적으로 작성할 양이 많기 잘 사용하지 않게 되었다.

컴포넌트의 규칙

컴포넌트의 시작은 항상 대문자로 시작해야한다.

html 태그인지 컴포넌트 태그인지 구분하기 위해

외부에서 컴포넌트를 불러오기 위해서

export default로 내보내준 후 import문으로 컴포넌트를 불러와주어야한다.

결론

오늘은 VSC 코드에서 단축키로 함수 컴포넌트 틀을 작성하는 법을 기록할려고한다.
(매번 까먹어서 원하는게 나올 때까지 여러번 쳐서 확인하는 번거로움을 덜기 위해서...)

함수 컴포넌트

기본 함수

💡 rfc 작성

💡 rfce 작성

화살표 함수

💡 rafc 작성

💡 rafce