리스트 데이터 추가하기
리스트 데이터 추가하기
React 는 단방향으로만 데이터가 흐릅니다.
또한 같은 레벨에 있는 컴포넌트 는 서로 데이터를 교환 할 수 없습니다.
이런 경우 공통 부모요소로 끌어올려서 해결을 할 수 있습니다.
구조
- 같은 레벨이라 함은
DiaryEditor
와DiaryList
입니다. - 공통 부모인
App
컴포넌트가 데이터를 배열 형식의state
로 받습니다. data
state 의 값을DiaryList
에게 전달하면서 리스트를 렌더링 하게 하고data
state 를 변화 시킬 수 있는 상태변화 함수인setData
를DiaryEditor
에게 props 으로 전달하면 됩니다.
시뮬레이션
data
state 는 배열이고[itme1]
하나의 아이템을 가지고 있는 상태 입니다.data
를 props 로 내려받은DiaryList
컴포넌트는[itme1]
만 렌더링 하고 있는 상태 입니다.- 이때,
DiaryEditor
컴포넌트에서 새로운 아이템을 만들면App
컴포넌트 에서
DiaryEditor
컴포넌트에게 props 으로 전달한setData
함수를 호출 합니다.
- 새로운 아이템을 추가 합니다.
App
컴포넌트가DiaryEditor
컴포넌트에게 props 으로 전달한setData
함수를 호출 합니다.setData
는data
의 상태를[itme1, item2 .... ]
새로운 아이템을 추가 합니다.
App.js
import { useRef, useState } from 'react';
import './App.css';
import DiaryEditor from './DiaryEditor';
import DiaryList from './DiaryList';
function App() {
const [data, setData] = useState([]); // state-배열로 저장할 예정 (리스트)
const dataId = useRef(0);
const onCreate = (author, content, emotion) => {
const create_date = new Date().getTime();
const newItem = {
author,
content,
emotion,
create_date,
id: dataId.current, // 0 을 가리킨다.
};
dataId.current += 1; // id 의 값이 1씩 증가한다.
setData([newItem, ...data]); // 새로운 아이템이 위로 올라오게 하기 위해서 newItem 을 먼저 사용
};
return (
<div className="App">
<DiaryEditor onCreate={onCreate} />
<DiaryList diaryList={data} />
</div>
);
}
export default App;
DiaryEditor.js
import { useRef, useState } from 'react';
const DiaryEditor = ({ onCreate }) => {
const authorInput = useRef();
const contentInput = useRef();
const [state, setState] = useState({
author: '',
content: '',
emotion: 1,
});
const handleChangeState = (e) => {
setState({
// 변경할 태그의 이름인 author 와 content 는 실제로 바꿔야 하는 state 속성의 key 와 같습니다.
...state,
[e.target.name]: e.target.value,
});
};
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,
});
};
return (
<div className="DiaryEditor">
<h2>오늘의 일기</h2>
<div>
<input
ref={authorInput}
name="author"
value={state.author}
onChange={handleChangeState}
/>
</div>
<div>
<textarea
ref={contentInput}
name="content"
value={state.content}
onChange={handleChangeState}
></textarea>
</div>
<div>
<select
name="emotion"
value={state.emotion}
onChange={handleChangeState}
>
<option value={1}>1</option>
<option value={2}>2</option>
<option value={3}>3</option>
<option value={4}>4</option>
<option value={5}>5</option>
</select>
</div>
<div>
<button onClick={handleSubmit}>일기 저장하기</button>
</div>
</div>
);
};
export default DiaryEditor;
React 로 만든 컴포넌트들은
- 트리 형태의 구조를 띄며, 데이터는 위에서 아래로만 움직이게 되는 단방향 구조 입니다.
- 추가, 수정, 삭제 등 이벤트들은
setData
같은 함수를 props 로 전달을 하고 - 이벤트들은 아래에서 -> 위로 올라가는 구조 라고 생각 할 수 있습니다.
참고
Author And Source
이 문제에 관하여(리스트 데이터 추가하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hoho_0815/리스트-데이터-추가하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)