C#, .NET Core, React - Project [2]

yoneeki·2024년 4월 27일

dotNetReact

목록 보기

2/7

git setting

API Controller

.NET Dependency Injection

Vite

비트는 리액트 등의 프레임워크에 사용하는 빌드 도구. 빠르고 간편한 것이 장점.
참고

React

Single Page Application
리액트는 전형적인 SPA 개발 프레임워크

Why?

Facebook, Netflix, AirBnB, Instagram...
The most loved web frameworks : 1st-ASP.NET Core, 2nd-React.js
Fast, Easy to learn. It is just a library & JS/TS.

React Component

전통적인 방식에서는 HTML, JS, CSS의 독립적인 파일들을 결합해서 사용해 브라우저 상에 렌더링시켰다.
리액트는 각각의 페이지(Single Page)를 컴포넌트로 보고 사용한다. 그 컴포넌트 자체가 JS, HTML, CSS의 결합이다.
[Parent < ] Components, State, Props, Props.. [ > Children]

One way binding

Virtual Dom, 렌더링이 빨라짐 / 다르게 말하면 리액트는 Two ways of binding을 허용하지 않는다.

단방향 데이터 흐름 : React 애플리케이션에서 데이터는 부모 컴포넌트에서 자식 컴포넌트로만 전달되며, 자식 컴포넌트는 부모로부터 전달받은 데이터를 변경할 수 없다.

JSX

JavaScript 코드 안에 XML 또는 HTML과 유사한 구문을 포함할 수 있도록 해주는 자바스크립트의 확장 문법.
useState, useEffect, useWhateverWeWant ..

function App() {
	return(
    	<div className="App">
        	<h1>Hello World!</h1>
        </div>
    )
}

---

// createElement 함수를 사용하여 간단한 컴포넌트 작성
function Greeting(props) {
  return React.createElement('div', null, `Hello, ${props.name}!`);
}

// createElement 함수를 사용하여 컴포넌트 렌더링
const element = React.createElement(Greeting, { name: 'John' }, null);

// 렌더링된 요소를 DOM에 삽입
ReactDOM.render(element, document.getElementById('root'));

React Hooks

함수형 컴포넌트에서 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있게 해주는 리액트의 기능 : useState, useEffect

import React, { useState, useEffect } from 'react';

function ExampleComponent() {
  // useState 훅을 사용하여 상태(state)를 정의
  const [count, setCount] = useState(0);

  // useEffect 훅을 사용하여 부수 효과를 처리
  useEffect(() => {
    // 컴포넌트가 마운트될 때와 count 상태가 변경될 때마다 실행
    document.title = `You clicked ${count} times`;

    // 컴포넌트가 언마운트될 때 정리(clean-up) 작업을 수행
    return () => {
      // 정리 작업
    };
  }, [count]); // count 상태가 변경될 때만 실행

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default ExampleComponent;

TypeScript

마이크로소프트가 개발.
타입스크립트(TypeScript)는 JavaScript에 정적 타입을 추가한 프로그래밍 언어
정적 타입 시스템: TypeScript는 변수, 매개변수, 함수 등에 명시적으로 타입을 지정. 이를 통해 코드의 가독성과 유지보수성을 향상시키며, 오류를 미리 발견.
클래스와 상속: TypeScript는 클래스와 상속을 지원하여 객체지향 프로그래밍이 가ㅡㄴㅇ. 이를 통해 코드를 구조화하고 재사용성을 높일 수 있음.
접근 제한자 (Access Modifier) 사용 가능.
근데 너무 upfront, strict하다는 비판도 많음.

interface Duck {
  name: string;
  numLegs: number;
  makeSound: (sound: string) => void;
}

const duck1: Duck = {
  name: "huey",
  numLegs: 2,
  makeSound: (sound: string) => console.log(sound),
};

const duck2: Duck = {
  name: "duey",
  numLegs: 2,
  makeSound: () => console.log("quack!"),
};

duck1.makeSound("quack!");
duck1.name = "john";
duck2.makeSound("zzZZ");

export const ducks = [duck1, duck2];

React & TS

1 : 컴포넌트 기본

나는 여기서 처음에 map이 이해가 잘 안됐다.
자바스크립트에서 map은 배열을 순회하면서 새로운 배열을 리턴하는 건데 갑자기 이렇게 쓰인다고..?
근데 이런 방식으로 생각해보면 간단하다. 지금 저 JSX의 리턴값은 말하자면 렌더링이 되어야 할 부분을 반환하는 것이 목적이다.
그러니 map 함수를 사용하여 ducks 배열을 순회하고, 각 duck에 대한 JSX 엘리먼트를 생성, 즉 새로운 하나의 JSX 엘리먼트를 반환하는(?) 코드가 되는 것이다.

2 : 컴포넌트 심화

DuckItem이라는 React 함수 컴포넌트를 생성. 코드 자체를 컴포넌트로 빼면서, App의 리턴값이 매우 깔끔해진다.
큰 프로젝트를 생각해보자. 렌더링이 되어야 할 모든 코드가 App의 리턴 값 안에 그대로 다 적힌다면 말도 안 되게 긴 코드가 될 것이다. 그래서 그 부분 코드들을 전부 컴포넌트로 빼 내는 것이다.
그리고 DuckItem 컴포넌트는 'props'라는 이름의 객체를 매개변수로 받는다.
'props' 객체에는 'duck'라는 이름의 Element가 포함되어 있고, 이 Element는 'Duck' 타입의 객체여야 한다.