728x90
[ 오늘 알게된 것 ]
1. DOM Selector API라는 용어
보통 document.querySelector()을 많이 사용했는데
이외에도 document.getElementById()등과 같은 DOM을 변형시키기 위한
작업때 사용한 태그들을 총칭하는 용어임을 알게됨
2. 사용자 인터랙션에 따른 규칙의 멜팅팟해결사 리엑트
DOM을 건드리는 작업이 사용자 인터랙션에 의해 많아질 수록 난잡해졌던 경험이 떠올려졌음.
이를 일일이 자바스크립트 변수로 관리하는 것도 여간 쉽지 않았고,
동적으로 상태를 관리하는게 어려웠던 기억이 남.
그런데 리엑트는 그런 부분을 useState를 활용해 해결할 수 있었던 부분이 좋았음.
리엑트나 앵귤러나 서로 작동방식이 다를뿐 근본목적은
특정 DOM의 속성이 바뀌도록 연결해주어
페이지 리렌더링 작업을 간소화해주는게 목표임.
하지만 리엑트는 유독 DOM을 어떻게 업데이트할지 규칙이 정해진게 아니라
아예 다 날려버리고 처음부터 모든걸 새롭게 보여주는 아이디어에서 착안한 것이 놀라웠음.
이것의 장점은 개발자의 고민을 줄여준다면
단점도 존재함.
바로 규모가 큰 웹앱은 속도가 굉장히 느린것
but, 리엑트는 Virtual DOM을 사용해 이를 가능케 했음.
3. Virtual DOM의 성능은 어마어마함
일명 가상돔은 실제로 보여지는 DOM이 아님.
그냥 메모리에 가상으로 존재하는 JS객체임.
그래서 작동성능이 실제로 브라우저에서 보여주는 것보다 빠름.
이런 장점 덕분에 리엑트 상태가 업데이트되면
브라우저 DOM트리와 가상DOM 트리에서 다른 부분은
실제 브라우저에 패치시켜주는 알고리즘이 작동됨.
리액트 개발팀 짱짱
4. Node.js가 필요한 이유
Webpack과 Babel과 같은 도구들이 자바스크립트 런타임인 Node.js를 기반하기 때문
5. App.js가 아닌 다른 js파일에서 컴포넌트를 내보내는 방법
export default Hello;
보통 함수형 컴포넌트를 많이 사용하므로 아래는 함수형 컴포넌트임
function Hello(){
return <div>..</div>
}
6. 다른 파일에 있는 컴포넌트 불러와서 사용하는 방법
import Hello from './Hello';
return 안에 <Hello />하면 끝!
7. ReactDOM.render의 역할은 실제 DOM내부에 리엑트 컴포넌트 뿌리기
index.js에서 ReactDOM.render 코드를 발견할 수 있음
특히 id가 root인 DOM을 선택하고 있는데 이는
index.html을 열어보면 내부에 'root'라는 id를 가진
div태그를 발견할 수 있음
8. JSX는 얼핏보면 HTML처럼 보임
return <div></div>
but JS임
9. Babel의 역할
리엑트 컴포넌트 파일에서 XML형태로 코드를 작성하면
JSX를 javascript로 변환해줌
즉 자바스크립트 문법을 확장해주는 도구임
구형브라우저에서도 해당 코드가 실행되도록 버전에 맞게 js코드를 포맷팅해주는 역할임
하지만 중요한게 있음.
반드시 모든 태그들을 닫아주어야됨.
html은 input 태그나 br태그를 사용할때 닫지 않지만 리엑트는 이러면 에러뜸
728x90
'{React}' 카테고리의 다른 글
| 10.03.22{코딩일기} 벨로퍼트와 함께하는 모던 리액트 1-12~13 챕터리뷰 (2) | 2022.10.03 |
|---|---|
| 10.03.22{코딩일기} 벨로퍼트와 함께하는 모던 리액트 1-11 챕터리뷰 (2) | 2022.10.03 |
| 09.30.22{코딩일기}벨로퍼트와 함께하는 모던 리액트 1-10 챕터리뷰 (2) | 2022.10.01 |
| 09.30.22{코딩일기}벨로퍼트와 함께하는 모던 리액트 1-9 챕터리뷰 (0) | 2022.09.30 |
| 09.29.22{코딩일기}벨로퍼트와 함께하는 모던 리액트 1-5~1-9 챕터리뷰 (0) | 2022.09.29 |
댓글