내일배움캠프 4기 React 41일차( axios, patch, 수정, jsx, 줄바꿈 프로젝트)

1. axios path

export const __editHint = createAsyncThunk(
  'EDIT_HINT',
  async (payload, thunkAPI) => {
    try {
      await axios.patch(
        `http://localhost:3001/hints/${payload.id}`,
        payload.edithint,
      );
      return thunkAPI.fulfillWithValue(payload);
    } catch (error) {
      return thunkAPI.rejectWithValue(error);
    }
  },
);

[__editHint.fulfilled]: (state, action) => {
      state.isLoading = false;
      state.hints = state.hints.map((hint) =>
        hint.id === action.payload.id ? (hint = action.payload.edithint) : hint,
      );
    },

axios.patch(url,data) 를 이용하여
타겟팅 된 객체를 수정 시켜준다.

redux-toolkit state 도 수정 하기 위해서

hint를 add 했던 객체 모습 그대로 .map 을 이용해 그 위치에 넣어준다.

만약, 수정 해 줄 객체의 데이터가 다르다면 읽히지 않기 때문에 저장이 되지 않는다.

 {
      "id": "a46f52f9-7cb5-4c42-81fb-093fbd63776e",
      "hint": "수정맛 수정",
      "writer": "sdf",
      "password": 1234,
      "level": "상",
      "questionId": 1
    },

이런 모습의 객체 데이터라면
id, hint, writer, password, level, questionId 모두 객체를 해주어야 한다.

2. 수정기능 div / input 한 곳에서 열기

const [isOpen, setIsOpen] = useState(false);

const openUpdateHandler = () => {
    setIsOpen(!isOpen);
  };

// body 내용
{isOpen ? (
        <HintUpdateBox
          type="text"
          onChange={onChangeUpdate}
          defaultValue={hint.hint}
        />
      ) : (
        <HintTextBox>{hint.hint}</HintTextBox>
      )}

useState를 이용하여 isOpen의 참, 거짓에 따라
수정창, text 창을 같은 곳에 렌더링 한다.

엄청 간단하게 조작이 가능하여 매우 유용하게 쓸 수 있을 것이다!

3. jsx 에서 div 줄바꿈 하기!

textarea의 값을 db 에 저장을 할 때 jsx 에서 입력하게 되면
개행문자나 태그는 동작하지 않고 그대로 출력한다

<br/> /n 등등

출력하는 div에 css를 적용 시켜주기만 하면 처리된다.

white-space: pre-line