map을 통한 렌더링
export function Parent() {
const [array, setArray] = useState([1, 2, 3, 4, 5]);
useEffect(() => {
setTimeout(() => {
setArray((prev) => [6,7,8,9,10,...prev]);
}, 3000);
}, []);
return (
<>
{array.map((item) => (
<Child key={item} item={item} />
)}
</>
);
}
export function Child({ item }: { item: number }) {
console.log(item);
return <>{item}</>
}
실험 결과: 1 2 3 4 5
export function Parent() {
const [array, setArray] = useState([1, 2, 3, 4, 5]);
useEffect(() => {
setTimeout(() => {
setArray((prev) => [6,7,8,9,10,...prev]);
}, 3000);
}, []);
return (
<>
{array.map((_, index) => (
<Child key={index} item={item} />
)}
</>
);
}
실험 결과: 6, 7, 8, 9, 10, 1, 2, 3, 4, 5
export function Parent() {
const [array, setArray] = useState([1, 2, 3, 4, 5]);
useEffect(() => {
setTimeout(() => {
setArray((prev) => [...prev.slice(0, 2), 10, ...prev.slice(3,prev.length)]);
}, 3000);
}, []);
return (
<>
{array.map((item) => (
<Child key={item} item={item} />
)}
</>
);
}
export function Child({ item }: { item: number }) {
return <>{item}</>
}
실험 결과: 10
export function Parent() {
const [array, setArray] = useState([1, 2, 3, 4, 5]);
useEffect(() => {
setTimeout(() => {
setArray((prev) => [...prev.slice(0, 2), 10, ...prev.slice(3,prev.length)]);
}, 3000);
}, []);
return (
<>
{array.map((_, index) => (
<Child key={index} item={item} />
)}
</>
);
}
export function Child({ item }: { item: number }) {
return <>{item}</>
}
실험 결과: 10
실험 1
상태: [1, 2, 3, 4, 5] => [6, 7, 8, 9, 10, 1, 2, 3, 4, 5]
결과:
- react.memo로 감싸지 않았을 경우:
- key가 item인 경우: 리렌더링시 6, 7, 8, 9, 10, 1, 2, 3, 4, 5 출력
- key가 index인 경우: 리렌더링시 6, 7, 8, 9, 10, 1, 2, 3, 4, 5 출력
- react.memo로 감쌌을 경우:
- key가 item인 경우: 리렌더링시 6, 7, 8, 9, 10 출력
- key가 index인 경우: 6, 7, 8, 9, 10, 1, 2, 3, 4, 5 출력
실험 2
상태: [1, 2, 3, 4, 5] => [1, 2, 10, 4, 5]
결과:
- react.memo로 감싸지 않았을 경우:
- key가 item인 경우: 리렌더링시 1, 2, 10, 4, 5 출력
- key가 index인 경우: 리렌더링시 1, 2, 10, 4, 5 출력
- react.memo로 감쌌을 경우:
- key가 item인 경우: 리렌더링시 10 출력
- key가 index인 경우: 1, 2, 10, 4, 5 출력
결론:
- react memo를 사용하면 부모 리렌더링시, 동일한 key에 대해 prop이 변경되지 않는다면 자식의 리렌더링이 발생하지 않는다. 다만 prop이 변경되면 리렌더링이 발생한다.
- react memo를 사용하지 않는다면 부모 리렌더링시 항상 자식의 리렌더링이 발생한다.
실험 2
부모 컴포넌트 상태: [1, 2, 3] => [3, 2, 1]
자식 컴포넌트 상태: text
export function Parent() {
const [array, setArray] = useState([1,2,3]);
useEffect(() => {
setTimeout(() => {
setArray((prev) => prev.toReversed());
}, 3000);
});
return (
<>
{array.map((item) => (
<Child key={item} item={item} />
)}
</>
);
}
export function Child({ item }: { item: number }) {
const [text, setText] = useState("");
return (
<>{item}th textfield:
<input value={text} onChange={(event) => setText(event.target.value)}/>
</>
);
}
결과:
실험 2
부모 컴포넌트 상태: [1, 2, 3] => [3, 2, 1]
자식 컴포넌트 상태: text
export function Parent() {
const [array, setArray] = useState([1,2,3]);
useEffect(() => {
setTimeout(() => {
setArray((prev) => prev.toReversed());
}, 3000);
});
return (
<>
{array.map((item) => (
<Child key={item} item={item} />
)}
</>
);
}
export function Child({ item }: { item: number }) {
const [text, setText] = useState("");
return (
<>{item}th textfield:
<input value={text} onChange={(event) => setText(event.target.value)}/>
</>
);
}
export function Parent() {
const [array, setArray] = useState([1,2,3]);
useEffect(() => {
setTimeout(() => {
setArray((prev) => prev.toReversed());
}, 3000);
});
return (
<>
{array.map((item) => (
<Child key={index} item={item} />
)}
</>
);
}
export function Child({ item }: { item: number }) {
const [text, setText] = useState("");
return (
<>{item}th textfield:
<input value={text} onChange={(event) => setText(event.target.value)}/>
</>
);
}
결과:
원인:
- 이전렌더 key의 컴포넌트 종류 === 이후 렌더 컴포넌트 종류일 경우 unmount/mount하지 않는다. 실험 같은 경우 Child로 이전 렌더와 이후 렌더의 컴포넌트 종류 같아서 unmount/mount가 발생하지 않는다.
- 이전 렌더 컴포넌트와 이후 렌더 컴포넌트에서 같은 종류의 컴포넌트 instance에 대해서는, state가 유지된다. 즉, key와 state가 매핑된다. 따라서 index를 key로 사용하였을 경우, array 순서 변경이 일어날 때 index와 자식 상태(text)가 매핑되어서 순서 변경이 제대로 일어나지 않는다. 반면 item을 key로 사용하였을 경우에는 array 순서 변경이 일어날 때 item와 자식 상태(text)가 매핑되어서 순서 변경이 정상적으로 같이 일어난다.
결론
- index를 key로 사용해도 괜찮다. 다만 요소 순서의 변경이 일어날 때는 index를 key로 사용하면 안 된다.
- 자식 컴포넌트의 상태가 key와 매핑되는데, index와 매핑되는 경우 요소 순서 변경이 일어나도 상태 순서 변경이 일어나지 않기 때문이다.
SOCIAL SHARE CARD GENERATOR