
## 공통 컴포넌트 제작의 필요성

> 하나의 사이트를 제작할때 비슷한 input이나 button을 사용해야 하는 상황이 자주 있는데, 공통된 컴포넌트를 만들어 놓으면 코드 중복을 줄이면서 상황에 맞춰 적절하게 사용할 수 있게 된다.

## 컴포넌트 제작

### Input

```typescript
import React from "react"; // element 속성을 가져오기 위해 import
import styled from "styled-components"; // CSS 적용

// 컴포넌트의 props 타입을 InputElement의 속성과 내가 설정하고자 하는 타입을 포함한다.
type Props = React.HTMLAttributes<HTMLInputElement> & InputProps;

interface InputProps {
  type?: string | undefined; // type?: 의 ?는 있어도 되고 없어도 된다는 의미
  name?: string | undefined;
  autoComplete?: string | undefined;
  width: string;
  height: string;
  border?: string | undefined;
}

// width와 height는 number로 지정해도 무관하나,
// 상황에 따라 뷰포트에 맞춰 쓸지, px에 맞춰 쓸지 달라질 수 있기 때문에 string으로 설정한 경우

export const MainInput = ({
  type,
  name,
  autoComplete,
  width,
  height,
  border,
  ...props
}: Props) => {
  return (
    <Main
      // input이 갖고 있는 속성을 사용할 수 있도록 도와준다. (placeholder, onChange 등 속성과 이벤트들)
      {...props}
      name={name}
      autoComplete={autoComplete || "on"}
      type={type || "text"}
      style={{
        width: `${width}`,
        height: `${height}`,
        border: `${border && border !== "" ? `1px solid ${border}` : ""}`,
      }}
    />
  );
};

const Main = styled.input`
  padding: 5px;
  border: none;
  border: 1px solid ${props => props.theme.inputBorderColor};
  border-radius: 5px;
  font-size: 1.2rem;
  &:hover {
    background: ${props => props.theme.inputBorderColor};
  }
  &:focus {
    outline: none;
    border-color: ${props => props.theme.hoverBorderColor};
    box-shadow: 0 0 1px ${props => props.theme.hoverBorderColor};
  }
`;
```

### TextArea

```typescript
type TaProps = React.HTMLAttributes<HTMLTextAreaElement> & TextAreaProps;
interface TextAreaProps {
  name?: string | undefined;
  width: string;
  height: string;
  border?: string | undefined;
}

export const MainTextArea = ({
  name,
  width,
  height,
  border,
  ...props
}: TaProps) => {
  return (
    <TextArea
      {...props}
      name={name}
      autoComplete="off"
      style={{
        width: `${width}`,
        height: `${height}`,
        border: `${border && border !== "" ? `1px solid ${border}` : ""}`,
      }}
    />
  );
};

const TextArea = styled.textarea`
  padding: 5px;
  border: none;
  border: 1px solid ${props => props.theme.inputBorderColor};
  border-radius: 5px;
  font-size: 1.2rem;
  resize: none;
  white-space: pre;
  &:hover {
    background: ${props => props.theme.inputBorderColor};
  }
  &:focus {
    outline: none;
    border-color: ${props => props.theme.hoverBorderColor};
    box-shadow: 0 0 1px ${props => props.theme.hoverBorderColor};
  }
`;
```

## Button

```typescript
type Props = React.HTMLAttributes<HTMLButtonElement> & ButtonProps;

interface ButtonProps {
  type?: "button" | "submit" | "reset" | undefined; // 버튼 타입은 이와 같이 설정해준다.
  content: string;
  width: string;
  height: string;
}

export const MainButton = ({
  type,
  content,
  width,
  height,
  ...props
}: Props) => {
  return (
    <Main
      {...props}
      type={type || "button"}
      style={{ width: `${width}`, height: `${height}` }}
    >
      {content}
    </Main>
  );
};

const Main = styled.button`
  border: none;
  border-radius: 5px;
  background: none;
  background-color: ${props => props.theme.mainButton};
  color: ${props => props.theme.mainFontColor};
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  &:hover {
    background-color: ${props => props.theme.mainButtonHover};
  }
`;
```


React 공통 컴포넌트 제작 (input, button)

react common components


## Form Event Type

우리는 로그인이나 포스팅 등의 화면을 만들어줄 때 클라이언트가 입력하는 데이터를 입력받는 방법 중 하나로 onChange 등의 FormEvent를 이용해 원하는 값을 추출할 수 있다. 이때 이벤트 타입은 아래와 같이 사용될 수 있다.

```typescript
import { FormEvent } from "react";

export type FormEvents = FormEvent<HTMLFormElement>;
export type InputEvent = FormEvent<HTMLInputElement>;
export type LabelEvent = FormEvent<HTMLLabelElement>;
```

react에서 FormEvent 타입을 받아오고, 해당되는 element를 제네릭 타입으로 넣어주면 된다.

## onChangeHandler

```typescript
const [formData, setFormData] = useState(formDataInit);
const formChangeHandler = (e: FormEvent<HTMLFormElement>) => {
  const target = e.target;
  const name = target.name;
  const value = target.value;
  setFormData(prev => ({ ...prev, [name]: value }));
};
```

원하는 데이터를 받을 수는 있지만, name과 value의 타입 에러가 발생한다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F80Q0s%2Fbtr9SOPHzuW%2F7t6EmYi1k5gMiyeurxmCP0%2Fimg.png)

target의 타입을 정해줘도 타입 에러가 발생하는 것을 볼 수 있다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbsb5ww%2Fbtr9N2aq2VJ%2FsFJkJduLoSt1bhyae9SFdK%2Fimg.png)

하지만 우리는 form의 input이 변할때마다 대상의 값을 받아오는 것을 알고 있다.

이때 필요한 것이 타입 단언(as)이다.

## 타입 단언 사용 예시

```typescript
const formChangeHandler = (e: FormEvents) => {
  const target = e.target as InputTarget; // InputTarget === HTMLInputElement
  const name = target.name;
  const value = target.value;
  setFormData(prev => ({ ...prev, [name]: value }));
};
```

### 주의사항

타입 단언을 사용하면 타입 체크를 할 수 없다. 사실상 강제로 타입을 지정하는 행위이기 때문에 타입 체커에게 해당 타입 에러를 무시하라는 명령이나 다름없다. as를 남발하거나 내려받는 데이터가 확실하지 않는 경우에는 오류 탐색에 지장이 있을 수 있으니, 로직에 따라 조건문 등을 사용해 타입 에러를 피해 주는 것이 좋을 수 있다.

```typescript
// ex)
const someFN = (someData) =>{
	const someMutation = someData..logic
    if(someMutation){
    	// ... nest logic
    }
}
```


React Form event type (feat. 타입 단언 as)

react type assertion


# **부드러운 스크롤 이동 적용 방법**

> behavior:"smooth" 속성을 scroll 이벤트와 scroll 메서드와 같이 사용하며 부드러운 스크롤 이동을 적용해볼 수 있다.

본 보스팅은 Nextjs 13 환경에서 작성되었다.

## **scroll() 메서드**

### **scroll() , scrollTo()**

scroll(x,y) || scroll(options), scrollTo(x,y) || scrollTo(options) 와 같이 사용할 수 있다.

사실상 두 메서드는 동일하게 작동한다.

xy 좌표를 통해서도 사용 가능하며 options를 적용한다면 아래와 같이 사용할 수 있다.

```javascript
window.scroll({
  top: 0,
  left: 0,
  behavior: "smooth", // smooth: 부드럽게 전환 , auto: 즉시 이동
});

window.scrollTo({
  top: 0,
  left: 0,
  behavior: "smooth", // smooth: 부드럽게 전환 , auto: 즉시 이동
});
```

