[ React ] 단축키 플러그인 , Component 설명

→ ES7+ React/Redux/React-Native snippets

[ 함수형 컴포넌트 생성 단축키 ]

1. rfce (React Funtion Component)

---

→ 표준 함수 선언을 사용하여 컴포넌트를 정의한다.

→ 함수 내부에서 this 를 사용할 수 있으므로, 클래스 컴포넌트와 유사한 방식으로 자체 상태(state)를 관리할 수 있다.

→ 더 복잡한 컴포넌트나 생명주기 메서드가 필요한 경우, 함수 컴포넌트에 추가적인 로직을 더 쉽게 통합할 수 있다.

import React from 'react'

function ToDoList() {
  return (
    <div>ToDoList</div>
  )
}

export default ToDoList

2. rafce(React Arrow Function Component)

---

→ 화살표 함수를 사용해 컴포넌트를 정의한다.

→ 주로 간단한 컴포넌트나 함수가 작고 간결할 때 사용한다.

→ 함수 바깥의 this 에 접근할 수 없기 때문에 클래스 컴포넌트와 달리 상태(State)를 가질 수 없다.

따라서, 상태 관리를 위해 React Hook 을 사용해야 할 수 있다.

import React from 'react'

const ToDoList = () => {
  return (
    <div>ToDoList</div>
  )
}

export default ToDoList

Uploaded by N2T