[유데미x스나이퍼팩토리 프로젝트 캠프] Next.js 3기 Day 3~6 : React Fundamental

1. React 확장자 이해하기

사실,, react native 플젝할땐 JSX로 진행해서 당연히 그런건줄(?) 알았는데 그런 의미로다가 구별해서 알아보자

 

(1.1) JS와 JSX 차이

JS 파일은 일반적인 자바스크립트 코드를 포함한다. 함수, 변수, 제어문 및 객체와 같은 JS 모든 구성요소를 사용하여 구성한다.

JSX 파일은 HTML과 JavaScript를 혼합하여 사용힌다. JSX 파일에는 JavaScript 코드가 포함되어 있지만, HTML 요소와 유사한 구문을 사용하여 React에서 UI를 구성하는 데 사용된다.

공식 문서에 따르면 JSX파일은 UI 관련 작업을 할 때 권장되며, React에서 에러, 경고 메세지를 표시해준다.

 

가장 큰 차이점은 JSX가 HTML과 유사한 구문을 사용하여 React UI를 작성하는 데 사용된다.

JSX는 JavaScript 코드를 포함하지만, HTML 요소와 유사한 구문을 사용하여 React에서 UI를 더 쉽게 작성할 수 있도록 도와준다.

 

(1.2) TS와 TSX의 차이

TS(TypeScript)파일은 TypeScript는 JavaScript를 기반으로 하며, 정적 타입 검사를 지원하는 JavaScript의 슈퍼셋이다. TS는 대개 TS 파일 확장자를 사용하여 작성합니다.

TSX 파일은 React에서 UI를 작성하는 데 사용되는 TypeScript이다. TS와 TSX 모두 TypeScript 언어의 문법을 사용하므로, TypeScript에서 사용할 수 있는 모든 기능과 타입 검사 기능을 TSX에서도 사용할 수 있다.

TSX는 React 컴포넌트와 함께 사용되기 때문에, React의 JSX 문법도 함께 사용할 수 있다.

 

즉, TS는 JavaScript 코드에서 타입 검사와 컴파일 타임 오류 검사를 수행하는 데 사용되고, TSX는 React에서 UI를 작성할 때 TypeScript를 사용하여 타입 검사를 수행하는 데 사용된다.

 

tailwind 사용해봤으요

 

2. 컴포넌트 기본 문법

(2.1) 컴포넌트 생성

const (컴포넌트이름) = () => {
  return (
    <div>App</div>
  )
}

export default (컴포넌트이름)

위와 같은 방법으로 컴포넌트 생성을 할 수 있다.

 

- twMerge()

: tailwind-merge에서 twMerge()는  스타일 충돌 없이 JS에서 Tailwind CSS 클래스들을 병합할 수 있게 해주는 유틸 함수이다. 

app.tsx에 공통적인 디자인이 내포된 tsx파일을 import 해서 Button component 사용 예제입니다.

//App.tsx

import Button from "./components/html/Button";
import Text from "./components/Text";

export default function App() {
  return (
    <>
      <div className="item-middle">
        <Button className="bg-rose-500 text-white">
          <Text />
        </Button>
        <Button className="bg-blue-500 text-white">
          <ul>
            <li>
              <a href="">dd</a>
            </li>
          </ul>
        </Button>
        <Button className="bg-gray-500 text-white">
          <em>로그인</em>
        </Button>
      </div>

      <div></div>
      <br />
      <img />
    </>
  );
}

 

//Button.tsx

import { twMerge } from "tailwind-merge";

export default function Button({
  className,
  children,
}: {
  className: string;
  children: React.ReactNode;
}) {
  return (
    <>
      <button
        className={twMerge(
          "py-2 px-4 rounded-lg text-sm border border-gray-500",
          className
        )}
      >
        {children}
      </button>
    </>
  );
}

결과는 이렇게 나온다.

- 로그인 버튼과 인풋 타입으로 입력 값 받는 예제

결과

 

 

(2.2) 컴포넌트 이벤트

(2.2.1) 폼 이벤트 : onChange, onSubmit

(2.2.2) 마우스 이벤트 : onClick, onMouseEnter, onMouseLeave

click 이벤트로 버튼을 만들어봤습니다.

(2.2.3) 키보드 이벤트 : onKeyDown, onKeyPress, onKeyUp

(2.2.4) 포커스 이벤트 : onFocus, onBlur

(2.2.5) 드래그 이벤트 : onDragStart, onDrageOver, onDrop

(2.2.6) 터치 이벤트 : onTouchStart, onTouchMove, onTouchEnd

 

 

(2.3) 컴포넌트 Props

: 컴포넌트 간에 데이터를 전달하는 방법

