[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 6~7일차 후기

 

 

1. 리액트에서 활용하기 좋은 ES6 문법

1) 구조분해할당(=비구조화할당)

구조분해할당하지 않은 rest를 스프레드연산자로 처리해서 받을 수 있다.

 

2) 스프레드 연산자

a. 함수 매개변수 -> 나머지 매개변수

b. 비구조화 할당 -> 비구조화 할당하고 남은 값 처리

c. 배열

 i) 깊은복사

 ii) 배열 합치기

배열을  concat 메서드를 이용하면 합칠 수 있지만, 스프레드 연산자를 이용해서도 가능하다.

const arr1 = ['a', 'b', 'c']
const arr2 = ['1', '2', '3']
const combine = [...arr1, arr2]

console.log(combine) // ['a', 'b', 'c', '1', '2', '3']

d. 객체

  i) 깊은복사  :  원본의 주소값과 참조를 끊어줘서 내부 프로퍼티를 변경해도 복사한 객체의 값이 바뀌지 않는다.

 const a = {
   key: 'aValue'
 }
 
 const b = {
   ...a
 }
 
 b.key = 'bValue'
 
 console.log(a) // key: 'aValue'
 console.log(b) // key: 'bValue'

  ii) 병합 -> 속성이 덮어 씌워지는 것을 주의

  iii) 비구조화할당 -> 객체에서 특정 값 추출, 나머지 데이터를 받는 용도

 

 

2. export default의 의미

default를 안붙이면 import할 때, {} 안에 이름을 써야함.

붙인 경우에는 이름을 다르게 설정할 수 있지만, 컴포넌트 명과 같이 하는것이 관례임

 

3. 이벤트 객체의 타입의 경우 

onClick={onClickHandler}

onClick={(e) => onClickHandler(e)}

위의 경우에서 아래의 것으로 코드를 수정한뒤 호버했을 때 나오는 값이 React에서 타입추론 해준 값인데, 이것을 타입으로 정의하면 된다. 이처럼 우리가 타입을 모르는 값이라도 이 방식으로 타입을 기입해 줄 수 있다.

  const onClickHandler = (event: 
    React.MouseEvent<HTMLButtonElement, MouseEvent>
  ) => {
    console.log(event)
  }

 

4. tailwind-merge

import { twMerge } from 'tailwind-merge'

const App = () => {
  const isLoggedin = true
  return (
    <>
    <h1 className={twMerge(
      "text-3xl underline",
      isLoggedin ? "text-5xl text-rose-500" : ""
  )}>App components</h1>
    </>
  )
}

export default App

 

tailwind-merge 라이브러리를 사용하여 삼항연산자로 처리해준 모습

로그인이 되었을 때 적용할 속성을 설정해줘서 쉽게 삼항연산자를 활용하는 방법이다. 라이브러리를 사용하지 않았을 때는  h1태그 전체를 삼항연산자로 설정해야 하기 때문에 코드가 불필요하게 길어지고 가독성을 해치는 반면, 이런 방식을 사용하면 조건을 삼항연산자가 덮어쓰면서 쉽게 속성을 조절할 수 있다.

 

5. 재사용성이 높은 컴포넌트 만들기

import React from 'react'

type TImputProps = React.ComponentPropsWithoutRef<"input">

const Input = ({ type, placeholder } : TImputProps) => {
  return (
    <div>
      <input type={type} className='w-[240px] h-11 rounded-lg placeholder:text-[#acacac]
      border border-[4F4F4F] py-[13.5px] px-[16px] outline-none text-sm
      '  placeholder={placeholder} />
    </div>
  )
}

export default Input

 

ComponentPropsWithoutRef 타입은 <> 내부에 들어있는 태그의 모든 속성들을 사용할 수 있도록 하는 타입이다.

위의 코드처럼 TImputProps으로 type을 정의해준 다음, props의 속성들을 쉽게 받아올 수 있다. HTML 중 태그의 속성들을 기반으로 하기 때문에 안정성도 어느정도 보장하면서 활용도가 높은 컴포넌트를 짤 수 있다.

import { twMerge } from "tailwind-merge";

type TInputProps = React.ComponentPropsWithoutRef<"input">;

const Input = ({ className, ...rest }: TInputProps) => {
  return (
    <>
      <input
        className={twMerge(
          `w-[240px] h-[44px] rounded-lg placeholder:text-[#acacac] border border-[#4F4F4F]
          py-[13.5px] px-[16px] text-sm outline-none`,
          className
        )}
        {...rest}
      />
    </>
  );
};
export default Input;

 

나머지 매개변수와 twMerge를 조합한다면 이렇게 확장성 있는 input 컴포넌트도 만들수 있다. className의 내용이 덮어씌워지기 때문에 이런 코드를 쓸 수 있다. 나머지 매개변수에 type과 placeholder가 들어가게 되는 것이다.

 

import { twMerge } from "tailwind-merge";

type TButtonProps = React.ComponentPropsWithoutRef<"button">;
const Button = ({ className, children, ...rest }: TButtonProps) => {
  return (
    <>
      <button
        className={twMerge(
          "w-[77px] h-[44px] text-sm text-white rounded-lg cursor-pointer",
          className
        )}
        {...rest}
      >
        {children}
      </button>
    </>
  );
};
export default Button;

 

이것은 children props를 이용해서 button의 컨텐츠까지 설정할 수 있도록 만들었다.

 

 

figma 단축키
레이어 클릭 후 shift +2를 누르면 포커싱이 맞춰진다.
요소 클릭 후 alt 누르고 호버링 하면 거리가 보인다.