[React] Datepicker 사용하기

Datepicker 설치

npm install react-datepicker

datepicker를 사용하려면 터미널에서 datepicker를 설치한 후 import해야한다.

**리액트를 처음 사용하면서 공부 중이여서, 다소 잘못된 내용이 있을 수 있습니다. 기록용으로 적는거니 참고만 해주세요**

맥 터미널에서 root 권한으로 설치하고 vsc에서 실행하려고 하니까 계속 에러떠서 확인해보니 맥 기본 설치 경로랑 vsc에서 불러오는 경로랑 좀 다른가 보다. 계속 개발하면서 보니 맥터미널에 설치한건 인식이 안되서 vsc에서 해당 프로젝트 경로로 실행하여 설치해주어야했다.
그리고 프로젝트 폴더에 설치되는거라서 폴더를 삭제하고 동일한 폴더를 새로 생성하게되면, npm install 이 사라지기 때문에 재설치를 해야한다.

리액트 컴포넌트 종류

리액트에는 함수형 컴포넌트와 클래스형 컴포넌트가 있다.
기존에는 함수와 클래스의 기능 차이가 있어서 각각의 기능 차이가 분명했는데 버전이 업그레이드 되면서 '훅'이라는 기능이 추가되었는데 훅을 사용하면 클래스컴포넌트의 기능을 유사하게 구현할 수 있기 때문에 굳이 클래스형 함수를 사용하지 않아도된다.
요새는 클래스형 함수보다 함수형 컴포넌트가 보기 더 직관적이고 간결하게 작성할 수 있어서 선호되는 추세라고 한다.
 

함수형 컴포넌트

함수형 컴포넌트는 함수로 구성되며, 입력(props)을 받아서 UI를 반환하는 방식으로 작동한다. 함수형 컴포넌트는 간단하고 가벼우며, 대개의 경우 상태 없이(props 만을 사용) 작동한다. 예를 들어, 간단한 텍스트를 표시하는 라벨, 이미지를 표시하는 이미지 컴포넌트 등에 적합하다.

반면 클래스형 컴포넌트는 ES6 클래스로 구성되며, 클래스 내에 상태(state)와 생명주기 메서드(lifecycle method)를 가질 수 있다. 상태는 컴포넌트의 데이터를 저장하고 변경할 수 있다. 생명주기 메서드는 컴포넌트가 생성되고 파괴되는 과정에서 호출되는 메서드다. 클래스형 컴포넌트는 상태와 생명주기 메서드를 사용할 수 있기 때문에, 더 복잡한 로직이 필요한 경우에 적합하다. 

최근에는 함수형 컴포넌트에서도 상태(state)와 생명주기 메서드(lifecycle method)를 사용할 수 있게 됐기 때문에, 클래스형 컴포넌트를 사용하지 않고도 더 복잡한 로직을 다룰 수 있다. 이는 'React Hooks'를 이용하는 것입니다. 하지만, 클래스형 컴포넌트는 여전히 유용한 경우가 있다. 예를 들어, 리액트의 클래스 컴포넌트는 React Native에서 자주 사용되며, 서로 다른 메서드를 활용해 UI를 구성하는 경우가 많기 때문이다.

Hooks

함수형 컴포넌트와 클래스형 컴포넌트의 차이에 대해 이야기했듯이, 함수형 컴포넌트와 훅의 차이는 React Hooks가 없을 때와 Hooks가 도입되면서 생긴 차이이다.

함수형 컴포넌트는 함수로 작성되어 있으며, 일반적으로 렌더링만 담당하고, state나 lifecycle과 같은 기능을 사용하려면 이전에는 클래스형 컴포넌트를 사용해야 했다.

하지만 2018년 React 16.8 버전에서 Hooks가 도입되면서 함수형 컴포넌트에서도 state나 lifecycle과 같은 기능을 사용할 수 있게 되었다. 이제 useState, useEffect, useContext 등의 Hook 함수를 사용하여 함수형 컴포넌트에서도 상태 관리나 부수 효과를 처리할 수 있다.

따라서, 캘린더 컴포넌트를 작성할 때에도, 클래스형 컴포넌트로 작성하지 않고, 함수형 컴포넌트에서 useState와 같은 Hook을 사용하여 상태 관리를 할 수 있다. 이렇게 작성하면 코드가 간결해지며, 상태 관리가 편해지고 가독성이 좋아진다.
즉, 함수형 컴포넌트에서도 훅을 활용하여 클래스형 컴포넌트에서 가능한 대부분의 기능을 구현할 수 있다.
React Hook은 React 함수 컴포넌트 내에서 React state와 생명주기 기능(lifecycle features)을 "연결"하는 함수이다. Hook은 일종의 함수이며, 다른 함수나 변수와 마찬가지로 특정 역할을 수행한다. Hook은 함수형 컴포넌트에서만 사용될 수 있으며, 클래스형 컴포넌트에서는 사용될 수 없다. Hook은 useState(), useEffect(), useContext() 등 다양한 함수들이 있다. 예를 들어 useState()는 상태(state)를 관리하기 위한 Hook이며, useState()를 사용하면 함수 컴포넌트에서 state를 사용할 수 있다.

---

리액트에서는 파일명을 작성할 때, 첫글자는 대문자로 작성해야한다.
리액트에서 파일명을 지을 때 첫 글자는 대문자로 시작해야 하는 규칙이 있다. 이것은 리액트에서 컴포넌트를 구분하기 위한 규칙 중 하나이다. 

함수형 컴포넌트를 작성했다면 (Calendar.js) 메인으로 사용될 app.js 파일에서 import한다.
import 문으로 Calendar 컴포넌트를 가져왔다면, 해당 컴포넌트를 JSX로 렌더링하려면 다음과 같이 작성할 수 있다.

import Calendar from "./Calendar.js";

function App() {
  return (
    <div>
      <h1>My App</h1>
      <Calendar />
    </div>
  );
}

export default App;

Calendar.js 파일을 Calendar로 import하여 <h1> 태그 아래에 JSX로 렌더링 하였다.
**JSX: 자바스크립트 문법을 확장한 XML 문법으로, React에서 UI를 구성할 때 사용한다. JSX를 사용하면 HTML과 유사한 구조를 갖는 컴포넌트를 자바스크립트 코드 안에 작성할 수 있어, 코드의 가독성이 높아지고 개발 효율이 향상된다. JSX는 컴파일러를 통해 일반적인 자바스크립트 코드로 변환되며, React에서는 컴포넌트의 render 함수에서 JSX를 사용하여 UI를 생성한다.

위와 같이 `Calendar` 컴포넌트를 JSX로 사용할 수 있다. JSX에서는 대문자로 시작하는 컴포넌트명이 사용되기 때문에 `import` 문에서 파일명과 상관없이 컴포넌트 이름을 지정할 수 있다.
하지만 통일하고 싶어서 파일명과 컴포넌트명을 통일 시켜서 작성했다.