react-dom package는 앱의 최상위 레벨에서 사용할 수 있는 DOM에 특화된 메서드와 필요한 경우
React 모델 외부로 나갈 수 있는 해결책을 제공합니다. 대다수 컴포넌트는 이 모듈을 사용할 필요가 없습니다.
// 강의에서는 값,식,문에 대한 예시로 JSX문을 사용하면서 ReactDOM.Render()를 사용한 것.
render()
ReactDOM.render(element, container[, callback])
// ex) ReactDOM.render(<div>Hello World!</div>, mountNode);
React 엘리먼트를 container DOM에 렌더링하고 컴포넌트에 대한 참조를 반환합니다 (무상태 컴포넌트는 null을 반환합니다).
React 엘리먼트가 이전에 container 내부에 렌더링 되었다면 해당 엘리먼트는 업데이트하고 최신의 React 엘리먼트를 반영하는 데 필요한 DOM만 변경합니다.
추가적인 콜백이 제공된다면 컴포넌트가 렌더링되거나 업데이트된 후 실행됩니다.
<aside> 💡 주의
ReactDOM.render()는 전달한 컨테이너 노드의 콘텐츠를 제어합니다. 처음 호출할 때 기존의 DOM 엘리먼트를 교체하며 이후의 호출은 React의 DOM diffing 알고리즘을 사용하여 더욱 효율적으로 업데이트합니다.
ReactDOM.render()는 컨테이너 노드를 수정하지 않고 컨테이너의 하위 노드만 수정합니다. 그렇기 때문에 자식 노드를 덮어쓸 필요 없이 기존의 DOM 노드에 컴포넌트를 추가할 수 있습니다.
ReactDOM.render()는 현재 ReactComponent 루트(root) 인스턴스에 대한 참조를 반환합니다. 그러나 이 반환 값을 사용하는 것은 레거시이며 React 신규 버전이 컴포넌트를 비동기로 렌더링하는 경우가 있기 때문에 피해야 합니다. ReactComponent 인스턴스의 참조가 필요하다면 권장하는 해결책은 루트 엘리먼트에 콜백 ref를 붙이는 것입니다.
ReactDOM.render()를 사용해 서버에서 렌더링한 컨테이너에 이벤트를 보충하는 것은 권장되지 않으며 React 17 버전에서 삭제될 예정입니다. [hydrate()](<https://ko.reactjs.org/docs/react-dom.html#hydrate>)를 사용해주세요
</aside>
ReactDOM.hydrate(element, container[, callback])
ReactDOM.unmountComponentAtNode(container)
ReactDOM.findDOMNode(component)
ReactDOM.createPortal(child, container)
<aside> 💡 map()
arr.map(callback(currentValue[, index[, array]])[, thisArg])
callback 새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가집니다.
currentValue 처리할 현재 요소.
index (Optional) 처리할 현재 요소의 인덱스.
array (Optional) map()을 호출한 배열.
thisArg (Optional) callback을 실행할 때 this로 사용되는 값.
배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열.
import React, { Component } from 'react';
import './MyComponent.css';
class MyComponent extends Component
{
render(){
const menus = ["Menu1", "Menu2", "Menu3", "Menu4"]
const menuList = menus.map((menu, index) => (<li key={index}>{menu}</li>));
return(
<ul>
{menuList}
</ul>
)
};
}
export default MyComponent;
Key 설정
리액트(React)에서는 컴포넌트를 렌더링 하였을 때 어떤 원소가 변경되었는지 빠르게 감지하기 위해 사용된다. 만약 key가 설정되지 않았다면 가상 DOM을 순차적으로 비교하면서 감지하기 때문에 key가 없을때보다 속도가 느리다. 이러한 key 값은 보통 map() 함수를 호출할 때 인자로 넘기는 Callback 함수의 두번째 인자로 넘어오는 index 값을 사용한다.
</aside>
<aside> 💡 filter()
arr.filter(callback(element[, index[, array]])[, thisArg])
callback 각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버립니다. 다음 세 가지 매개변수를 받습니다.
element 처리할 현재 요소.
index (Optional) 처리할 현재 요소의 인덱스.
array (Optional) filter를 호출한 배열.
thisArg (Optional) callback을 실행할 때 this로 사용하는 값.
테스트를 통과한 요소로 이루어진 새로운 배열. 어떤 요소도 테스트를 통과하지 못했으면 빈 배열을 반환합니다.
const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
/**
* 검색 조건에 따른 배열 필터링(쿼리)
*/
const filterItems = (query) => {
return fruits.filter((el) =>
el.toLowerCase().indexOf(query.toLowerCase()) > -1
);
}
console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']
</aside>