2022.06.22

1. 리액트 useState를 이용한 input 관리

 

핵심은 onChangeInput이라는 onChange를 감지할 수 있는 속성을 넣어주고,

userInput이라는 state안에 여러 정보들이 들어있으면,

const nextUserInput = {

...userInput,

[e.target.name] : e.target.value

};

setUserInput (nextUserInput)을 해주는 것이다.

그리고 ... 스프레드 연산자를 이용해서 기존것을 복사를 해주어야하고, 

name이라는 속성도 input의 속성으로 넣어주어야 하는것을 잊지 않아야한다. 

 

그리고 useCallback을 사용하여 userInput 값이 변할때만 인지하도록 하였다.

const InputStudentNumber = () => {
  
  const [userInput, setUserInput] = useState({
    studentNumber: '',
  });

  const onChangeInput = useCallback(
    e => {
      const nextUserInput = {
        ...userInput,
        [e.target.name]: e.target.value,
      };
      setUserInput(nextUserInput);
    },
    [userInput],
  );


  return (
    <Background>
      <Container onSubmit={handleSubmit}>
        <UserInputContainer>
          <UserInput
            name="studentNumber"
            type="number"
            onChange={onChangeInput}
            autoFocus
            placeholder="학번을 입력하세요"
          />
        </UserInputContainer>
        <ButtonContainer>
          <CancelButton type="button">
            취소
          </CancelButton>
          <ConfirmButton type="submit">
            확인
          </ConfirmButton>
        </ButtonContainer>
      </Container>
    </Background>
  );
};

 

하단의 블로그를 참고하였다.

https://velog.io/@sji7532/JavaScript-React-useState%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%9C-input-%EA%B4%80%EB%A6%AC

[JavaScript] React - useState를 사용한 input 관리

 

 

2. git merge 충돌잡기

 

팀원분께서 git pull origin develop으로 원격에서 받아오고, 그 다음에 내가 판 branch에서 develop으로 머지를 시키는 방식으로도 충돌을 잡자고 제안을 해주셔서 그렇게도 해보았다. 

 

 

 

3. Context API 사용하기

 

팀원분이 context api를 만들어주셔서 이번에 새로 알게된 점이 많다.

import React, { createContext, useState } from 'react';
import PropTypes from 'prop-types';

const EditContext = createContext({
  state: {
    title: '일정등록',
    adHeight: '0vh',
    userReservationId: '',
    tokenId: { token: '', id: '' },
  },
  actions: {
    setTitle: () => {},
    setHeight: () => {},
    setUserReservationId: () => {},
    setTokenId: () => {},
  },
});

const EditProvider = function edit({ children }) {
  const [title, setTitle] = useState('일정등록');
  const [adHeight, setHeight] = useState('0vh');
  const [userReservationId, setUserReservationId] = useState('');
  const [tokenId, setTokenId] = useState({
    token: '',
    id: '',
  });
  const value = {
    state: { title, adHeight, userReservationId, tokenId },
    actions: { setTitle, setHeight, setUserReservationId, setTokenId },
  };

  return <EditContext.Provider value={value}>{children}</EditContext.Provider>;
};

EditProvider.propTypes = {
  children: PropTypes.element,
};

export { EditProvider };

export default EditContext;

createContext 부분에는 state와 actions를 정의해주면 되는데, 기본 값들을 넣어주면 된다.

EditProvider쪽에는 useState 값들을 작성한다.

value에는 state에는 useState의 첫번째 인자,  actions에는 useState의 두번째 인자를 넣어준다.

 

사용할때는 useContext를 사용한다고 명시하고, createContext로 만들어주었던 EditContext를 불러온다.

const {

  state: {context api 만들어준 state적기},

  actions: {context api 만들어준 set함수적기},

} = useContext(EditContext)

라고 정의를 하고, 저것을 사용해주면 된다.

import React from 'react';
import styled from 'styled-components';
import { ReactComponent as PlusIcon } from '../assets/images/plus.svg';
import { useContext } from 'react';
import EditContext from './InputForm/CreateContext';

// 새로운 일정 등록을 생성할 수 있는 버튼에 해당하는 컴포넌트입니다.
const AddScheduleButton = () => {
  const {
    actions: { setTitle, setHeight },
  } = useContext(EditContext);

  return (
    <AddButton
      type="button"
      onClick={() => {
        setTitle('일정등록');
        setHeight('100vh');
      }}
    >
      <PlusIcon width="28" height="28" />
    </AddButton>
  );
};

