javascript로 todo-list 를 구현하고 그 기능을 React로 옮기려다보니 궁금증이 생겼다.
" React에서도 DOM에 접근하여 요소를 불러오는가? "
React가 Javascript 를 근간으로 하는 프레임워크는 맞다. Javascript의 방식 그대로 querySelector() 또는 getElementById() 등의 메소드를 사용하려는 접근은 어찌 보면 매우 자연스러운 것이다. 하지만 각 언어마다 고유의 특성과 지향점이 있다는 것을 잊지말자.
📝 React 의 특징
💡 Virtual DOM(가상돔)
리액트는 가상돔을 사용한다. 가상돔은 메모리 상에서 동작하며 실제 렌더링 되지 않는다. 따라서 연산 시간이 최소화되고 어플리케이션의 성능을 극대화 시킨다.💡 JSX : 자바스크립트와 html을 동시에 사용하는 리액트의 독특한 문법
🔃
💡 선언형 프로그래밍 (핵심은 what)
프로그래밍 방식에는 선언형, 명령형 방식이 존재한다. 선언형 프로그래밍 방식은 추상화를 통해 시스템이 궁극적으로 무엇을 실행하는가에 초점을 둔다.JSX 문법과 선언형 프로그래밍은 유기적 관계가 있다. JSX 문법을 사용하기 때문에 선언형 프로그래밍 방식이 유리하다.
💡 컴포넌트 기반
컴포넌트로 코드를 구조화한다. 각 컴포넌트는 재사용 할 수 있다는 것이 핵심이다. 재사용을 통해 생산성을 향상시킬 수 있다.
📝 선언형 프로그래밍(What) vs 명령형 프로그래밍(How)
결론
리액트는 DOM에 직접 접근을 지양한다. DOM에 접근이 불가한 것은 아니며 필요한 경우 useRef() 를 사용할 수 있다.
유익한 글이었습니다.