### **scrollBy()**

**scrollBy(x,y) || scrollBy(options)**

scroll()과 scrollTo()가 특정 좌표로 이동한다면, scrollBy는 길이만큼 스크롤을 이동시킨다.

옵션과 예제는 아래와 같다.

```javascript
// 기본 사용
window.scrollBy(x, y);

// 한 페이지 아래
window.scrollBy(0, window.innerHeight);

// 한 페이지 위
window.scrollBy(0, -window.innerHeight);

// 옵션
window.scrollBy({
  top: 0,
  left: 0,
  behavior: "smooth", // smooth: 부드럽게 전환 , auto: 즉시 이동
});
```

scroll 메서드가 적용된 화면과 예제코드

![image](https://blog.kakaocdn.net/dn/bV3l2O/btr5OcgXBcx/ickRekJIOy3VMmRLtzt2pK/img.gif)

```javascript
// 최상단으로 이동
const moveScroll = () => {
  scroll({ top: 0, behavior: "smooth" });
};

// 한 페이지 위로 이동
const moveScrollByUp = () => {
  scrollBy({ top: -window.innerHeight, behavior: "smooth" });
};

// 한 페이지 아래로 이동
const moveScrollByDown = () => {
  scrollBy({ top: window.innerHeight, behavior: "smooth" });
};

// top 500 위치로 이동
const moveScrollTo = () => {
  scrollTo({
    top: 500,
    behavior: "smooth",
  });
};

// jsx
<Container>
  <NavBtn>
    <button onClick={moveScroll}>Scroll최상단</button>
    <button onClick={moveScrollByUp}>moveScrollByUp</button>
    <button onClick={moveScrollByDown}>moveScrollByDown</button>
    <button onClick={moveScrollTo}>moveScrollTo</button>
  </NavBtn>
  <TestContainer1 id="box1" />
  <TestContainer2 id="box2" />
  <TestContainer3 id="box3" />
  <TestContainer4 id="box4" />
  <TestContainer5 id="box5" />
  <TestContainer6 id="box6" />
</Container>;
```

## **Chrome 브라우저에서 behavior:"smooth" 속성이 적용되지 않을 때**

아래와 같이 크롬 버전은 최신이지만, smooth 속성이 적용되지 않는 현상이 나타났다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fx3Fal%2Fbtr5ORwXdp3%2FAHsT7DB2D5i76OjhYqcN9k%2Fimg.png)

![image](https://blog.kakaocdn.net/dn/bourLn/btr5NyrsLbU/nkulo83V1NSn2kEMQb2xYK/img.gif)

호환성에도 문제가 없지만 MDN의 예제를 실행해 봐도 크롬에선 smooth 속성이 사용되지 않았다.

MDN 스크롤 예제 : https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FmJ1Dl%2Fbtr5Nv2OZvD%2Fmk5c6Hks8ai7J4UKhL6wR1%2Fimg.png)

크롬 브라우저 설정을 따로 해주면 해결된다고는 하지만, 내 PC에서만 작동하는 건 근본적인 해결방법이 아니기 때문에 배제했다.

참조 : http://www.devdic.com/css/refer/properties/property:1195/scroll-behavior

### **smoothscroll-polyfill - 적용 실패**

사용법 : https://www.npmjs.com/package/smoothscroll-polyfill?activeTab=readme

```typescript
// 패키지 설치
// yarn add smoothscroll-polyfill

// 최상단 파일

import smoothscroll from "smoothscroll-polyfill";

if (typeof window !== "undefined") {
  smoothscroll.polyfill();
}
```

브라우저 호환성 적용을 위한 패키지라고 하는데, 본인에겐 효과가 없었다.

## **scroll 이벤트를 통한 스크롤 이동 적용**

스크롤만 이용해서 기능을 적용할 생각이었기에 직접 만들기로 했다.

addEventListener를 통해 스크롤 이벤트를 감지해 주는 hook을 만들어줬다.

```typescript
// 스크롤 위 아래 여부 확인
import { useState, useEffect, useRef } from "react";

interface MutableRefObject<T> {
  current: T;
}

export const useScroll = () => {
  const [scrollCheck, setScrollCheck] = useState("");
  const prevScrollPos: MutableRefObject<number> = useRef(0);

  useEffect(() => {
    const handleScroll = () => {
      const currentScrollPos = window.pageYOffset; // window객체의 pageYOffset 를 통해 현재 스크롤 위치 저장
      if (currentScrollPos > prevScrollPos.current) {
        // 스크롤 위치에 따른 스크롤 진행 방향 검증
        setScrollCheck("DOWN");
      } else {
        setScrollCheck("UP");
      }
      prevScrollPos.current = currentScrollPos; // 사용된 현재 스크롤 위치를 다음 이벤트 비교대상으로 저장
    };

    window.addEventListener("scroll", handleScroll); // event 등록
    return () => {
      window.removeEventListener("scroll", handleScroll); // event clear
    };
  }, [prevScrollPos]);
  return {
    scrollCheck, // up/down 여부 return
  };
};

// hook 사용 컴포넌트
import { useScroll } from "@/hooks/useScroll";
const { scrollCheck } = useScroll();
useEffect(() => {
  if (scrollCheck === "UP") {
    console.log("scroll UP");
  }
  if (scrollCheck === "DOWN") {
    console.log("scroll DOWN");
  }
}, [scrollCheck]);
```

원하는 값이 잘 나오는 것을 볼 수 있다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FF7CNJ%2Fbtr5QzP3p9N%2FErlbv8julxnc1PKZSGRC71%2Fimg.png)

> 스크롤 이벤트 특성상 한 번 휠을 돌릴 때마다 많은 호출이 일어나기 때문에 필요한 경우에만 사용될 수 있도록 setTimeout 등을 통해 적용하고자 하는 코드에 맞게 함수 실행을 조절해줘야 한다.

```typescript
import { useState, useEffect, useRef } from "react";
import { scrollToSmoothly } from "@/components/profile/SmoothScroll";
import { useScroll } from "@/hooks/useScroll";
const { scrollCheck } = useScroll();
const scrollRef = useRef({
  // window.innerHeight 값 저장
  height: 0,
});

const smoothScrollHandler = () => {
  let maxHeight = window.innerHeight * 6; // 최대 스크롤 길이
  let currentHeight = scrollRef.current.height; // 현재 스크롤 저장
  if (scrollCheck === "UP" && currentHeight !== 0) {
    // scroll up이고 맨 위가 아닐 때
    scrollRef.current.height -= window.innerHeight; // useRef에 이동할 height 조정
    scrollToSmoothly(scrollRef.current.height, 500); // 이동할 height까지 500ms동안 이동시킬 함수 (requestAnimationFrame 사용)
  } else if (scrollCheck === "DOWN" && currentHeight !== maxHeight) {
    // scroll이 down이고 맨 아래가 아닐 때
    scrollRef.current.height += window.innerHeight; // 상기 동일
    scrollToSmoothly(scrollRef.current.height, 500);
  }
};

useEffect(() => {
  smoothScrollHandler();
}, [scrollCheck]); // useScroll()을 통해 구분한 UP/Down이 변경될 때마다 실행
```

위의 함수를 실행하면 아래와 같이 그나마 정상 작동하는 모습을 볼 수 있다.