export default AddScheduleButton;

 

https://velog.io/@yrnana/Context-API%EA%B0%80-%EC%A1%B4%EC%9E%AC%ED%95%98%EC%A7%80%EB%A7%8C-%EC%97%AC%EC%A0%84%ED%9E%88-%EC%82%AC%EB%9E%8C%EB%93%A4%EC%9D%B4-redux%EC%99%80-%EC%A0%84%EC%97%AD-%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC%EB%A5%BC-%EC%93%B0%EB%8A%94-%EC%9D%B4%EC%9C%A0

Context API가 존재하지만 여전히 사람들이 redux와 전역 상태관리 라이브러리를 쓰는 이유

 

 

4. data들을 시간 순서대로 정렬하기

 

동아리방 신청 현황을 보여줄 때 시간이 빠른 순서대로 보여주어야 하는데, 게시물이 작성된 순서대로 보여진다는 문제점이 있었다.

그래서 신청된 시간 (startTime이라고 정의했다)이 빠를 수록 정렬 순서상 앞으로 가도록 하는 방법을 찾았다.

애초에 게시물들이 렌더링 되기전에 분류를 해야함으로, .map함수가 돌기 전에 .sort를 써주는 것이 나았다. 

 return (
    <Container>
      <TextContainer>
        <Date>
          {NowMonth}.{NowDate} {NowdayConvert}
        </Date>
        <Text> 동아리방 신청 현황</Text>
      </TextContainer>
      <ItemContainer>
        {scheduleDatas
          .sort((a, b) => {
            return a.startTime > b.startTime ? 1 : -1;
          })
          .map(scheduleData => {
            return (
              <ScheduleListItem
                key={scheduleData.reservationId}
                activateModal={activateModal}
                scheduleData={scheduleData}
              />
            );
          })}
      </ItemContainer>
    </Container>
  );
};

const Container = styled.div`
  width: 100%;
  display: flex;
  padding-bottom: 10px;
  flex-direction: column;
  overflow-y: auto;
`;

const TextContainer = styled.header`
  display: flex;
  margin: 13px 0px 0px 18px;
`;

const Date = styled.h2`
  font-size: 13px;
  font-weight: bold;
  margin-right: 6px;
`;

const Text = styled.p`
  font-size: 13px;
  font-weight: 500;
`;

const ItemContainer = styled.div`
  flex-direction: column;
  width: 100%;
  display: flex;
  align-items: center;
`;

ScheduleList.propTypes = {
  NowYear: PropTypes.string,
  NowMonth: PropTypes.string,
  NowDate: PropTypes.string,
  NowDay: PropTypes.number,
  activateModal: PropTypes.func,
};

export default ScheduleList;

 

 

 

 

시간 순서대로 정렬하려고 할 때 다음 글을 참고하였다.

https://stackoverflow.com/questions/58011456/how-can-i-sort-this-map-of-components-react

How can I sort this map of components? react

 

 

 

5. 몇번째 요소를 클릭했는지 인지하기

 

각각의 요소가 reservationId가 다른데 몇번째 요소를 클릭했는지 알기가 어려웠다.

그래서 onClick을 활용하여, e.target.id를 reservationId에 부여하여 클릭한 요소의 id를 알 수 있게 하였다.  

const sendReservationId = e => {
    e.target.id = reservationId;
    setUserReservationId(reservationId);
    activateModal();
  };

  return (
    <Container onClick={sendReservationId}>
      <TitleContainer>
        <Title color={color}>{purpose}</Title>
      </TitleContainer>
      <ReservationTimeContainer>
        <IconBell>
          <FaRegBell />
        </IconBell>
        <ReservationTime>
          {startTime}~{endTime}
        </ReservationTime>
      </ReservationTimeContainer>
    </Container>
  );
};

 

 

6. 모달 만들기

 

하단의 영상을 참고하였다.

https://www.youtube.com/watch?v=ZCvemsUfwPQ&t=737s 

 

 

7. axios.create 활용하기

 

팀원분이 제안을 해주셔서 이번에 axios를 편하게 사용할 수 있었다. 

client.js 파일을 만들었다.

이렇게 정의를 해주면, client라는 이름만 가지고 편하게 axios를 사용할 수 있다. 

(물론 해당 컴포넌트에 import client를 해주어야 사용 가능하다.)