2023년 03월 3주차 Week I Learned.

Dongchan Alex Kim·2023년 3월 19일
0

Week I Learned

목록 보기
4/14
post-thumbnail

axios

엑시오스는 서버와 연결하는 리액트의 방식 중 하나이다.
엑시오스를 통해 서버와 연결을 시도하는데 그 방식에는 총 4가지가 있을 것이다.

  • get
  • post
  • delete
  • patch

이 4가지 메소드를 이용해 지금까지의 crud를 진행해왔던 것이다.
근데 이 방법이 매우 중요한게
로그인/회원가입에서도 매우 매우 중요하기 때문에 잘 익혀두는 게 좋겠다.

지금까지 엑시오스를 Thunk(react query)를 이용해서 했다. 왜?

  1. 리듀서 로직 구현을 하는데 : reducer -> extraReducers가 되겠다.

  2. 사용하는 이유는 (1) 서버와의 통신이 100% 성공한다는 보장이 없기 때문에, async await를 이용한 thunk 함수와 try/catch 문을 이용해서 thunk로 axios로직을 구현한다.

  3. 그리고 한 곳에서 모든 통신 관련 로직을 모아서 관리할 수 있기 때문에, 이 때문에 쓰기도 한다.

  4. 가장 중요한 이유이기도 한데, 화면에 리렌더링이 되야한다.
    이 조건에는 여러가지가 있지만, state 값이 변한다면, 화면에 로딩이 걸리지 않고 리렌더링이 일어난다.
    thunk의 fulfillwithvalue() 라는 함수를 이용해서, 성공했을 때의 값으로 state 값을 변화시킬 수 있고,
    이를 이용해 다시 새로고침을 하지 않아도, 바로바로 변화되는 점들을 화면에 그릴 수 있기 때문에 매우 용이하다고 볼 수 있다.

fulfillwithvalue 나 rejectwithvalue는 무조건 기존 initialState의 형태에 맞춰서 써주어야하고, 그래야 리렌더링 되었을 때도, 편안... 이다.

최종적인 과정은 이렇게 될 것이다.
서버 -> 리덕스 Thunk -> extraReducers -> store -> useSelector -> 컴포넌트 -> dispatch(__createThunk 함수)


Trouble Shooting 일지

3/15

인자 관련 핸들링을 잘해야한다는 생각이든다

onSubmitHandler = async(id) => {
...
}
...
<form onSubmit = {onSubmitHandler}>

폼 태그에서 인자를 받고 있지 않기 때문에,
만약 handler 함수 쪽에서 갑자기 id 인자를 받기 때문에,
id값은 undefined가 뜨고, 이 함수가 만약 Thunk 함수까지 넘어간다면,
서버와 연결 자체가 오류가 날 수 밖에 없다.

만약 delete나, patch와 같이 id를 이용한 서버연결에서는 조심해야 할 사항들이다.
따라서 id를 인자를 사용하기 위해서는

onSubmitHandler = async(id) => {
...
}
...
<form onSubmit = {()=>onSubmitHandler(item.id)}>

이런 식으로 id 값을 화살표 함수 안쪽으로 물려주어서 처리를 하면 매우 좋겠다.
간혹 가다가 화살표 함수를 쓰지 않고, 그냥 함수 괄호 안에 인자를 넣는 경우가 있는데,
그러면 form 태그가 화면에 그려짐과 동시에 함수가 실행되기 때문에, 이는 우리가 생각하는 로직대로 수행되지 않을 것이다.

3/16

컨텐츠를 화면에 뿌릴 때, map함수로 컨텐트 하나하나 마다의 css를 입혀서 비추는데,
지금 가장 큰 문제는 모달창이었다.
컨텐츠마다 모달창이 생기도록 했는데, 문제는 useState의 true, false 값으로 모달창을 열고 닫았지만,
한번 열때마다 컨텐츠 개수 만큼의 모달창이 열리는건지,
모달창 배경을 opacity 0.5이라고 하면, 컨텐츠 개수가 점점 늘어날 수록, 배경이 점점 진해지는 걸 목격했다.
그렇기 때문에,
가장 마지막에 나타나는 모달창에 뭔가를 입력해서
thunk로 넘어가는 인자의 id값을 추적해보면 항상 가장 마지막 인자 값이 들어가 있었고,
매우매우 크나큰 힘듦을 느꼈다.

<MatchContainer>
              {posts.map((item) => {
                return (
                  <MatchPost key={item.commentId}>
                    <div>
                      <div>
                        <Profile/>
                        <span>{item.username}</span>
                      </div>
                      <div>
                        <div>{item.body}</div>
                        <span> 작성시간 : {item.createdAt}</span> 
                        <span> 수정시간 : {item.modifiedAt}</span>
                      </div>
                    </div>
                    <div>
                      <EditButton onClick={()=>{
                      dispatch(openEditHandler());
                      onStoreItemNum(item.id);
                      }}>
                      <RxUpdate/>
                    </EditButton>
                    <EditButton onClick={()=>onDeleteHandler(item.id)}><RxTrash/></EditButton>
                    </div>
                  </MatchPost>
                )
              })}
              {isShowEdit ? (
              <ModalLayout>
                  <STdiv>
                    <div style={{display:'flex', justifyContent:"space-between",marginBottom:'20px'}}>
                      <span>게시글 수정하기</span>
                      <button onClick={()=>{dispatch(openEditHandler())}}>취소</button>
                    </div>
                    <form
                    onSubmit={(event)=>{onSubmitHandler(event, numid)}}>
                      <textarea
                      onChange = {(event)=>{setNewpost(event.target.value)}} 
                      defaultValue = {value}
                      type="text" />
                      <button>수정하기</button>
                    </form>
                  </STdiv>
              </ModalLayout>
              ) : null}
            </MatchContainer>

요런 느낌으로다가, map함수 밖으로 모달 창을 빼주니까 매우 편하게 모달 창을 열 수 있었다.

-> 그럼 map 함수 각각의 id는 어떻게 받을까?
onClick함수를 이용해서, 클릭이 발생한 곳의 item.id를 받아와서 이를 useState를 넣어주고,
를 다시 모달창에 넣어서 input에 넣어서 수정 값을 가져오는 방식을 취한다.
매우매우 great한 수정 방법이었다.

3/18

크나큰 오예이다.
(?)

은선님의 코드를 봐주다가 생긴 문제였는데,
이건 나도 계속 해서 조심해야할 꺼 같았다.

<form onSubmit = {onSubmitHandler}>
  ..
  <button onClick={onClickHandler}>
  <button>
  ..
</form>

대충 요런식의 형식이었는데,
충격적인 발견을 하였다.
form 태그 안에 있는 onSubmitHandler 함수 내용들이
form 태그 안 button 태그 안에 있는 onclickHandler가 발생할 때에도 같이 발생하는 상황이었다.
분명 삭제를하기 위한 버튼인데,
삭제 후에 빈 값의 컨텐츠가 추가되는 상황을 보았고,
네트워크 창에서 post 요청이 추가적으로 이뤄지고 있는 상황을 목격한 것이다.

이는 form 태그를 사용한다면, onClick과 onSubmit 함수를 이용할때 매우 중요하게 생각해봐야할 꺼 같은 로직이다.

profile
Disciplined, Be systemic

0개의 댓글