![image](https://blog.kakaocdn.net/dn/cpwxY9/btr5NJNGHOP/34qTHrvGprHknp2jmkpkpK/img.gif)

## **a 태그를 통한 스크롤 이동**

a 태그의 href 속성을 이용해 간단하게 스크롤을 이동시키는 방법도 있다.

```javascript
<ProfileContainer>
  <NavBtn>
    <Link href="#box1">1번박스로 이동</Link> // nextjs에서 Link는 a태그의 역할을
    한다.
    <Link href="#box2">2번박스로 이동</Link> // href에 스크롤을 이동시킬 'ID'를 입력하고
    클릭하면
    <Link href="#box3">3번박스로 이동</Link> // 해당 ID요소로 스크롤을
    이동시킨다.
    <Link href="#box4">4번박스로 이동</Link>
    <Link href="#box5">5번박스로 이동</Link>
    <Link href="#box6">6번박스로 이동</Link>
  </NavBtn>
  <TestContainer1 id="box1" />
  <TestContainer2 id="box2" />
  <TestContainer3 id="box3" />
  <TestContainer4 id="box4" />
  <TestContainer5 id="box5" />
  <TestContainer6 id="box6" />
</ProfileContainer>
```

---

**참조**

**scroll 메서드**

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

**requestAnimationFrame**

https://developer.mozilla.org/ko/docs/Web/API/window/requestAnimationFrame

https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp


React/Javascript 부드러운 스크롤 이동 적용

react smooth scroll


# **React state와 LifeCycle**

> 함수형 컴포넌트와 class형 컴포넌트의 LifeCycle이 어떻게 되는지 간단하게 비교해 보는 글이다.

## 클래스형 컴포넌트와 생명주기 메서드

### 1. Mount(컴포넌트가 처음 실행될 때)

- state, context, defalutProps 저장
- componentWillMount - 안전하지 않은 접근
- render
- componentDidMount - DOM 접근 가능

### 2. Props Update(프롭스가 업데이트될때)

- componentWillReceiveProps - 사용 종료
- shouldComponentUpdate
- componentWillUpdate - 사용 종료
- render
- componentDidUpdate - DOM 접근 가능

### 3. State Update (스테이트가 업데이트됐을 때)

- shouldComponentUpdate
- componentWillUpdate - 사용 종료
- render
- componentDidUpdate - DOM 접근 가능

**사실상 componentWillReceiveProps와 componentWillUpdate의 사용 종료로 state와 props가 업데이트될 때 동일하게 작동한다.**

### 4. Unmount (컴포넌트가 제거되는 것)

- componentWillUnmount

사용 종료의 기준은 아래와 같다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb0qQTJ%2Fbtr5h96VtyB%2FqLpFZAk7aybC21CEWPD9H1%2Fimg.png)

## 함수형 컴포넌트와 useEffect 훅

### 컴포넌트의 실행

- 함수형 컴포넌트 호출

- 함수형 컴포넌트의 내부에서 실행

- return()으로 화면에 렌더링

- 생명주기 메서드 대신 useEffect를 통한 비슷한 처리 가능

### dependency에 따른 useEffect의 실행

- deps 값이 없는 경우 : 화면이 렌더링 된 이후 수행이 되며, 리렌더링이 발생할 때마다 다시 실행

- deps 값이 빈 배열인 경우 : 첫 렌더링 완료 후 1회만 실행

- deps 값이 존재하는 경우 : 첫 렌더링 완료 후 1회 실행 && deps 값이 변경되었을 경우마다 실행

```javascript
// dep X
useEffect(() => {
  // effect
  return () => {
    // cleanup
  };
});

// dep []
useEffect(() => {
  return () => {};
}, []);

// dep [some dep...]
useEffect(() => {
  return () => {};
}, [dep]);
```

**[Mounting]** useEffect() - 컴포넌트 렌더링 이후 실행

- dep 설정에 따라 실행됨

**[Updating]** useEffect() - 컴포넌트 내에서 변화가 발생했을 경우 실행

- 부모 컴포넌트의 리렌더링, 부모로부터의 props값 변화, 해당 컴포넌트 내에서 state 변경 등

**[Unmounting]** useEffect() - 컴포넌트 내에서 DOM을 제거할 때 실행되는 메서드

- 컴포넌트의 DOM이 제거될 때 수행되며 useEffect 내부의 return 값이 사용됨

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbryvuq%2Fbtr5pFcEsKC%2FIUUp45qfkl3kWGMGsXLoF0%2Fimg.png)

**위와 같이 컴포넌트를 여닫는 페이지가 있다고 가정했을 때, console을 통해 대략적인 흐름을 확인해 볼 수 있다.**

### **Class형 컴포넌트**

**컴포넌트가 처음 실행될 때**

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FOvMHN%2Fbtr5nGi34Pf%2Fr7cGOBhis0thuYoKgE5Y81%2Fimg.png)

**state가 변경될 때 (props가 변경될 때와 동일)**

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FD45Ra%2Fbtr5gtxPbHC%2FBcyreT9Rmknfdukr6PuUMK%2Fimg.png)

**컴포넌트가 제거될 때**

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F6mDAw%2Fbtr5qsKSrcJ%2FSzo6Rjkm0liLDy3wCZZ27k%2Fimg.png)

### **함수형 컴포넌트**

**컴포넌트가 처음 실행될 때**

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F3fXKy%2Fbtr5paDZhii%2FxGLf5vByXzPMT1jphHzBkK%2Fimg.png)

**컴포넌트가 업데이트될 때**

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F7vKwD%2Fbtr5paYhomj%2F5iPCpcpuRTIKbpr0dFNNO1%2Fimg.png)

> 콘솔에 출력된 것과 같이, useEffect의 return 이후 부분은 componentWillUnmount와 비슷하지만, 컴포넌트가 다시 렌더링 되기 전마다 다시 실행된다.

**컴포넌트가 제거될 때**

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb5feUj%2Fbtr5sdzGrHx%2F1FTXMaZBnR6FmKQmslJRK1%2Fimg.png)

컴포넌트가 제거될 때는 componentWillUnmount처럼 useEffect의 return 부분이 실행되는 것을 볼 수 있다.

사용된 코드

```javascript
// Lifecycle.jsx

import { useState } from "react";
import { FunctionComponent } from "./FunctionComponent";
import { ClassComponent } from "./ClassComponent";

export const Lifecycle = () => {
  const [fnOpen, setFnOpen] = useState(false);
  const [classOpen, setClassOpen] = useState(false);
  const effectComponentHandler = num => {
    if (num) {
      setFnOpen(!fnOpen);
    } else {
      setClassOpen(!classOpen);
    }
  };

  return (
    <div>
      <p>Fn component / Class component</p>
      <button onClick={() => effectComponentHandler(1)}>함수 open/close</button>
      <button onClick={() => effectComponentHandler("")}>
        클래스 open/close
      </button>
      {fnOpen ? <FunctionComponent some1={1} some2={2} some3={3} /> : null}
      {classOpen ? <ClassComponent some1={1} some2={2} some3={3} /> : null}
    </div>
  );
};
```

```javascript
// FunctionComponent.jsx

import { useState, useEffect } from "react";

export const FunctionComponent = props => {
  console.log("컴포넌트 렌더링", props);
  const [count, setCount] = useState(0);
  useEffect(() => {
    // effect
    if (count === 0) {
      console.log(`useEffect 첫 등장`);
    } else {
      console.log(`useEffect 다시 등장 count: ${count}`);
    }
    return () => {
      // cleanup
      console.log(
        "useEffect 퇴장 --- componentWillUnmount와 비슷하지만 리렌더링마다 사용됨",
      );
    };
  }, [count]);

  const plus = () => {
    setCount(prev => prev + 1);
  };
  const minus = () => {
    setCount(prev => prev - 1);
  };

  return (
    <div>
      <p>함수형 컴포넌트</p>
      <span>{count}</span>
      <button onClick={plus}>+</button>
      <button onClick={minus}>-</button>
      <p>Props 받기</p>
      <div>props1 = {props.some1}</div>
      <div>props2 = {props.some2}</div>
      <div>props3 = {props.some3}</div>
    </div>
  );
};
```

