[React] 데이터 추가 기능

이 블로그는 유데미 "한입 크기로 잘라먹는 리액트" 강의를 보고 복습하고자 작성되었습니다!

목차

1. 컴포넌트, 데이터 구조 분석

2. 데이터 추가

 

1. 컴포넌트, 데이터 구조 분석

현재까지의 프로젝트 진행 상황을 회고해보겠습니다.

먼저 컴포넌트의 구조입니다.

먼저, 최상단에 App 컴포넌트가 있고, 그 아래에 DiaryEditor와 DiaryList를 접근할 수 있습니다.

우리가 지금 작업할 일기 아이템 추가를 통해, DiaryEditor에서 DiaryList로 데이터가 들어가야 할 것입니다.

하지만, 앞에서 조회 기능을 만들 때는 dummyList를 App 컴포넌트에서 만든 후,

이를 props로 DiaryList에 내려줬습니다.

이렇듯 React에서 데이터는 위에서 아래로 데이터를 내려가는 것밖에 할 수 없습니다.

 

그레서 우리가 할 것은, data state를 App 컴포넌트에서 만든 후에,

data 상태는 DiaryList로 내려주고 setData 함수는 DiaryEditor로 내려주어 따로 관리하게 만드는 것입니다.

 

다이어리 추가 과정을 정리하자면 다음과 같습니다.

1. 우리가 DiaryEditor에서 일기를 작성해 App 컴포넌트로 올립니다.

2. 그 후 App에서 setData를 호출해, 새 일기 아이템을 추가합니다.

3. 추가된 데이터는 prop으로 DiaryList에 내려가고, 브라우저가 리렌더됩니다.

 

즉 전체적인 데이터의 흐름은 [위 -> 아래]가 되며, 이벤트의 처리는 [아래 -> 위]가 될 것입니다.

이처럼 데이터를 부모 컴포넌트의 state로 설정해 문제를 해결하는 것을 state 끌어올리기라고 합니다.

 

 

2. 데이터 추가

그럼 다이어리 데이터 추가를 해보겠습니다.

 

1. state 생성, prop 전달

const [data, setState] = useState([]);

만들어뒀던 더미데이터는 삭제하면 됩니다.

<DiaryList diaryList={data} />

 

2. 새 일기 추가하는 함수 생성

const onCreate = (author, content, emotion) => {
  const created_date = new Date().getTime();
  const newItem = {
    author,
    content,
    emotion,
    created_date,
  }
};

3. useRef 선언, newItem 수정

const dataId = useRef(0);

이때, 임포트 부분에 useState 옆에 useRef도 써서 같이 불러옵니다.

 

const onCreate = (author, content, emotion) => {
  const created_date = new Date().getTime();
  const newItem = {
    author,
    content,
    emotion,
    created_date,
    id: dataId.current,
  }
  dataId.current += 1;
  setData([newItem, ...data]);
};

dataId를 이용해 newItem에 id를 추가해주고, 일기가 추가될 때 Id를 증가시키고, data state를 바꾸는 코드를 추가합니다.

 

4. 함수 전달

<DiaryEditor onCreate={onCreate} />

에디터에서 onCreate를 호출할 수 있도록 App에서 prop으로 전달해줍니다.

const DiaryEditor = ({onCreate}) => {

DiaryEditor에서 prop으로 받도록 작성합니다.

 

5. 제출 시 onCreate 호출시키기

const authorInput = useRef();
const contentInput = useRef();

먼저 이렇게 useRef를 만들어줍니다.

const handleSubmit = () => {
  if (state.author.length < 1) {
    authorInput.current.focus();
    return;
  }
  if (state.content.length < 5){
  	contentInput.current.focus();
    return;
  }
  onCreate(state.author, state.content, state.emotion);
  alert("저장 성공");
  setState({
    author: "",
    content: "",
    emotion: 1,
  });
};

DiaryEditor의 handleSubmit 함수에서, onCreate를 호출한 후 state를 초기화해줍니다.