2024.01.19 TIL

append와 appendChild의 차이

appendChild:

parentElement.appendChild(newElement);

• appendChild 메소드는 주어진 부모 요소(parentElement)의 자식으로 주어진 새로운 요소(newElement)를 추가한다. 하나의 노드만 추가하고, 이미 존재하는 요소를 추가할 수도 있다.

append:

parentElement.append(newElement1, newElement2, ...);

• append 메소드는 하나 이상의 노드나 텍스트를 동시에 여러 개 추가할 수 있다.
• 또한, 문자열을 직접 전달하여 텍스트 노드를 생성하거나, DOM 노드 객체를 추가할 수 있다.
• 여러 개의 인자를 받기 때문에 여러 노드를 한 번에 추가하는 데 편리하다.

ex)

const parentElement = document.getElementById("parent");

// appendChild 사용
const newElement1 = document.createElement("div");
parentElement.appendChild(newElement1);

// append 사용
const newElement2 = document.createElement("span");
const newElement3 = document.createTextNode("Text Node");
parentElement.append(newElement2, newElement3);

 

즉 append는 appendChild의 확장된 형태로 여러 개의 노드나 텍스트를 한 번에 추가할 수 있는 메서드이다. 

단, append를 지원하지 않는 브라우저도 있으니 주의해야함.

 

 

props를 구조분해할당으로 받기

구조분해할당으로 받지 않았을 때

props가 객체 형태로 반환된다.

 

구조분해할당으로 받았을 때

props 안의 객체들이 하나씩 반환된다.