I

풋살

정말 오랜만에 풋살을 했다. 친구가 하자고 해서 친구의 친구들과 하는 줄 알았는데 플랩이라는 어플을 통해 모르는 사람들과 같이 했다.
오랜만에 풋살을 하니 발목에 힘도 잘 안들어가고 다리도 자꾸 풀렸다. 그래도 재밌었다^^
발이 아프다 싶었는데 역시나 집에와서 보니 물집 엄청 잡혀있고 왼발은 다 까져있었다. 갯발 맨발로 들어갔을때 이리됐었는데.. 평발러의 삶은 힘들다

Study

React

스케줄러 문제

useEffect, 혹 useRef를 통해 해결한다.
로그인 창에서 'login'버튼을 클릭했을때 유효성검사를 하고자 했다. 하지만 스케쥴러 이슈로 이전값을 검사하면서 원하는 결과가 나오지 않았다.

useEffect(() => {
    setTryNum((prevState) => prevState + 1);
    if (isMounted1.current >= 2) {
      if (id.trim() === "") {
        setIdError("이름을 입력하랑께요");
        setIdReady(false);
      } else if (!/^[A-Za-z0-9]{1,10}$/.test(id.trim())) {
        setIdError(
          "영문자와 숫자로 이루어진 10자리 이하 문자열을 입력해주세요"
        );
        setIdReady(false);
      } else {
        setIdError("");
        setIdReady(true);
      }
    } else isMounted1.current += 1;
  }, [id]);

useEffect()를 사용해 매 입력마다 state값이 변경되게 하여 해결했다.
처음엔 의존성에 id,pw을 동시에 관리했는데 그렇게 했더니 id만 입력했는데 pw에 에러가 떠서 분할해주었다.
마지막으로 있던 문제는 아무것도 입력하지 않은상태에서 login버튼을 눌렀을때 어떻게 처리할 것인가 였다. 처음부터 false처리를 하면 login창이 구현되자마자 틀렸다고 표시가 나오고, true처리를 하자니 login버튼을 누르면 아무입력도 받지 않은상태에서 로그인이 되었다.

const [tryNum, setTryNum] = useState(0);
const isMounted1 = useRef(0);
const isMounted2 = useRef(0);

state와 useRef를 통해 해결했다. 최초실행시 useRef를 통해 에러창이 안뜨도록 설정하고, tryNum을 통해 아직 입력이 이루어지지 않았다면 login버튼을 눌렀을 때 다음화면으로 넘어가지 못하도록 설정했다.

참고로 useEffect내부에서도 스케쥴러가 작동해서 내부에서 뭔가 행동을 하려고 하니 정상적으로 작동하지 않았다.

컴포넌트 합성

컴포넌트 합성, 디스트럭쳐할당, 스프레드문법 들의 이해부족으로 문제가 발생했다. 원하는대로 작동이 안되는 것도 있었고, {...props}가 도대체 어떻게 되는건지 이해도 못했다.

//1
export default function Input({ ...props }) {
  return <input className="login_input" {...props} />;
}

처음 마주한 문제는 속성중복이였다. props엔 className이 있는데, 다음과 같이 선언 시 className이 중복으로 선언되 login_input 클래스는 무시되었다.

//2
export default function Input({...props}) {
  return (
    <input
      className={`${className} login_input`}
      type={type}
      placeholder={placeholder}
      value={value}
      onChange={onChange}
    />
  );
}

처음 생각한 해결방안은 이거였다. 하지만 className, type등이 선언되어있지 않았다고 오류가 떴다.

//3
export default function Input(props) {
  return (
    <input
      className={`${props.className} login_input`}
      type={props.type}
      placeholder={props.placeholder}
      value={props.value}
      onChange={props.onChange}
    />
  );
}

그래서 다음과 같이 해결했다. 원인은 뭐였을까?
아, 중복문제는 ``을 통해 해결했다.

{...props} rest, 나머지를 가져온 것으로 정확한 이름을 모른다. 그래서 그 안에 있는 요소를 꺼내 올 수 없다. 1번에서는 따로 선언된 className은 무시된다고 치면 Input을 호출하는 컴포넌트에서 선언된 속성들이 전부 나머지처리되어 Input의 속성들이 된다. 만약 1번에서 이 문제를 해결해고자 했다면, {className,...props}를 하면 되었다. className은 이름을 불러서 정의했고, 나머지는 rest연산이 이루어진 것이다. 2번 역시 rest연산을 했기때문에, 우항에서 부른 이름들은 전부 정의되지 않은 이름들이다. 3번은 props라는 이름의 객체를 가져왔기 때문에 멤버변수가 존재한다.

날짜출력

날짜 출력을 위해 ate-fns를 사용했다.

import { format, differenceInDays } from "date-fns";

<div>{format(new Date(), "yy.MM.dd.(EE)")}</div>
<div>{differenceInDays(new Date(), new Date("2023-03-12"))}Days</div>

오늘 날짜를 출력하고, d-day를 출력했다.

달력

달력을 만들기위해 라이브러리를 가져왔다.

import Calendar from "react-calendar";
import "react-calendar/dist/Calendar.css";

const [value, onChange] = useState(new Date());
<Calendar className="calender" onChange={onChange} value={value} />

사용자화도 가능하다고 하던데, 시도해본다면 나중에 해볼 거 같다.

이외에도 스케쥴러 때문에, 부모-자식 통신 간의 전달오류 등으로 에러가 떴고 지우느라 시간을 많이 썼다. 내가 다른 친구들과 비슷해지려면 얼마나 걸릴까..?ㅠㅡㅜ

I

풋살​

Study

React​

스케줄러 문제​

컴포넌트 합성​

날짜출력​

달력​

풋살

React

스케줄러 문제

컴포넌트 합성

날짜출력

달력