[React] 리액트 시작 & 컴포넌트

React 프로젝트 설정

.gitignore

• 깃허브에 푸쉬시, 무시되어야할 항목들 나열.

• 생성된 .gitignore에 해당 항목도 추가로 기입하도록 한다.

  # Customs
  .env
  .env.*
  package-lock.json
  

package.json

• 해당 파일의 scirpts에 터미널에서 사용할 수 있는 명령어가 모여져 있다.

  

  대표적으로, Vite에 내장되어 있는 개발 서버를 실행하는 dev가 있다.

    npm run dev
  

index.html

• 최상위 디렉토리에 있는 HTML 파일.
• Vite는 이 파일을 기반으로 빌드하고 애플리케이션을 시작.
• 빌드 시, src 하위에 있는 파일들을 로드하여 나타낸다.

public

• 번들링이 필요없는 파일(정적 파일) 모음.
• 해당 파일은 빌드 과정에서 그대로 복사되어 최종 빌드에 포함.
• 예: favicon

src/assets

• 번들링이 필요한 파일(정적 파일) 모음.

---

React 실습을 위한 정리

• React를 간단히 사용하기 위해, 사용하지 않는 파일들을 제거한다.

  

• main.tsx에서도 삭제된 파일을 불러오는 코드를 제거한다.

    import { StrictMode } from "react";
    import { createRoot } from "react-dom/client";
    // import "./index.css"; 제거
    import App from "./App.tsx";
      
    createRoot(document.getElementById("root")!).render(
      <StrictMode>
        <App />
      </StrictMode>
    );
  

• App.tsx에서, 기본적인 컴포넌트 코드 구조만 작성 후, 진행

    export default function App() {
      // JSX = Javascript + XML(확장 문법)
      return <div>Hello, World!</div>;
    }
  

---

React 컴포넌트 종류

컴포넌트 작성법

1. 클래스 컴포넌트

    import { Component } from "react";
    import reactLogo from "./assets/react.svg";
    import viteLogo from "/vite.svg";
    import "./App.css";
       
    interface AppState {
      count: number;
    }
       
    class App extends Component<
      React.Dispatch<React.SetStateAction<AppState>>,
      AppState
    > {
      constructor(props: React.Dispatch<React.SetStateAction<AppState>>) {
        super(props);
        this.state = {
          count: 0,
        };
      }
       
      render() {
        const { count } = this.state;
        return (
          <>
            <div>
              <a
                href="https://vitejs.dev"
                target="_blank"
                rel="noopener noreferrer"
              >
                <img src={viteLogo} className="logo" alt="Vite logo" />
              </a>
              <a href="https://react.dev" target="_blank" rel="noopener noreferrer">
                <img src={reactLogo} className="logo react" alt="React logo" />
              </a>
            </div>
            <h1>Vite + React</h1>
            <div className="card">
              <button onClick={() => this.setState({ count: count + 1 })}>
                count is {count}
              </button>
              <p>
                Edit <code>src/App.tsx</code> and save to test HMR
              </p>
            </div>
            <p className="read-the-docs">
              Click on the Vite and React logos to learn more
            </p>
          </>
        );
      }
    }
       
    export default App;
   

2. 함수형 컴포넌트

    import { useState } from "react";
    import reactLogo from "./assets/react.svg";
    import viteLogo from "/vite.svg";
    import "./App.css";
       
    function App() {
      const [count, setCount] = useState(0);
       
      return (
        <>
          <div>
            <a href="https://vitejs.dev" target="_blank">
              <img src={viteLogo} className="logo" alt="Vite logo" />
            </a>
            <a href="https://react.dev" target="_blank">
              <img src={reactLogo} className="logo react" alt="React logo" />
            </a>
          </div>
          <h1>Vite + React</h1>
          <div className="card">
            <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
            <p>
              Edit <code>src/App.tsx</code> and save to test HMR
            </p>
          </div>
          <p className="read-the-docs">Click on the Vite and React logos to learn more</p>
        </>
      );
    }
       
    export default App;
       
   

비교를 해보면, 함수형 컴포넌트가 훨씬 더 간단히 작성되었음을 확인 가능.

함수형 컴포넌트만 사용하자

• 리액트 16.8 버전에 추가된 리액트 훅으로 인해서, 사용성의 대변화 발생.
• 16.8 이전 버전에서는 함수형 컴포넌트를 사용하는 게 불편했지만,
  리액트 훅으로, 이제는 클래스 컴포넌트를 사용하는 게 비효율적임.
• 리액트 19 버전에는 클래스 컴포넌트에 더 이상 기능 추가가 없어짐.
• 리액트 19 버전에서 클래스 컴포넌트의 대다수 문법이 사라짐.

---

React 컴포넌트 작성

Snippet으로 컴포넌트 빠르게 작성하기

• ES7+ React/Redux/React-Native snippets 익스텐션 사용

  

• rfc 입력 시, 빠르게 컴포넌트 형태 등장 → 빠르게 컴포넌트 작성 가능.

  

  

커스텀 snippets 작성

• 익스텐션에 제공하는 snippets이 아닌, 직접 커스텀한 것을 사용해보자.

• [설정] - [코드 조각] 클릭

  

• 다음과 같이, typescriptreact 입력
  → 그러면, typescriptreact.json 파일이 열림.

  

• 다음과 같이 파일을 수정할 수 있음. → 저장.

    {
    	"Function Component": {
    		"prefix": "rfc",
    		"body": [
    			"export default function ${1:$TM_FILENAME_BASE} ($2) {",
    			"  return (",
    			"    <>",
    			"      <h1>${1:$TM_FILENAME_BASE} Component</h1>",
    			"    </>",
    			"  );",
    			"}",
    		],
    		"description": "Create an function component"
    	},
    }
  

  ${1:$TM_FILENAME_BASE}은 해당 파일명을 넘겨받는다.

• 이러면, 앞으로 직접 커스텀한 것을 사용할 수 있음.

  

---