```javascript
// ClassComponent.jsx

import { Component } from "react";

export class ClassComponent extends Component {
  constructor(props) {
    super(props);
    // Class형 컴포넌트의 state는 무조건 객체 형태여야 한다.
    this.state = {
      counter: 0,
    };
    console.log(
      "Mount - 컴포넌트가 처음 실행될 때 state, context, defalutProps 저장",
      props,
    );
  }
  plus = () => {
    this.setState(state => ({ counter: state.counter + 1 }));
  };
  minus = () => {
    this.setState(state => ({ counter: state.counter - 1 }));
  };

  componentWillMount() {
    console.log("componentWillMount");
  }
  componentDidMount() {
    console.log("componentDidMount - DOM 접근 가능");
  }
  componentDidUpdate() {
    console.log("componentDidUpdate");
  }
  shouldComponentUpdate() {
    console.log("shouldComponentUpdate - state or props 업데이트");
    return true;
  }
  componentWillUnmount() {
    console.log("componentWillUnmount");
  }

  render() {
    return (
      <div>
        <p>Class형 컴포넌트</p>
        <span>{this.state.counter}</span>
        <button onClick={this.plus}>+</button>
        <button onClick={this.minus}>-</button>
        <p>Props 받기</p>
        <div>props1 = {this.props.some1}</div>
        <div>props2 = {this.props.some2}</div>
        <div>props3 = {this.props.some3}</div>
      </div>
    );
  }
}
```

---

참조

https://ko.reactjs.org/docs/state-and-lifecycle.html

https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html


React 함수형 컴포넌트와 Class형 컴포넌트 생명주기

react component lifecycle


> 유저에게 UI를 빠르게 제공하기 위해서는 컴포넌트의 렌더링을 최소화해 성능을 향상시킬 필요가 있다. 이를 위해 React.memo()에 대한 간단한 사용법을 기록해본다.

# 1. React.memo()

컴포넌트가 React.memo()로 래핑될 때, React는 컴포넌트를 렌더링하고 결과를 Memoizing한다.

그리고 다음 렌더링이 일어날 때 props가 값다면, React는 Memoizing된 내용을 재사용한다.

## 사용법

```javascript
import React from "react";

export const MemoTest = ({ someProps }) => {
  console.log("Memo test, props 바뀔때만 콘솔 작동");
  return (
    <div style={{ border: "1px solid black" }}>
      <p>MemoTest 컴포넌트</p>
      <p>props가 바뀔때만 렌더링</p>
      <span>count와 연동된 props: {someProps}</span>
    </div>
  );
};

// 다른 컴포넌트에서 불러올 때, 해당 컴포넌트를 import 해주면 된다.
export const MemoTestComponent = React.memo(MemoTest);
```

## 사용 예시

```javascript
export const TestApp = () => {
  const values = useContextValue();
  const update = useContextUpdate();
  const [count, setCount] = useState(0);
  console.log("최상위 컴포넌트 : 렌더링 될때마다 콘솔 작동");

  const contextHandler = () => {
    values === "someData" ? update("dataSome") : update("someData");
  };

  return (
    <div style={{ border: "1px solid black" }}>
      <NormalComponent />
      <MemoTestComponent someProps={count} />
      <button
        onClick={() => {
          setCount(pre => pre + 1);
        }}
      >
        +count버튼
      </button>
      <button
        onClick={() => {
          setCount(pre => pre - 1);
        }}
      >
        -count버튼
      </button>
      <div>
        <p>context value</p>
        <span>value : {values}</span>
        <button onClick={contextHandler}>context 변경 버튼</button>
      </div>
    </div>
  );
};
```

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FVQkSV%2Fbtr37vCBXzm%2FVXiqfYdD4H2FTcw3tGVFzk%2Fimg.png)

위 이미지는 TestApp 코드의 초기 화면이다.

모든 컴포넌트가 첫 렌더링을 거쳐 각각 콘솔을 찍어내고 있다.

### TestApp의 count state는 MemoTest 컴포넌트에 props로 전달해주고 있기 때문에 React.memo()의 효과는 사용되지 않고, 일반 컴포넌트와 마찬가지로 TestApp count state가 변경될 때마다 렌더링되는 것을 볼 수 있다.

