2022.08.04 / useRef와 툴킷의 장점

매니저님이 개인적으로 내주신 숙제 두가지를 했다.

useRef는 언제 쓰는지, 리액트 툴킷의 장점을 찾아보았다.

 

useRef

useRef를 쓰면 안되고, 이 경우에는 let으로 선언을 해줘야한다!! useRef로 관리하는 값은 바뀌어도 컴포넌트가 리렌더링이 되지 않는 특징 때문에 이렇게 변수를 선언하면 다음 리렌더링 될 때 그 변수 값은 초기화된다.

// id 값 오류 해결
**let nextId = 0;**

const Form = () => {
const [title, setTitle] = useState('');
  const [content, setContent] = useState('');
  const dispatch = useDispatch();
  const handleInputTitle = (e) => {
    setTitle(e.target.value);
  };
  const handleInputContent = (e) => {
    setContent(e.target.value);
  };

**// const nextId = useRef(0);**

  const onSubmitHandler = (e) => {
    e.preventDefault();
    if (title.trim() === '' && content.trim() === '') {
      alert(`제목과 내용을 모두 입력하세요.`);
    } else if (title.trim() === '') {
      alert(`제목을 입력하세요.`);
    } else if (content.trim() === '') {
      alert(`내용을 입력하세요.`);
    } else if (title.trim() !== '' && content.trim() !== '') {
      dispatch(
        addTodo({
          **id: nextId += 1,**
          title: title,
          content: content,
          isDone: false,
        })
      );
      setTitle('');
      setContent('');
    }
  };

  return (
    <StFormContainer onSubmit={onSubmitHandler}>
      <StFormlabel>제목</StFormlabel>
      <StInput
        type='text'
        value={title}
        name='title'
        onChange={handleInputTitle}
      />
      <StFormlabel>내용</StFormlabel>
      <StInput
        type='text'
        value={content}
        name='content'
        onChange={handleInputContent}
      />
      <StButton>추가하기</StButton>
    </StFormContainer>
  );
};

 

툴킷의 장단점

• 리덕스 툴킷 라이브러리는 리덕스팀의 세가지 걱정을 해결하기 위해 등장하였다.
  1. 리덕스 스토어를 구성하는 것은 너무 복잡하다.
  2. 리덕스가 유용해지려면 많은 패키지들을 추가로 설치해야한다.
  3. 리덕스는 너무 많은 보일러플레이트 코드를 요구한다.
  이 세가지를 해결한 것이 리덕스 툴킷이라는 라이브러리로 리덕스를 훨씬 쉽고 간편하게 사용할 수 있다.
• 리덕스 툴킷 api는 크게 7가지가 있다.
  1. configureStore() : 리덕스 createStore함수와 비슷한 함수로, 간단화된 구성 옵션과, 기본 구성을 제공한다. slice reducer를 자동으로 합치고, 미들웨어를 추가할 수 있으며, redux-thunk를 기본적으로 제공한다. 또한 redux devtools Extension 사용이 가능하다.
  2. createReducer() : 리듀서 함수를 switch 구문으로 쓰기보다는, 리듀서 함수를 계속쓰는 lookup table 방식을 쓸 수 있게 해주고, immer라이브러리가 내장되어 있어서 mutative한 코드를 작성할 수 있도록 해준다. ex) state.todos[3].completed = true
  3. createAction() : 주어진 액션 타입 문자열로 액션 크리에이터 함수를 생성해준다. 함수 자체에 toString()이 정의되어 있어서 constant 타입 대신 사용이 가능하다.
  4. createSlice() : reducer 함수, slice 이름, 초깃값을 넣을 수 있고 action creator와 action type을 가진 slice reducer를 자동으로 생성해준다.
  5. createAsyncThunk : redux-thunk의 대체재
  6. createEntityAdapter : 스토어에서 정규화된 데이터를 관리하기 위해 재사용 가능한 리듀서 및 selector 집합을 생성한다.
  7. createSelector : reselect 라이브러리의 유틸리티 기능과 똑같음
• 장점
  • action type이나 action creator를 따로 생성해주지 않아도 된다.
  • 미들웨어 추가가 편리하다.
  • immer가 내장되어 있어 mutable 객체를 사용해도 된다.
  • redux thunk가 내장되어 있어 비동기를 지원한다.
  • 타입스크립트 지원이 잘된다.

 

---

<출처>

https://bgeun2.tistory.com/27

https://kyun2da.dev/라이브러리/리덕스-툴킷/

http://blog.hwahae.co.kr/all/tech/tech-tech/6946/

[React] useRef() 는 언제 사용하는가? (tistory.com)