: 부모 컴포넌트가 자식 컴포넌트에 전달하는 읽기 전용 데이터, 컴포넌트가 상위 컴포넌트로부터 받는 입력값이라고 할 수 있다.

 

Html 속성처럼 <Count count = "10" /> 이렇게 전달하고자하는 것을 적는 것을 React에서는 props라고 한다. 

-> Props를 통해 데이터를 전달한다고 표현함. 함수의 특징을 그대로 표현할 수 있다.

-> 또한, 객체 형태로 console창에서 볼 수 있는데, 사용자가 값을 여러 개 넘겨줄 수도 있기 때문임.

 

- 기본형태

<Component 속성={값} />

 

 

- count 컴포넌트가 count라는 props를 받는 형태는 아래와 같다. 객체이기 때문에 타입을 지정해준다. (타입 에러 최소화)

const count = (props: {count : number}) => {}

 

- 여러 개의 Props를 전달하는 예제

//UserProfile.tsx


UserProfile({
    bg,
    profile,
    name,
    insta,
    printName,
}: {
    bg: string;
    profile: string;
    name: string;
    insta: string;
}) => {
	return (
    <div>
      <p>{bg}</p>
      <p>{profile}</p>
      <p>{name}</p>
      <p>{insta}</p>
    </div>
    
    );
};

//App.tsx


import UserProfile from "./components/UserProfile";

export default function App() {
  const printName = (name: string) => {
    alert(name);
  };
  return (
    <>
<UserProfile
  bg = ""
  profile=""
  name = "Sally Ramos"
  insta="@sallytheramos"
  printName={printName}
  />
  <UserProfile
  bg = ""
  profile=""
  name = "John"
  insta="@jonny"
  printName={printName}
  />
  </>
  )
}

 

- 그리고 d.ts 파일에 타입을 선언하여 import를 따로 하지 않아도 사용할 수 있다.

interface Countprops{
    count: number;
    operator : string;
}

 

 

3. 함수형 컴포넌트

(3.1) useState

: 컴포넌트의 상태를 간편하게 생성하고 업데이트 해주는 도구를 제공해준다.

state 생성과 동시에 가져야할 초기값을 useState 함수에 인자로 넣어주면 state와 setState를 두가지 요소를 배열 형태로 리턴해준다.

const [state, setState] = useState(초기값);

컴포넌트의 현재 상태 값은 state 라는 변수에 들어있고 state를 변경하고 싶으면 setState 함수를 이용해서 변경할 수 있다. 여기서 state와 setState의 이름은 마음대로 지정할 수 있다.

setState를 이용해서 state를 변경하면 해당 컴포넌트는 화면에 다시 렌더링이 된다.

import { useState } from "react";

export default function App(){
  // let count = 0;
  const [count, setCount] = useState(0);
  const increment = () => {
    // count += 1;
    setCount(10); //상태 값을 참조하지 않는 업데이트
    // setCount(() => 10); //상태 값을 참조하는 업데이트
  };
  return (
    <>
      <h1> Count : {count}</h1>
      <button onClick ={increment}> 증가 </button>
    </>
  );
}

useState(0)에서 0은 state안에 들어있는 초기 값 0을 나타낸다.

 

- 인풋값에 컬러이름을 넣으면 사각형 박스의 배경 이미지 색상도 함께 변경될 수 있도록 코드를 짜보았다.

const [color, setColor] = useState("");

(3.2) useRef

: useRef는 리액트에서 HTML 요소에 접근하거나 컴포넌트의 렌더링에 영향없이 값을 유지하고 싶을 때 사용한다.

const ref = useRef(initialValue);

 

 

(3.3) useEffect

: 컴포넌트 생명 주기에 따른 코드를 작성하고 싶을 때 사용할 수 있다.

 

(3.4) useLayoutEffect

: useEffect와 개념은 똑같으나, 실행방식이 다르다.

- useEffect() 는 화면에 컴포넌트가 렌더링 된 후 비동기적으로 실행된다. 그래서 DOM을 조작하는 경우 ‘깜빡임’을 볼 수 있을 확률이 높다.

- useLayoutEffect()는 화면에 컴포넌트를 그리기 바로 직전에 동기적으로 실행된다. 그래서 DOM을 조작하는 경우 ‘깜빡임’을 볼 수 없다.

 

---

본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 3기 과정(B-log) 리뷰로 작성 되었습니다.

#유데미 #udemy #웅진씽크빅 #스나이퍼팩토리 #인사이드아웃 #미래내일일경험 #프로젝트캠프 #부트캠프 #React #리액트프로젝트 #프론트엔드개발자양성과정 #개발자교육과정