25.3.1 EditorContainer 만들기

    containers/write/EditorContainer.js

    import React, { useEffect, useCallback } from 'react';
    import Editor from '../../components/write/Editor';
    import { useSelector, useDispatch } from 'react-redux';
    import { changeField, initialize } from '../../modules/write';
    
    const EditorContainer = () => {
      const dispatch = useDispatch();
      const { title, body } = useSelector(({ write }) => ({
        title: write.title,
        body: write.body,
      }));
      const onChangeField = useCallback(payload => dispatch(changeField(payload)), [
        dispatch,
      ]);
      // 언마운트될 때 초기화
      useEffect(() => {
        return () => {
          dispatch(initialize());
        };
      }, [dispatch]);
      return <Editor onChangeField={onChangeField} title={title} body={body} />;
    };
    
    export default EditorContainer;

     

    위 컨테이너 컴포넌트에서는 title 값과 body 값을 리덕스 스토어에서 불러와 Editor 컴포넌트에 전달해 주었습니다. 참고로 Quill 에디터는 일반 input이나 textarea가 아니기 때문에 onChangevalue 값을 사용하여 상태를 관리할 수 없습니다. 따라서 지금은 에디터에서 값이 바뀔 때 리덕스 스토어에 값을 넣는 작업만 하고, 리덕스 스토어의 값이 바뀔 때 에디터 값이 바뀌게 하는 작업은 추후 포스트 수정 기능을 구현할 때 처리하겠습니다.

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.