![image](https://blog.kakaocdn.net/dn/Hl6oT/btr4gSJ05tT/kipvw3VkehYfnxf2Pbq780/img.gif)

### 하지만 contextAPI처럼 MemoTest의 props와 연관되지 않은 다른 방식을 통해 통해 리렌더링을 발생시키는 경우라면, memoTest 컴포넌트의 props가 변경되지 않기 때문에 MemoTest는 렌더링을 발생시키지 않는다.

![image](https://blog.kakaocdn.net/dn/cmaheq/btr36GRW8J1/uhzNP5d6ymqDxVDGFK4Ay1/img.gif)

> contextAPI의 기본 사용법 : https://lee-yo-han.github.io/react/react-context-api

---

## 1-1 - props 동등 비교 커스터마이징

React.memo()는 props 혹은 props의 객체를 비교할 때 얕은 비교를 하기 때문에, 비교 방식을 수정하고 싶다면 React.memo() 두 번째 매개변수로 비교함수를 만들어 수동으로 연산 후 넘겨주면 된다.

```javascript
import React from "react";

export const MemoTest = ({ someProps }) => {
  console.log("Memo test, props 바뀔때만 콘솔 작동");
  return (
    <div style={{ border: "1px solid black" }}>
      <p>MemoTest 컴포넌트</p>
      <p>props가 바뀔때만 렌더링</p>
      <span>count와 연동된 props: {someProps}</span>
    </div>
  );
};

const propsAreEqual = (prev, next) => {
  return (
    prev.someProps === next.someProps
    // 다른 props들이 있는 경우 &&을 통해 연산 추가
  );
};

export const MemoTestComponent = React.memo(MemoTest, propsAreEqual);
```

# 2. React.memo()는 언제 사용해야 하는가?

### - 함수형 컴포넌트가 같은 props로 자주 렌더링 될거라 예상될 경우

props가 변경되지 않는 경우에도 상위 컴포넌트의 지속적인 렌더링에 의해 하위 컴포넌트의 불필요한 렌더링이 예상되는 경우라면 React.memo()를 통해 오직 props의 변화에만 반응시켜주는 것이 효율적이다.

### - 무겁고 비용이 큰 연산이 있는 경우

한 번 렌더링 될 때 큰 연산이 발생한다고 했을때 불필요한 렌더링이 일어난 경우 연산에 사용되는 비용이 낭비될 수 있기 때문에 이러한 경우 또한 React.memo()를 통한 memoization이 적절하다고 볼 수 있다.

# 3. React.memo()를 언제 사용하지 말아야 하는가?

### - 위에 언급한 상황과 맞지 않는 경우 React.memo()를 사용할 필요가 없을 가능성이 높다.

경험적으로 ㅅ어능적인 이점을 얻지 못한다면 memoization을 사용하지 않는 것이 좋다. 성능 관련 변경이 잘못 적용된다면 성능이 오히려 악화될 수 있다.

### - 기술적으로는 가능하지만 클래스 기반의 컴포넌트를 React.memo()로 래핑하는 것은 적절하지 않다.

클래스 기반의 컴포넌트에서 memoization이 필요하다면, pureComponent를 확장하여 사용하거나, shouldComponentUpdate() 메서드를 구현하는 것이 적절하다.

### - props가 자주 바뀌는 경우

props가 자주 바뀌는 경우도 React.memo()로 래핑하더라도 이전 props와 다음 props를 비교 함수를 통해 비교할때 거의 false를 반환할 것이기 때문에 props가 자주 바뀌는 경우도 React.memo()의 사용이 적절하지 않다.

## 결론

> React.memo는 memoization의 장점을 얻게 해주는 좋은 도구이지만, 렌더링 방지를 위해 memoization에만 의존하면 안된다.

---

## 참조

https://dmitripavlutin.com/use-react-memo-wisely/

https://ui.toast.com/weekly-pick/ko_20190731


React.memo() 를 통한 컴포넌트 최적화

react memo


# useCallback이란?

> 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용하는 함수 메모이제이션용 React hook이다.

```javascript
const memoFn = useCallback(() => {}, [dep]);
```

첫번째 인자의 함수를 두번째 인자의 종속성 배열 내의 값이 변경될 때까지 저장하여 재사용할 수 있도록 해준다.

javascript에서 함수(function () {} or () => {})는 객체 리터럴( {...} )이 항상 새 객체를 생성하는 것과 유사하게 항상 다른 함수를 생성한다. 그렇다면 함수를 props 로 내려준다고 하면 하위 컴포넌트는 props가 변경되었다고 인식하게 된다.

그렇게되면 React.memo를 이용한 최적화가 원하는대로 작동하지 않을 수 있기 때문에 이러한 점을 useCallback이 메꿔줄 수 있게 된다.

> 종속성 배열이 없는 경우 매번 새 함수를 반환하기 때문에 항상 dependencises 배열을 포함해줘야 한다. (특정 상황에서 빈 배열 [] 은 있을 수 있지만, 배열 자체가 없으면 의미가 없어진다.)

## 사용예

```javascript
const add = useCallback(() => x + y, [x, y]);
```

# useCallback과 React.memo를 통한 최적화

```javascript
// 최상단 (1번) 컴포넌트
import { useState } from "react";
import { UseCallbackChildren } from "./UseCallbackChildren";

export const UseCallbackTest = () => {
  const [isDark, setIsDark] = useState(false);
  return (
    <>
      <label>
        <input
          type="checkbox"
          checked={isDark}
          onChange={e => setIsDark(e.target.checked)}
        />
        Dark mode
      </label>
      <hr />
      <UseCallbackChildren
        productId={123}
        referrer="wizard_of_oz"
        theme={isDark ? "dark" : "light"}
      />
    </>
  );
};

// 중간 (2번) 컴포넌트
import React, { useCallback } from "react";
import { CallbackForm } from "./UseCallbackForn";

export const UseCallbackChildren = ({ referrer, productId, theme }) => {
  const post = (url, data) => {
    console.log("POST /" + url);
    console.log(data);
  };

  const handleSubmit = useCallback(
    orderDetails => {
      post("/product/" + productId + "/buy", {
        referrer,
        orderDetails,
      });
    },
    [productId, referrer],
  );

  return (
    <div
      style={
        theme === "dark" ? { backgroundColor: "black", color: "white" } : {}
      }
    >
      <CallbackForm onSubmit={handleSubmit} />
    </div>
  );
};

// 하위 (3번) 컴포넌트
import React, { useState } from "react";

export const UseCallbackForm = ({ onSubmit }) => {
  const [count, setCount] = useState(1);

  console.log("강제로 느리게");
  let startTime = performance.now();
  while (performance.now() - startTime < 500) {
    // Do nothing for 500 ms to emulate extremely slow code
  }

  const handleSubmit = e => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const orderDetails = {
      ...Object.fromEntries(formData),
      count,
    };
    onSubmit(orderDetails);
  };

  return (
    <form
      onSubmit={handleSubmit}
      style={{ display: "flex", flexDirection: "column", width: "200px" }}
    >
      <p>
        <b>
          Note: <code>ShippingForm</code> is artificially slowed down!
        </b>
      </p>
      <label>
        Number of items:
        <button type="button" onClick={() => setCount(count - 1)}>
          -
        </button>
        {count}
        <button type="button" onClick={() => setCount(count + 1)}>
          +
        </button>
      </label>
      <label>
        Street:
        <input name="street" />
      </label>
      <label>
        City:
        <input name="city" />
      </label>
      <label>
        Postal code:
        <input name="zipCode" />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
};

export const CallbackForm = React.memo(UseCallbackForm);
```

위 코드를 보면, 최상단(1)에 있는 다크모드는 중간(2) 컴포넌트까지만 전달해주고, 중간(2) 컴포넌트는 하위(3) 컴포넌트에 useCallback 함수만 전달해주고 있다.

useCallback은 함수를 캐시해 재사용할 수 있도록 도와주기 때문에 종속성이 변하지 않으면 계속 재사용할 수 있다. 즉, 동일한 props로써 함수를 하위(3) 컴포넌트에 내려주고 있기 때문에 하위 컴포넌트의 렌더링에 영향이 없다.

이 상태로 코드를 작동시키면 하위(3) 컴포넌트에 있는 count를 동작할때마다 느려지겠지만, 다크모드와 submit 이벤트에는 영향을 주지 않는다.

![image](https://blog.kakaocdn.net/dn/bEYsKw/btr4gSLc8BG/hJKpnBKbFziku3fjI6hphK/img.gif)

만약 하위(3) 컴포넌트의 React.memo()를 없애게 되면 submit 이벤트에는 영향이 없지만, 최상위(1) 컴포넌트의 다크모드 state 변경에 의해 하위(3) 컴포넌트의 렌더링이 일어나게 되어 다크모드와 count의 동작이 느려지는걸 볼 수 있다.

![image](https://blog.kakaocdn.net/dn/mfxA0/btr4iTijPZD/XNzKmFrScoUZ6qSyiCMV2K/img.gif)

자세히 보면 콘솔이 먼저 찍히고 0.5초정도 뒤에 동작하는 것을 볼 수 있다.

# useMemo와의 차이점

> useMemo는 함수의 호출 결과를 캐시하고, useCallback은 함수 자체는 캐시한다. 그러므로 useCallback은 useMemo와 달리 제공한 함수를 호출하지 않는다. 대신 사용자가 제공한 함수를 캐시하기 때문에 불필요한 렌더링 없이 함수를 전달할 수 있다.

## useMemo와 useCallback의 동시 사용

```javascript
function useCallback(fn, dependencies) {
  return useMemo(() => fn, dependencies);
}
```

## useCallback이 유용한 경우

- useCallback을 통해 props로 하위 컴포넌트에 넘겨줄때
- useEffect 등 다른 hook의 종속성으로 이용할때
- 종속성 변화가 적고 재사용이 용이할때

## useCallback 남용 시 문제점

> 모든 함수를 useCallback으로 감싸게 되면 컴포넌트가 리렌더 될 때마다 모든 함수가 다시 재생성될 필요가 있는지 검사하는 연산이 수행된다. 따라서 보통은 특정 함수가 props로 전달되어 불필요한 컴포넌트 리렌더를 유발할 때에만 적용하는 것이 좋다.

### memo, useMemo, useCallback 등 어떤 Memoization이나 부적절하게 사용할 경우 오히려 성능이 떨어질 수 있기 때문에 상황에 맞게 적절하게 사용하는 것이 좋은 것 같다.

---

참조: https://beta.reactjs.org/reference/react/useCallback


useCallback을 이용한 컴포넌트 최적화하기

react usecallback


# useMemo란?

> useMemo는 React.memo(), useCallback과 같이 컴포넌트를 최적화하기 위한 훅 중 하나이다.

# useMemo를 사용하는 이유

React의 컴포넌트는 부모 컴포넌트가 렌더링되거나, 자신의 state변경, 상위 컴포넌트에서 내려받는 props가 변경될 때마다 다시 렌더링된다. 그런데 내려받는 props나 state가 여러 가지일때 한 개 props의 변경으로 모든 값이 다시 계산되는 경우 불필요한 비용이 누적되게 된다.

useMemo는 이러한 현상을 효율적으로 전환하기 위한 hook이다.

## useMemo를 적용하기 전

```javascript
// 상위 컴포넌트
import { useState } from "react";
import { UseMemoChildren } from "./UseMemoChildren";

export const UseMemoTest = () => {
  const [number, setNumber] = useState(0);
  const [text, setText] = useState("");

  const changeNumber = e => {
    setNumber(e.target.value);
  };
  const changeText = e => {
    setText(e.target.value);
  };

  return (
    <div>
      <p>UseMemoText</p>
      <div>
        <p>number</p>
        <input type="number" onChange={changeNumber} value={number} />
      </div>
      <div>
        <p>text</p>
        <input type="text" onChange={changeText} value={text} />
      </div>
      <UseMemoChildren number={number} text={text} />
    </div>
  );
};

// 하위 컴포넌트
export const UseMemoChildren = ({ number, text }) => {
  const getNumber = number => {
    console.log("숫자 변경");
    return number;
  };

  const getText = text => {
    console.log("글자 변경");
    return text;
  };

  const showNumber = getNumber(number);

  const showText = getText(text);

  return (
    <div>
      <p>Memo Child Component</p>
      <p>number: {showNumber}</p>
      <p>text: {showText}</p>
    </div>
  );
};
```

상위 컴포넌트는 각 input 값이 변경될 때마다 그 값을 저장해 하위 컴포넌트로 내려준다.

하위 컴포넌트는 내려받은 props를 통해 화면에 노출시켜줄 값을 return해주는 역할을 한다.

![image](https://blog.kakaocdn.net/dn/9hqzj/btr4hQeyTmU/PzYhcCiwuZq08zOkhBqeWk/img.gif)

이 상태에서 input을 업데이트하면 숫자를 바꾸든 텍스트를 바꾸든 getNumber 함수와 getText 함수 둘 다 다시 연산되는 것을 볼 수 있다.

이런 경우 변경된 props에 대해서만 다시 연산될 수 있도록 useMemo를 적용해볼 수 있다.

## useMemo 사용법

```javascript
const cachedValue = useMemo(calculateValue, dependencies);
```

### 적용 예시

```javascript
// 하위 컴포넌트

import { useMemo } from "react";

export const UseMemoChildren = ({ number, text }) => {
  //   console.log("useMemoChildren start");
  const getNumber = number => {
    console.log("숫자 변경");
    return number;
  };

  const getText = text => {
    console.log("글자 변경");
    return text;
  };

  const showNumber = useMemo(() => {
    return getNumber(number);
  }, [number]);

  const showText = useMemo(() => {
    return getText(text);
  }, [text]);

  return (
    <div>
      <p>Memo Child Component</p>
      <p>number: {showNumber}</p>
      <p>text: {showText}</p>
    </div>
  );
};
```

위와 같이 useMemo를 적용하고 나면 다음과 같이 useMemo 적용 이후 변경된 props에 대한 연산만 처리해주는 것을 볼 수 있다.

![image](https://blog.kakaocdn.net/dn/4Vcyh/btr4hPz1xwm/0zNRNCdyJKwpsWk2LU73KK/img.gif)

> useMemo 마지막의 dependencies [ ] 배열은 필수적으로 어떤 값을 변경에 반응할 것인지 포함시켜줘야 한다.

# 연산 비용이 비싸다는 기준은?

React 공식 사이트에서 권장하는 useMemo 적용 기준은 연산에 소요된 시간이 1ms 이상일 경우로 안내하고 있다.

console.time/timeEnd 등을 통해 useMemo를 적용하고자 하는 함수의 총 연산시간을 도출해볼 수 있다.

```javascript
const getText = text => {
  console.time("memo");
  console.log("글자 변경");
  console.timeEnd("memo");
  return text;
};
```

위와 같이 코드 작성 후 text를 변경해보면 다음과 같은 콘솔을 볼 수 있다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F8mGtS%2Fbtr4iU19jHE%2FH0huW2SytbAtalR3urepr0%2Fimg.png)

> 입력하는 계산이 눈에 띄게 느리고, 종속성이 거의 변경되지 않는 경우에는 useMemo를 이용한 최적화가 적합하지만, 컴포넌트 구조 변경과 상태 관리의 최소화, state를 업데이트하는 Effect의 불필요한 종속성을 제거하거나 특정 함수들을 별도로 관리하는 방법이 useMemo보다 적합할 수 있다.

> 실제로 React의 성능 문제 대부분은 Effect에서 발생하는 업데이트 체인으로 인해 발생한다고 한다.

---

참조 : https://beta.reactjs.org/reference/react/useMemo


useMemo를 이용한 컴포넌트 최적화하기

react usememo


# ContextAPI

> 간단한 데이터의 변화를 props drilling 없이 전역적으로 관리해주기 위해 ContextAPI를 사용해볼 수 있다.

## 사용법

## 1. context component 생성

```javascript
// context.jsx
import { createContext, useContext, useState } from "react";

// context 생성
const AnyContextValue = createContext();
const AnyContextUpdate = createContext();

// useContext 생성
export const useContextValue = () => {
  const context = useContext(AnyContextValue);
  return context;
};
export const useContextUpdate = () => {
  const update = useContext(AnyContextUpdate);
  return update;
};

// context Component 생성
// children props를 Contextname.provider로 감싸준다.
export const SomeContext = ({ children }) => {
  const [someData, setSomeData] = useState("someData");
  return (
    <AnyContextValue.Provider value={someData}>
      <AnyContextUpdate.Provider value={setSomeData}>
        {children}
      </AnyContextUpdate.Provider>
    </AnyContextValue.Provider>
  );
};
```

## 2. context import

```javascript
import { TestApp } from "./components/blogtest/TestApp";
import { SomeContext } from "./components/context/RenderingContext";

// import된 Context를 적용하고자 하는 컴포넌트들의 최상위에 감싸준다.
function App() {
  return (
    <SomeContext>
      <ChildrenComponent />
    </SomeContext>
  );
}

export default App;
```

## 3. context 사용

```javascript
import { useState } from "react";
// 생성한 useContext import
import { useContextUpdate, useContextValue } from "../context/RenderingContext";

export const ChildrenComponent = () => {
  const values = useContextValue();
  const update = useContextUpdate();

  const contextHandler = () => {
    values === "someData" ? update("dataSome") : update("someData");
  };

  return (
    <div>
      <p>context value</p>
      <span>value : {values}</span>
      <button onClick={contextHandler}>context 변경 버튼</button>
    </div>
  );
};
```

위와 같이 설정이 완료된 후 정상적으로 contextAPI를 사용할 수 있다.

![image](https://blog.kakaocdn.net/dn/d0hnZa/btr35w9FvGX/zDcTOjtXxg23vMKk6LxaM0/img.gif)

> contextAPI는 간단하게 상태를 관리해줄 수 있지만, provider를 전역으로 감쌌을 때 컴포넌트들이 전반적으로 렌더링이 일어날 수 있기 때문에 상황과 구조에 맞게 적절하게 사용해주는 것이 좋다.

---

## 참고 : typescript에서의 contextAPI 사용

### TypeScript에서는 context 초기값 등의 설정이 필요하다.

```typescript
// context component

import { createContext, useContext, useState } from "react";
import { PostType } from "@/types/pages";
import { ProviderProps, ContextType } from ".";

// context 초기화
const initialContext = {
  posts: [],
  setPosts: () => {},
};

// context 생성
const PostContextValue = createContext<PostType[]>(initialContext.posts);
const PostContextUpdate = createContext<ContextType>(initialContext.setPosts);

// useContext 생성
export const useMdContextValue = () => {
  const context = useContext(PostContextValue);
  return context;
};
export const useMdContextUpdate = () => {
  const update = useContext(PostContextUpdate);
  return update;
};

// context component 생성
export const MdContext = ({ children }: ProviderProps) => {
  const [posts, setPosts] = useState<PostType[]>([]);

  return (
    <PostContextValue.Provider value={posts}>
      <PostContextUpdate.Provider value={setPosts}>
        {children}
      </PostContextUpdate.Provider>
    </PostContextValue.Provider>
  );
};

// 다른 컴포넌트에서의 사용
import { useEffect } from "react";
import { useMdContextUpdate } from "@/context/mdContext";

export default function Home({ posts }: { posts: PostType[] }) {
  const update = useMdContextUpdate();

  useEffect(() => {
    if (posts) {
      update(posts);
    }
  }, [posts, update]);
```


react context api


# React Datepicker 사용하기

공식 문서

https://reactdatepicker.com/

### package 설치

```bash
yarn add react-datepicker
```

패키지 설치 후 아래와 같이 import해 사용할 수 있다.

```javascript
import DatePicker from "react-datepicker"; // 데이트픽커 import
import "react-datepicker/dist/react-datepicker.css"; // 데이트픽커 기본 CSS
import { ko } from "date-fns/esm/locale"; // 한국어 변환

export default function DatePickerTest() {
  const [startDate, setStartDate] = useState(new Date());
  const [endDate, setEndDate] = useState(null);

  return (
    <>
      <DatePicker local={ko} />
    </>
  );
}
```

달력은 props 설정을 통해 다양한 방식의 달력을 설정해줄 수 있다.

아래는 범위 지정 달력을 만드는 코드이다.

```javascript
export default function DatePickerTest() {
  const [startDate, setStartDate] = useState(new Date());
  const [endDate, setEndDate] = useState(null);

  const onChange = dates => {
    const [start, end] = dates;
    setStartDate(start);
    setEndDate(end);
  };

  return (
    <DatePicker
      elected={startDate}
      onChange={onChange}
      startDate={startDate}
      endDate={endDate}
      locale={ko}
      selectsRange
      inline
    />
  );
}
```

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F5DkxI%2FbtrMUTz6YZb%2FpYNfcGfYjpM5GZlENLALTk%2Fimg.png)

위 코드는 selectsRange라는 속성의 달력을 이용한다.
다양한 속성은 상단의 공식 페이지 링크를 참고하면 좋다.

## 스타일 적용

custom header 같은 props 옵션 등을 통해 css 스타일을 줄 수 있지만, 스타일이 원하는대로 입히기 어려운 점도 있었고 전체적인 코드가 보기 불편하다는 생각이 들어 styled component를 통해 css를 적용해줬다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FzDzqF%2FbtrMWeKqb6T%2FkKiJfjfF1fP7vPcnWpyHOK%2Fimg.png)

```javascript

const StyledDatePickerWrapper = styled.section`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 380px;
  border-radius: 20px;
  box-shadow: 0 0 5px 0 rgb(71, 181, 255);

  .react-datepicker {
    background-color: white;
    border-color: rgb(198, 232, 255);
    border-radius: 20px;
  }

  /* ... */

```

코드가 길어지더라도 jsx와 철저하게 분리하고 싶다면 이런 방법도 나쁘지 않은 것 같다.


react datepicker


# react-responsive 사용해보기

공식 사이트 : https://yarnpkg.com/package/react-responsive

CSS의 mediaQuery를 사용해볼 수도 있지만, 간편하게 적용할 수 있는 패키지가 있어서 사용해봤다.

### 패키지 설치

```bash
yarn add react-responsive
```

### useMediaQuery 세팅

```javascript
// useMideaQuery.js

import { useMediaQuery } from "react-responsive";

export const Desktop = ({ children }) => {
  const isDesktop = useMediaQuery({
    minWidth: 481,
  });
  return isDesktop ? children : null;
};

export const Mobile = ({ children }) => {
  const isMobile = useMediaQuery({ maxWidth: 480 });
  return isMobile ? children : null;
};
```

위의 경우 모바일과 PC만 나눴지만 대략적인 분기점은 아래와 같이 설정해도 괜찮다

1. 낮은 해상도의 PC, 태블릿 가로 : ~1024px
2. 태블릿 가로 : 768px ~ 1023px
3. 모바일 가로, 태블릿 : 480px ~ 767px
4. 모바일 : ~480

### useMediaQuery 사용

```javascript
// Responsive.jsx

import { Desktop, Mobile } from "../../hooks/useMideaQuery";

export const Responsive = () => {
  return (
    <>
      <Desktop>
        <div>PC화면</div>
      </Desktop>
      <Mobile>
        <div>모바일화면</div>
      </Mobile>
    </>
  );
};
```

편의상 한 컴포넌트에 다 집어넣을 수도 있지만, 모바일과 데스크탑 환경의 view는 아예 다른 경우가 많기 때문에, 코드 관리를 편하게 하기 위해서는 모바일 컴포넌트를 따로 만드는게 더 나을 것 같다는 생각이 든다.


react media query


# 라이브러리 없이 모달창 만들어보기

모달 버튼이 있는 페이지

```javascript
// ModalTest.jsx

import ModalPage from "./ModalPage";
import { useState } from "react";

export default function ModalTest() {
  // 모달을 보여줄지 말지 상태를 관리하는 state를 만들어준다.
  const [showModal, setShowModal] = useState(false);

  // 모달 버튼을 클릭하면 열리고
  const openModal = () => {
    setShowModal(true);
  };
  // 활성화된 모달창 밖을 클릭하면 닫힌다.
  const closeModal = () => {
    setShowModal(false);
  };

  return (
    <>
      <button onClick={openModal}>모달이에옹</button>
      // 모달상태가 true면 ModalPage를 보여주고, 아니면 null // props로 showModal과
      closeModal을 전달한다.
      {showModal === true ? (
        <ModalPage showModal={showModal} closeModal={closeModal} />
      ) : null}
    </>
  );
}
```

모달 컴포넌트

```javascript
import styled from "styled-components";

export default function ModalPage({ showModal, closeModal }) {
  return (
    // 모달 밖을 클릭하면 모달창을 닫게 만든다.
    <StyledModalBackground onClick={closeModal}>
      // stopPropagation은 부모태그로부터의 이벤트 전파를 중지시킨다. // 이
      친구가 없으면 모달창 안쪽을 클릭해도 closeModal이 실행된다.
      <StyledModalContainer onClick={e => e.stopPropagation()}>
        <StyledModal>열린 모달창이에옹</StyledModal>
      </StyledModalContainer>
    </StyledModalBackground>
  );
}

// 위치를 대략 가운대로 정해주고
const StyledModalContainer = styled.div`
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
`;

// 모달 밖 배경색은 우리에게 익숙한 어두운 색으로 만들어주자
const StyledModalBackground = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 0;
  cursor: auto;
`;

// 모달창 사이즈는 용도에 맞춰 설정해준다.
const StyledModal = styled.div`
  width: 400px;
  height: 400px;
  background-color: white;
`;
```

브라우저 화면

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FOLJGf%2FbtrNjUdVndT%2FvgVskBO2xWeRwi01YQPzkk%2Fimg.png)

스타일은 용도에 맞게 다양하게 변경시킬 수 있다.


라이브러리 없이 React Modal 만들기

react modal non library


# useNavigate를 이용한 props 전달

### useNavigate로 다른 페이지의 화면으로 이동할 때, props처럼 값을 넘기는 방법을 사용해볼 수 있다.

```javascript

// 보내는컴포넌트.jsx

import { useNavigate } from "react-router-dom";

const Component1 = () => {
const navigate = useNavigate()

let someDatas = {
	name:"hihi"
    value:"here"
}

return
<div onClick={() => navigate(`/다른페이지주소`,{ state: someDatas });}>
	다른페이지로 이동
</div>
}



// 받는 컴포넌트.jsx

import { useLocation } from "react-router-dom";

const Component2 = () => {
	const location = useLocation();
	console.log(location);
}

```

위와 같이 작성은 아래와 같이 데이터를 받아오는 것을 보여준다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FedpbW9%2FbtrRGwsRGuz%2FKp5GIecYeABXw1FPbGLdsK%2Fimg.png)

하지만 데이터를 받는 페이지가 직접적으로 접속할 수 있는 페이지라면 그렇게 접속한 페이지는 아무 데이터가 없는 화면으로 노출될 수 있기 때문에, 전역 상태를 관리해줄지, 데이터를 넘겨줄지 상황에 알맞는 방식을 적용하는 것이 중요하다.


react navigate props


# FormData 저장 코드 간소화하기

하나의 폼에서 여러 개의 input 값을 변경하기 위해 함수를 만들어 간단하게 코드를 간소화시킬 수 있다.

```typescript
// form.tsx
<Container onSubmit={e => onSubmitHandler(e, dispatch)}>
  <input
    type="text"
    name="profile_url"
    placeholder="https://picsum.photos/id/1/50/50 - 필수 X"
    value={formData.profile_url}
    onChange={e => onChangeHandler(e)}
  />
  <br />
  <input
    type="text"
    name="author"
    placeholder="작성자"
    value={formData.author}
    onChange={e => onChangeHandler(e)}
    required
  />
  <br />
  <textarea
    name="content"
    placeholder="내용"
    value={formData.content}
    onChange={e => onChangeHandler(e)}
    required
  ></textarea>
  <br />
  <input
    type="text"
    name="createdAt"
    placeholder={`${todayDate()}`}
    disabled
    required
  />
  <br />
  <button type="submit">{isEdit ? "수정하기" : "등록"}</button>
</Container>;

// useForm.tsx
const [formData, setFormData] = useState<FormData>({
  profile_url: "",
  author: "",
  content: "",
  createdAt: todayDate(),
});

const onChangeHandler = (e: InputEvent) => {
  let type = e.target.name;
  let value = e.target.value;
  if (type === "profile_url")
    setFormData(prev => ({ ...prev, profile_url: value }));
  if (type === "author") setFormData(prev => ({ ...prev, author: value }));
  if (type === "content") setFormData(prev => ({ ...prev, content: value }));
  setFormData(prev => ({ ...prev, [type]: value }));
};
```

하지만 위와 같이 if문이 많아져 코드의 성능과 가독성을 떨어뜨릴 수 있기 때문에, 아래와 같이 변경해볼 수 있다.

```typescript
// useForm.tsx

const [formData, setFormData] = useState<FormData>({
  profile_url: "",
  author: "",
  content: "",
  createdAt: todayDate(),
});

const onChangeHandler = (e: InputEvent) => {
  const { name, value } = e.target.name;
  setFormData(prev => ({ ...prev, [name]: value }));
};
```

html input의 name 속성을 이용해 setState 코드를 간소화시킬 수 있는 방법이다.


react simple formdata code


# 리액트 스타일 컴포넌트에 hover 적용하기

```typescript
// &:hover를 넣는다.

const ButtonStyle = styled.button`
  &:hover {
    background-color: skyblue;
    color: blue;
  }
`;
```

비슷한 상황에서 a 태그를 사용할때 자동으로 설정되는 스타일도 수정해줄 수 있다.

```typescript
const LinkTag = styled.a`
  /* 밑줄 제거 */
  text-decoration: none;

  /* 마우스를 링크에 올려뒀을 때의 스타일 */
  &:hover {
  }
  /* 아직 방문하지 않은 링크의 스타일 */
  &:link {
  }
  /* 사용자가 방문한 적이 있는(클릭한 이후) 링크의 스타일 */
  &:visited {
  }
  /* 마우스로 링크를 클릭하고 뗄 때까지의 스타일 */
  &:active {
  }
`;
```


react에 styled-components를 이용해 hover 적용하기

react styled components hover


# react form에서 submit 이벤트 방지하기

### submit 이벤트가 발생하면 페이지가 새로고침이 된다.

단순히 페이지가 리프레시 되는 것도 좋은 사용자 경험이 아닌데, 임시로 저장돼있던 데이터(회원가입 정보 등)가 날아가면 React의 작동 방식을 거스를 뿐 아니라 사용자 경험에도 치명적이다.

떄문에 우리는 sumbit 이벤트를 멈춰줄 필요가 있다.

```javascript
const Header = () => {
  const onSubmit = e => {
    e.preventDefault(); // 해당 코드로 이벤트를 멈춰줄 수 있다.
  };

  return (
    <form>
      <input type="text" />
      // 버튼 타입도 submit으로 꼭 변경해준다.
      <button type="submit" onSubmit={e => onSubmit(e)}>
        입력
      </button>
    </form>
  );
};
```

위와 같이 작성하면 같은 폼 안에 있는 경우에 대해 submit 방지가 잘 되는 것을 확인할 수 있다.


form 태그에서 submit 이벤트 방지하기

react submit prevent default


# z-index 미적용시 해결방법

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F2c0QV%2FbtrXD8G7Ar9%2FpCFQ6eujsGgA0bKCKx1kpk%2Fimg.png)

위와 같이 z-index를 999로 적용해도 원하는대로 작동하지 않는 경우를 볼 수 있다.

### MDN 공식 문서 : https://developer.mozilla.org/ko/docs/Web/CSS/z-index

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F8pPBj%2FbtrXCijsq0h%2FkdCdCRUKvZIGe7dk8KPJf0%2Fimg.png)

