[React] 글쓰기 기능 구현하기

 

 

 

 

✍ 필요한 라이브러리 설치

 

yarn add quill : 글 작성하는 Editor 라이브러리 설치

yarn add styled-components : CSS 관련 리액트 라이브러리 중에서 가장 인기있는 라이브러리 설치

리덕스 확장 프로그램 : https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd

Redux DevTools

 

리덕스 개발 툴을 다운받으면 크롬으로 react 를 실행시켜서 개발할 때 redux state 변화를 확인할 수 있다.

 

 

 

 

 

 

✍ 구조

 

 

1. page 에서 글을 작성하면 state 변화가 일어난다.

2. modules 에서 handleActions 로 reducer 함수 만들어서 변화된 state 를 store 에 저장하도록 하고, createAction 으로 해당 reducer 함수에 대한 action 을 생성한다.

3. page 와 연결된 container 에서 useDispatch() 로 dispatch 객체를 만들고 dispatch() 의 파라미터로 modules 에서 생성한 action 을 넣어서 action 을 발생시킨다. dispatch(action) 하지 않으면 reducer 가 실행되지 않는다.

4. container 에서 component 를 리턴한다.

 

 

 

✍ backticks(`)을 이용한 스타일 적용

 

const EditorBlock = styled(Responsive)
`
padding-top: 5rem;
paddin-bottom: 5rem; 
`

 

위 코드의 styled(Resonsive) 를 보면 Responsive 컴포넌트를 파라미터로 가지고 있다.

무슨 의미인지 알아보기 위해 아래의 Responsive.js 를 살펴보면, return 값이 <ResponsiveBlock> 으로 감싸져 있는 형태이다. {...rest} 는 모든 props 들을 Responsive 태그에 적용한다는 의미이고, {children} 은 다른 컴포넌트에서 <Responsive> 로 감싸져 있는 contents 를 말하는 것 것 같다.

 

 

 

✍ children 이란?

리액트 컴포넌트를 사용할 때 컴포넌트 태그 사이의 내용을 보여주는 props 가 children 이다.

 

 

import styled from 'styled-components'

const ResponsiveBlock = styled.div`
padding-left: 1rem;
padding-right: 1rem;
width: 1024px;
margin: 0 auto;

@media (max-width: 1024px){
    width: 768px;
}

@media (max-width: 768px){
    width: 100%;
}
`

const Responsive = ({ children, ...rest }) => {
    // 다른 컴포넌트에서 구현된 children 부분에 ResponsiveBlock 스타일 적용
    return <ResponsiveBlock {...rest}>{children}</ResponsiveBlock>
}

export default Responsive;

 

WritePage.js 를 실행한 html 을 보면 <Responsive> 로 감싸진 해당 페이지에 스타일이 적용된 걸 알 수 있다.

 

 

 

const WritePage = () => {
    return(
        <Responsive>
            <Editor/>
            <TagBox/>
        </Responsive>
    )
};

export default WritePage;

 

웹 실행 화면

 

 

 

 

✍  useState()

함수형 컴포넌트에서도 상태를 관리할 수 있도록 만드는 함수이다.

 

const TagItem = React.memo(({ tag, onRemove }) => (
  <Tag onClick={() => onRemove(tag)}>#{tag}</Tag>
));

const TagList = React.memo(({ tags, onRemove }) => (
  <TagListBlock>
    {tags.map((tag) => (
      <TagItem key={tag} tag={tag} onRemove={onRemove} />
    ))}
  </TagListBlock>
));

const TagBox = () => {
  const [localTags, setLocalTags] = useState([]);
 // const [상태 값 저장 변수, 상태 값 업데이트 함수] = useState(상태 초기값)

  const onRemove = useCallback(
    (tag) => {
      setLocalTags(localTags.filter((t) => t !== tag));  // 선택한 tag 가 아닌 것만 localTags 에 남기기
      console.log(localTags, tag);
    },
    [localTags]
  );

  return(
      <TagBoxBlock>
          <h4>태그</h4>
          <TagList tags={localTags} onRemove={onRemove} />
      </TagBoxBlock>
  )
};

 

1. 첫 번째 원소 localTags 은 현재 상태 값 변수이고 두 번째 원소 setLocalTags 은 상태 값을 갱신해주는 함수이다. useState() 안의 값은 상태의 초기 값이다.

2. TagList 태그의 속성에 onRemove 를 넣어주고 그 값으로 onRemove() 함수를 넣었다.

3. TagList 코드를 보면 TagItem 태그가 있고 그 속성에 onRemove={onRemove} 가 있다.

4. TagItem 코드를 보면 <TagonClick={() =>onRemove(tag)}>#{tag}</Tag> 으로 태그를 클릭하면 onRemove 가 되게끔 되어있다.

 

즉, 태그 리스트 중 하나의 태그를 선택해서 삭제하는 것이기 때문에 TagItem 에서 onClick 속성 값으로 onRemove 를 넣어줌으로써 TagItem 을 삭제하고 그것을 TagList 에 반영하는 것이다. (TagList 안에 TagItem 안에 onClick 함수가 있는 구조이다.)

 

 

 

 

✍  useRef()

포커스를 설정하거나 특정 요소의 크기를 가져오는 등 특정 DOM 을 선택해야 할 때 사용하는 함수이다.

 

const Editor = () => {
    const quillElement = useRef(null);  // Quill 을 적용할 DOM(DivElement) 를 설정
    const quillInstance = useRef(null); // Quill 인스턴스 설정

    useEffect(() => {
        quillInstance.current = new Quill(quillElement.current, {
            theme: 'bubble',
            placeholder: '내용을 작성하세요...',
            modules: {
                toolbar: [
                    [{ header: '1' }, { header: '2' }],
                    ['bold', 'italic', 'underlinde', 'strike'],
                    [{ list: 'ordered' }, { list: 'bullet' }],
                    ['blockquote', 'code-block', 'link', 'image'],
                ],
            }
        })
    }, [])

    return (
        <EditorBlock>
            <TitleInput placeholder="제목을 입력하세요" />
            <QuillWrapper>
                <div ref={quillElement} />
            </QuillWrapper>
        </EditorBlock>
    )
}

 

1. Ref 객체 생성 : quillElement = useRef(null);

2. Ref 객체의 current 값은 선택하고자 하는 DOM 을 가리킨다 : quillElement.current

즉, quillElement.current 은 내용을 작성하세요.. 가 포함된 Quill(에디터) 객체이다.

3. return 내의 <div ref={quillElement}/> 에서 DOM 에 속성으로 ref 값을 넣어준다.

 

 

 

 

✍  useEffect(function, deps)

useEffect() 함수는 컴포넌트가 렌더링 할 때마다 특정 작업을 실행할 수 있도록 하는 Hook 이다.

컴포넌트가 처음 렌더링 될 때 한 번만 사용하기 위해서는 deps 위치에 빈 배열 [] 을 넣는다. 배열을 생략하면 리렌더링 될 때마다 실행된다. 값이 업데이트 될 때 렌더링 한다면 deps 배열 안에 검사하고자 하는 값을 넣는다. deps 파라미터를 작성하지 않으면 컴포넌트가 리렌더링 될 때마다 useEffect() 함수가 호출된다.

 

// modules/write.js

import { createAction, handleActions } from "redux-actions";

const INITIALIZE = "write/INITIALIZE";
const CHANGE_FIELD = "write/CHANGE_FIELD";

// action 만들기
export const initialize = createAction(INITIALIZE);
export const changeField = createAction(CHANGE_FIELD, ({ key, value }) => ({
  key,
  value,
}));

const initialState = {
  title: "",
  body: "",
  tags: [],
};

// 밖에서 action 을 사용할 수 있도록 한다.
const write = handleActions(
  {
    [INITIALIZE]: (state) => initialState,
    [CHANGE_FIELD]: (state, { payload: { key, value } }) => ({
      ...state,
      [key]: value,
    }),
  },
  initialState
);

export default write;

import Editor from '../../components/write/Editor'
import { useSelector, useDispatch } from 'react-redux'
import { useEffect, useCallback } from 'react'
import { changeField, initialize } from '../../modules/write'

// Quill 에디터는 일반 input 이나 textarea 가 아니기 때문에 onChange 와 value 값을 사용하여 상태를 관리할 수 없다.
// 따라서 지금은 에디터에서 값이 바뀔 때 리덕스 스토어에 넣는 작업만 하고 리덕스 스토어의 값이 바뀔 때 에디터 값이 바뀌게 하는 작업은
// 추후 포스트 수정 기능을 구현할 때 처리한다.

const EditorContainer = () => {
    const dispatch = useDispatch()
    const {title, body} = useSelector(({write}) => ({
        title: write.title,
        body: write.body,
    }))
    
    const onChangeField = useCallback(payload => dispatch(changeField(payload)),[
        dispatch,
    ])
   
    // dispatch 가 바뀔 때마다(=새로 글을 작성할 때마다) 초기화 action (=새 창) 을 dispatch 한다.
    useEffect(() => {
        return () => {
            dispatch(initialize())
        }
    }, [dispatch])
    return <Editor onChangeField={onChangeField} title={title} body={body}/>
}

export default EditorContainer

 

위 코드에서 useEffect() 함수를 보면 dispatch 가 바뀔 때마다(=글 작성 후 새 글을 작성하러 들어올 때마다) 초기화 action(= default 새 창) 을 dispatch 한다.

 

 

 

 

✍  useSelector()

connect() 함수를 사용하지 않고 리덕스의 state 를 조회할 수 있다.

index.js 에서 combineReducer 로 묶여있는 reducer 들 중 write 리듀서 내에 초기화가 되어 있는 (initState) state 에 접근하여 해당 값을 가져온다.

 

 

    const {title, body} = useSelector(({write}) => ({
        title: write.title,
        body: write.body,
    }))

 

 

 

 

✍  useDispatch()

modules 폴더에서 생성한 action 을 useDispatch 를 통해 발생시킬 수 있다.

(action 을 담고 reduce 로 가는 dispatch 열차)

 

// -------------------------------- modules/write.js

import { createAction, handleActions } from "redux-actions";

const INITIALIZE = "write/INITIALIZE";
const CHANGE_FIELD = "write/CHANGE_FIELD";

// action 만들기
export const initialize = createAction(INITIALIZE);
export const changeField = createAction(CHANGE_FIELD, ({ key, value }) => ({
  key,
  value,
}));

const initialState = {
  title: "",
  body: "",
  tags: [],
};

// 밖에서 action 을 사용할 수 있도록 한다.
const write = handleActions(
  {
    [INITIALIZE]: (state) => initialState,
    [CHANGE_FIELD]: (state, { payload: { key, value } }) => ({
      ...state,
      [key]: value,
    }),
  },
  initialState
);
export default write;


// -------------------------------- containers/write/EditorContainer.js

// dispatch
const dispatch = useDispatch()
const onChangeField = useCallback(payload => dispatch(changeField(payload)),[
   dispatch,
])

useEffect(() => {
   return () => {
       dispatch(initialize())
   }
}, [dispatch])

 

액션에 필요한 추가 데이터는 payload 라는 이름의 파라미터를 사용하여 추가한다.

 

 

 

✍  payload 란?

payload 는 action 의 실행에 필요한 데이터이다. 

 

// Bpp.js
import React, { Component } from "react";

class Bpp extends Component {
  render() {
    return (
      <div>
        <h1>Bpp</h1>
        <h1>{this.props.result}</h1>
        <button
          onClick={() => {
            this.props.onINC({ a: 10, b: 20 });
          }}
        >
          더하기
        </button>
      </div>
    );
  }
}
export default Bpp;

 

component/Bpp.js 에서 onClick 이벤트로 전달하는 onINC 값이 객체 {a: 10, b: 20} 이다.

 

 

// bpp.js
import { createAction, handleActions } from "redux-actions";

const INC = "INC";
const DEC = "DEC";
export const inc = createAction(INC);
export const dec = createAction(DEC);

const initState = {
  num: 100,
};

export default handleActions(
  {
    // [INC]: (state, action) => ({ num: state.num + action.payload }),  // inc(n) 에서 파라미터 값 n 이 여기서 action.payload 이다.
    [INC]: (state, { payload: data }) => {
      return { num: state.num + data.a + data.b };
    },
    // [INC]: (state, { payload: {a, b} }) => {
    //     return { num: state.num + a + b };
    //   },
  },
  initState
);

 

component/Bpp.js 에서 전달한 onINC 객체를 payload 로 받는다. {payload: data} 는 payload 를 data 로 부르는 것이고 data 로 payload 의 데이터에 접근한다. data.a 는 10 이고 data.b 는 20 이 되는 것이다.

 

 

 

 

✍  useMemo() : 렌더링 시 값을 재사용하기 위한 함수

useMemo() 함수는 렌더링 시 값을 재사용 할 수 있도록 한다. useMemo(function, deps) 형태로, deps(값을 담은 배열) 값이 바뀌면 function 을 호출해서 연산하고, deps 값이 바뀌지 않으면 이전에 연산한 값을 재사용한다. 

 

 

 

 

✍  useCallback() : 특정 함수를 재사용하기 위한 함수

특정 함수를 재사용하기 위한 함수이다. 자식 컴포넌트에 props 를 전달할 때 useCallback() 함수를 사용하면 불필요한 리렌더링을 방지할 수 있다. 첫 번째 파라미터에는 생성하고 싶은 함수를 넣고, 두 번째 파라미터에는 배열을 넣는다. 해당 배열에는 어떤 값이 바뀌었을 때 함수를 새로 생성해야 하는지를 명시해야 한다.

 

 

 

 

✍  React.memo()

렌더링을 최적화하기 위해서 컴포넌트 분리를 하고 불필요한 렌더링을 방지한다. 컴포넌트의 props 가 바뀌지 않았다면 , 리렌더링하지 않도록 설정하여 함수 컴포넌트의 리렌더링 성능을 최적화해 줄 수 있다. 부모 컴포넌트에서는 값이 변경되지 않을 경우의 리렌더링을 방지하기 위해 useCallback() 함수를 사용하면 되지만 그것은 자식 컴포넌트에는 적용되지 않는다. 따라서 자식 컴포넌트에서 리렌더링을 방지하기 위해서는 React.memo() 을 사용해야 한다. 컴포넌트의 리렌더링을 방지할 때는 생명주기 함수인  shouldComponentUpdate 를 사용하면 되지만 함수 컴포넌트에서는 라이프사이클 메서드를 사용할 수 없다. 대신 React.memo() 라는 함수를 사용한다. 파라미터로는 컴포넌트가 필요하고 React.memo() 로 감쌀 컴포넌트가 2개 이상일 때 function 을 사용하여 처리한다.

 

const TagItem = React.memo(({ tag }) => <Tag>#{tag}</Tag>);

const TagList = React.memo(({ tags }) => (
  <TagListBlock>
    {tags.map((tag) => (
      <TagItem key={tag} tag={tag} />
    ))}
  </TagListBlock>
));

 

위의 코드에서 렌더링을 하는 상황은 두 가지이다.

 

1. Tag 에 대한 input (=Item) 이 바뀔 때

2. Tag 목록 (=List) 이 바뀔 때

 

 

React.memo() 를 사용해서 컴포넌트를 감싸주면 실제로 해당 컴포넌트가 받아오는 props 값이 변경되었을 때만 리렌더링 해준다.

 

 

 

 

✍  function* 이란?

function* f1() {
    console.log('1');
    yield 1;
    console.log('2');
    yield 2;
    console.log('3');
    yield 3;
}

let func = f1();
console.log(func.next());   // 1
console.log(func.next());   // 2
console.log(func.next());   // 3
console.log(func.next());   // undefined

 

*를 붙이는 함수는 Generator 가 된다. 이 함수는 내부에서 yield 문법을 사용할 수 있는데,

yield 는 return 과 같은 함수 종료의 역할을 하지만 함수가 재호출 될 경우 해당 지점에서 시작한다는

차이점이 있다.

 

 

 

import {combineReducers} from 'redux';
import {all} from 'redux-saga/effects';
import auth, {authSaga} from './auth';
import loading from './loading';
import user, {userSaga} from './user';
import write from './write';

const rootReducer = combineReducers({
    auth,
    loading,
    user,
    write,
});

// all([authSaga(), userSaga()]) 을 반환, 함수 재호출 시 다음 auth 에 대한 처리를 진행한다.
export function* rootSaga() {
    yield all([authSaga(), userSaga()]);
}

export default rootReducer;

 

위의 코드는 modules/index.js 이다. 위에서 function* rootSaga() 함수는 all([authSaga(), userSaga()]) 을 반환하고, 함수 재호출 시 다음 auth(user) 에 대한 처리를 진행한다.

 

 

 

💡 Reducer (= containers 폴더)

Store 의 state 와 Dispatch 로부터 action 을 받아서 action 에 대한 작업을 하여 state 를 변경시킨다.

 

// EditorContainer.js
import Editor from '../../components/write/Editor'
import { useSelector, useDispatch } from 'react-redux'
import { useEffect, useCallback } from 'react'
import { changeField, initialize } from '../../modules/write'

// Quill 에디터는 일반 input 이나 textarea 가 아니기 때문에 onChange 와 value 값을 사용하여 상태를 관리할 수 없다.
// 따라서 지금은 에디터에서 값이 바뀔 때 리덕스 스토어에 넣는 작업만 하고 리덕스 스토어의 값이 바뀔 때 에디터 값이 바뀌게 하는 작업은
// 추후 포스트 수정 기능을 구현할 때 처리한다.

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

 

 

 

웹 실행 화면

 

 

 

 

// EditorContainer.js
import Editor from '../../components/write/Editor'
import { useSelector, useDispatch } from 'react-redux'
import { useEffect, useCallback } from 'react'
import { changeField, initialize } from '../../modules/write'

// Quill 에디터는 일반 input 이나 textarea 가 아니기 때문에 onChange 와 value 값을 사용하여 상태를 관리할 수 없다.
// 따라서 지금은 에디터에서 값이 바뀔 때 리덕스 스토어에 넣는 작업만 하고 리덕스 스토어의 값이 바뀔 때 에디터 값이 바뀌게 하는 작업은
// 추후 포스트 수정 기능을 구현할 때 처리한다.

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])
    // Editor 에 파라미터 값 전달
    return <Editor onChangeField={onChangeField} title={title} body={body}/>
}

export default EditorContainer

 

// Editor.js
import Quill from "quill"; // 글 작성하는 Editor 라이브러리
import { useRef, useEffect } from "react";
import "quill/dist/quill.bubble.css";
import styled from "styled-components"; // css in js 관련 리액트 라이브러리 중에서 가장 인기있는 라이브러리
import palette from "../../lib/styles/palette";
import Responsive from "../common/Responsive";

// 스타일 코드 중략

// EditorContainer 에서 전달받은 값 onChangeField
const Editor = ({ title, body, onChangeField }) => {
  const quillElement = useRef(null); // Quill 을 적용할 DOM(DivElement) 를 설정
  const quillInstance = useRef(null); // Quill 인스턴스 설정

  useEffect(() => {
    quillInstance.current = new Quill(quillElement.current, {
      theme: "bubble",
      placeholder: "내용을 작성하세요...",
      modules: {
        toolbar: [
          [{ header: "1" }, { header: "2" }],
          ["bold", "italic", "underlinde", "strike"],
          [{ list: "ordered" }, { list: "bullet" }],
          ["blockquote", "code-block", "link", "image"],
        ],
      },
    });

    const quill = quillInstance.current;
    quill.on("text-change", (delta, oldDelta, source) => {
      if (source === "user") {
        onChangeField({ key: "body", value: quill.root.innerHTML });
      }
    });
  }, [onChangeField]);

  const onChangeTitle = e => {
    onChangeField({ key: "title", value: e.target.value });
  };

  return (
    <EditorBlock>
      <TitleInput
        placeholder="제목을 입력하세요"
        onChange={onChangeTitle}
        value={title}
      />
      <QuillWrapper>
        <div ref={quillElement} />
      </QuillWrapper>
    </EditorBlock>
  );
};

export default Editor;

 

 

 

 

 

// TagBoxContainer.js
import { useDispatch, useSelector } from "react-redux";
import TagBox from "../../components/write/TagBox";
import { changeField } from "../../modules/write";

const TagBoxContainer = () => {
  const dispatch = useDispatch();
  const tags = useSelector((state) => state.write.tags);

  // 액션 발생시킴
  const onChangeTags = (nextTags) => {
    dispatch(
      changeField({
        key: "tags",
        value: nextTags,
      })
    );
    console.log("onChangeTags:", nextTags);
  };   // TagBox 에 파라미터 값 전달
  return <TagBox onChangeTags={onChangeTags} tags={tags} />;
};

export default TagBoxContainer;

 

 

// TagBox.js
import React from "react";
import styled from "styled-components";
import palette from "../../lib/styles/palette";
import { useState, useCallback, useEffect } from "react";

// css 스타일 코드 중략


// 렌더링을 최적화하기 위해서 컴포넌트 분리 TagItem / TagList
// TagBox 에서 렌더링 하는 상황은 두 가지
// 1. input 이 바뀔 때
// 2. tag 목록이 바뀔 때

// React.memo 를 사용해서 컴포넌트를 감싸주면 실제로 컴포넌트가 받아오는 props 가 변경되었을 때만 리렌더링 해준다.
// tag 값이 바뀔 때만 리렌더링 되도록 처리
const TagItem = React.memo(({ tag, onRemove }) => (
  <Tag onClick={() => onRemove(tag)}>#{tag}</Tag>
));

const TagList = React.memo(({ tags, onRemove }) => (
  <TagListBlock>
    {tags.map((tag) => (
      <TagItem key={tag} tag={tag} onRemove={onRemove} />
    ))}
  </TagListBlock>
));

const TagBox = ({ tags, onChangeTags }) => {
  const [input, setInput] = useState("");
  const [localTags, setLocalTags] = useState([]);

  // 태그 추가할 때
  const insertTag = useCallback(
    (tag) => {
      if (!tag) return;
      if (localTags.includes(tag)) return;
      const nextTags = [...localTags, tag];
      setLocalTags(nextTags);
      onChangeTags(nextTags);  // 태그 리스트가 변경(입력, 삭제)되는 것에 대한 log
      console.log(nextTags);
    },
    [localTags, onChangeTags]
  );
 // 태그 삭제 할 때
  const onRemove = useCallback(
    (tag) => {
      const nextTags = localTags.filter((t) => t !== tag);
      setLocalTags(nextTags);
      onChangeTags(nextTags);
      console.log(localTags, tag);
    },
    [localTags, onChangeTags]
  );

  // 태그 입력 창에 값이 입력 혹은 바뀌는 거 실시간으로 받음
  const onChange = useCallback((e) => {
    setInput(e.target.value); // input 에서 받은 값 추출
    console.log("onChange:", e.target.value);
  }, []);

  
  // 태그 추가 할 때
  const onSubmit = useCallback(
    (e) => {
      e.preventDefault();
      insertTag(input.trim());
      setInput(""); // 태그 추가하는 공간 초기화
    },
    [input, insertTag]
  );

  // tags 값이 바뀌었을 때
  useEffect(() => {
    setLocalTags(tags);
    console.log("onChangeTags: " ,tags);
  }, [tags]);

  return (
    <TagBoxBlock>
      <h4>태그</h4>
      <TagForm onSubmit={onSubmit}>
        <input
          placeholder="태그를 입력하세요."
          value={input}
          onChange={onChange}
        />
        <button type="submit">추가</button>
      </TagForm>
      <TagList tags={localTags} onRemove={onRemove} />
    </TagBoxBlock>
  );
};

export default TagBox;

 

 

 

 

웹 실행 화면

 

TagBoxContainer

 

 

 

 

 

write 부분 웹 실행 화면

 

글쓰기 부분 웹 실행화면

 

 

 

 

 

 

도서 [리액트를 다루는 기술] 을 참고하여 작성한 글입니다.

 

 

 

 

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."