⚛️ 기본 환경: IDE: VS code, Language: React
발생 Error
React에서 다음 Source Code를 실행할 경우,
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
const App = () => {
const [courseGoals, setCourseGoals] = useState([
{ text: "Do all exercises!", id: "g1" },
{ text: "Finish the course!", id: "g2" },
]);
const addGoalHandler = (enteredText) => {
setCourseGoals((prevGoals) => {
const updatedGoals = [...prevGoals];
updatedGoals.unshift({ text: enteredText, id: "goal1" });
return updatedGoals;
});
};
return (
<div>
<section id="goal-form">
<CourseInput onAddGoal={addGoalHandler} />
</section>
<section id="goals">{content}</section>
</div>
);
};
|
cs |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
const CourseInput = (props) => {
const [enteredValue, setEnteredValue] = useState('');
const [isValid, setIsValid] = useState(true);
const formSubmitHandler = (event) => {
event.preventDefault();
if (enteredValue.trim().length === 0) {
setIsValid(false);
return;
}
props.onAddGoal(enteredValue);
};
return (
<form onSubmit={formSubmitHandler}>
<div
className={`${styles['form-control']} ${!isValid && styles.invalid}`}
>
<label>Course Goal</label>
<input type="text" onChange={goalInputChangeHandler} />
</div>
<Button type="submit">Add Goal</Button>
</form>
);
};
|
cs |
🚨 Add Goal 실행 시, 다음과 같은 경고 발생
Warning: Encountered two children with the same key, `goal1`.
Keys should be unique so that components maintain their identity across updates.
Non-unique keys may cause children to be duplicated and/or omitted
발생 원인
map()을 통해서 반복문을 실행 할 경우, key값을 중복하여 부여함
|
|
const addGoalHandler = (enteredText) => {
setCourseGoals((prevGoals) => {
const updatedGoals = [...prevGoals];
updatedGoals.unshift({ text: enteredText, id: "goal1" });
return updatedGoals;
});
};
|
cs |
addGoalHandler로 추가되는 데이터값의 id가 goal1으로 고정되어있으며,
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
const CourseGoalList = props => {
return (
<ul className="goal-list">
{props.items.map(goal => (
<CourseGoalItem
key={goal.id}
id={goal.id}
onDelete={props.onDeleteItem}
>
{goal.text}
</CourseGoalItem>
))}
</ul>
);
};
|
cs |
해당 id값을 이용하여 key값을 부여하였으므로 중복값 발생
해결 방법
중복되지 않은 key값 부여
|
|
const addGoalHandler = (enteredText) => {
setCourseGoals((prevGoals) => {
const updatedGoals = [...prevGoals];
updatedGoals.unshift({ text: enteredText, id: Math.random().toString() });
return updatedGoals;
});
};
|
cs |
