React Study
babel: 최-신 js 파일을 이전 버전에서도 동작되도록 변환(transpiling)
webpack: 파일을 모아 하나의 js 파일로 변환
React-DOM: 변환된 아이들을 html과 연결
사용자에게 최종적으로 전달되는 파일은 index.html 라고 보면 된다.
vscode 내부에서 cmd + p를 입력하면, 각 이름에 해당하는 파일로 이동하기 쉽다.
useStrict
<React.StrictMode>를 이용하면 조금 더 엄격하게 개발이 가능합니다.
하지만 개발 모드에서만 활성화되기 때문에 프로덕션 빌드에는 영향을 끼치지 않습니다.
react.js 문서
에 따르면, 아래와 같은 부분에서 도움이 된다고 합니다.
- 안전하지 않은 생명주기를 사용하는 컴포넌트 발견
- 레거시 문자열 ref 사용에 대한 경고
- 권장되지 않는 findDOMNode 사용에 대한 경고
- 예상치 못한 부작용 검사
- 레거시 context API 검사
DOM vs. Virtual DOM
DOM(Document Object Model)
DOM은 HTML, XML 문서의 프로그래밍 인터페이스입니다.
웹 브라우저는 이런 DOM을 이용하여 객체에 자바스크립트와 css를 적용합니다.
DOM의 객체 구조는 노드 트리로 표현 됩니다.
동작 절차는 다음과 같습니다.
1. DOM tree 생성
2. CSSOM tree 생성
3. Render tree
Virtual DOM
리액트는 Virtual DOM을 사용하여 DOM 업데이트를 추상화합니다.
DOM을 조작할 때마다 엔진이 웹 페이지를 새로 그리게 되면 유저 입장에서 속도가 느리다고 느낄 수 있습니다.
만약 DOM을 최소한만 업데이트 하는 것은 어떨까요?
Virtual DOM은 바뀐 부분만 DOM에 적용할 수 있도록 도와줍니다.
동작 절차는 다음과 같습니다.
1. 데이터 업데이트
2. Virtual DOM: UI re-render
3. 이전 Virtual DOM과 현재 Virtual DOM 비교
4. 바뀐 부분을 실제 DOM에 적용
JSX
HTML: 마크업 언어
JSX: JS 기반 코드로 비즈니스 로직 작성 가능
=> {} 괄호 안에 로직을 넣으면 불러올 수 있습니다.
두 가지 이상의 자식 노드를 사용하려면 div 태그로 묶을 수도 있지만 의미가 없이 단순히 묶기만 하려면 <React.Fragment> 또는 아무런 태그 없이 <>를 작성하면 묶을 수 있습니다.
이외에 아래 처럼 사용하는 명칭이 조금 다른 것도 있다고 합니다.
class -> className
onclick -> onClick
tabindex -> tabIndex
로직을 사용할 수 있기 때문에 UI 측면에서 시각적 도움이 된다고 합니다.
font-awesome
fontawesome 설치하기
yarn add @fortawesome/fontawesome-free
fontawesome 사용하기
import '@fortawesome/fontawesome-free/js/all.js';
자세한 방법은 이곳에서 확인도 가능합니다.
font-awesome은 웹 아이콘 폰트 라이브러리 입니다. HTML Font 속성 사용도 가능학, CSS 적용도 가능합니다.
위에서 저는 free 를 붙여 무료 버전을 사용하였는데, 무료도 굉장히 많은 종류의 아이콘을 사용할 수 있어서 좋았습니다.
