[TIL] Day 25 JSX Snippet 가이드 (rafc, rafce, rfce)

2023.11.08 수

 

리액트 컴포넌트를 작성하기 위해서 JSX 스니펫을 쓰다가 궁금해졌다.

자동으로 생성되는 코드는 어떤 것인지, 어떤 부분을 변경해 볼 수 있고 잘 작동하는지 알아보자.

 

• 스니펫
• rafc, rafce
• 함수 표현식, 함수 선언식
• export, export default
• props 받는 방법
• 최고의 조합

 

rafce

 

 

snippets (스니펫)

'코드 조각'이라고 부르는데, 도구라기 보단 에디터마다 내장되어 있는 기능이다.

용도는 자주 사용되는 코드에 대해서 단축어를 만들어서 코드를 빠르게 생성해 낼 수 있게 도와준다.

 

기본적으로 JSX파일을 만들고 들어가면 빈화면이다.

HTML은 ! 입력 후 Tab를 누르면 기본적인 양식이 제공된다.

이와 마찬가지로 JSX 파일에서도 대표적으로 rafc 또는 rafce 를 활용해서 작성을 시작한다.

그렇다면 해당 스니펫은 어떤 모습일까.

 

 

 

rafc, rafce, rfce

rafc

- 함수 표현식

 

 

▼ 기본값 ▼

import React from 'react'

export const test = () => {
  return (
    <div>test</div>
  )
}

React import

보통의 export 사용

함수 표현식 사용

 

 

▼ 활용 ▼

// 기본값
export const Input = ({ todos, setTodos }) => {

// 함수 선언식
export function Input({ todos, setTodos }) {

// 컴포넌트 사용하는 파일에서 import 하는 방법
import {Input} from './Component/Input';

rafce

- 함수 표현식

- export default 로 선언되기에 더 편한 듯

 

▼ 기본값 ▼

import React from 'react'

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

export default test

React import

제일 아래쪽에 export default 사용

함수 표현식 사용

 

 

▼ 활용 ▼

// 기본값
const Input = ({ todos, setTodos }) => {

// 함수 선언식
function Input({ todos, setTodos }) {

// 컴포넌트 사용하는 파일에서 import 하는 방법
import Input from './Component/Input';

 

 

rafc 추가

rafc

- 함수 선언식

- export default 로 선언되기에 더 편한 듯

 

▼ 기본값 ▼

import React from 'react'

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

export default test

React import

제일 아래쪽에 export default 사용

함수 선언식 사용

 

 

함수 선언식, 함수 표현식

함수 선언식 - Function Declarations

function

일반적인 프로그래밍 언어에서의 함수 선언과 비슷한 형식

// 기본 함수
function test () {}

 

 

함수 표현식 - Function Expressions

const, let

유연한 자바스크립트 언어의 특징을 활용한 표현 방식

// 기본 함수
const test = function () {}

// 화살표 함수
const test = () => {}

 

 

 

export,  exprot default

export 와 export default 차이점

- import 명명할 때 차이가 있다.

- { } 의 사용 여부

 

export

import {Input} from "./Input"

export default

import Input from "./Input"

 

 

- export default 의 사용 조건
함수 표현식 바로 앞에서는 export default 사용 X
함수 선언식 바로 앞에서는 export default 사용 O

// 함수 선언식
export default function Input () {}

// 컴포넌트 사용하는 파일에서 import 하는 방법
import Input from "./Input"

 

 

 

props 받는 방법

- 매개변수로 선언

const Input = ({ todos, setTodos }) => {
  // todos 바로 사용 가능
}

 

 

- 매개변수를 props로 설정 후 함수 안에서 선언

(개인과제 때 사용)

const Input = (props) => {
  const { todos, setTodos } = props;
  // todos 바로 사용 가능
}

- 따로 선언하지 않았을 때

const Input = (props) => {
  // props.todos 로 사용 가능
}

 

 

 

최고의 조합

- rafce

- rfce

- 제일 하단에 export default <컴포넌트명> (import 할 때 { } 생략 가능)

- 함수 선언식(function)으로 변경해 놓으면 추후에 바로 앞에 export default를 붙일 수 있다.

- 함수 표현식(const)으로 표현하면 화살표 함수를 사용할 수 있다.

 

 

 

Pro Tips

queryselectorAll → 배열로 저장

 

JS → HTML
Element.innertext = "텍스트" : 기본적인 텍스트로 적용
Element.innerhtml = "텍스트" : 해당 속성을 적용시킨 후 적용

 

HTML → JS
Element.innertext : 사용자에게 보이는 텍스트만 가져옴
Element.html : 전체를 다 가져옴
Element.textContent : 숨겨진 텍스트까지 포함해서 텍스트값을 모두 다 가져옴

 

Code Convention (코드 컨벤션)

읽고 관리하기 쉬운 코드를 작성하기 위한 일종의 코딩 스타일 규약(하나의 작성 표준)

 

 

 

---

하루를 마치며

간략하게는 알고 있었지만 이번 기회에 제대로 정리해 볼 수 있었다.

헷갈리거나 까먹더라도 어제든지 찾아볼 수 있도록 깔끔하게 정리해 놔서 마음이 편하다.

어느 상황에서 어떤 방법이 편한지, 만약 오류가 발생했다면 어떤 부분을 체크해야 할지 가이드라인이 잡힌 것 같다.

 

 

오늘의 한 줄
오늘도 기본기 Level up!