해당 사진의 마지막 줄의 "자손의 z-index를 자기 외의 바깥 요소와 비교하지 않습니다." 이 부분으로 인한 문제로 생각됐다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fct1Z18%2FbtrXH8zek29%2Fjwx0ckk9YgnPRLS2sM06k0%2Fimg.png)

부모 요소는 부모 요소끼리, 자식 요소는 자식 요소끼리 경쟁하기 때문에, 기존 코드는 이와 같이 HeaderNav 안에 SideMenu가 있어 HeaderNav 내에서만 z-index를 비교하고 있던 것이었다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbUIap4%2FbtrXCicOSRi%2FzWiWf6wrtlUx9aK2uYKK7K%2Fimg.png)

이처럼 SideMenu를 HeaderNav 밖으로 빼주니, 아래와 같이 정상적으로 작동하는 모습을 볼 수 있었다.

### 정상 적용된 화면

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FwMc3x%2FbtrXFupLVFz%2FWH6kLZ1IbRxHnXK2bqkHa0%2Fimg.png)

## z-index가 제대로 작동하지 않을때 참고할만한 사항

1. 부모 요소는 부모 요소끼리 경쟁되고 있는지 확인한다.
2. Element가 static(position 속성의 default 값)이 아닌 position 속성이 설정되어있는지 확인한다.(relative, absolute, fixed, sticky)
3. opacity나 transform과 같은 css 속성이 설정돼있는지 확인한다. 해당 css요소가 설정돼있다면 1번의 기준에 맞춰 코드를 다시 작성해준다.

이정도면 버그를 수정하는데 충분하지만 더 싶도 깊은 내용은 아래를 참고해보면 좋을 것 같다.

참조 : https://coder-coder.com/z-index-isnt-working/


z-index가 올바르게 적용되지 않을때 적용해볼 수 있는 방법