Learn | Next.js
Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more.
nextjs.org
참고 :
페이스북에서 리액트 도큐먼트를 새로 교체할 계획입니다.시작 :
DOM은 무엇인가요?
JS와 DOM 메소드로 UI 업데이트하기
우리는 아마추어가 아니니까 구구절절한 내용은 생략합니다.
<!-- index.html -->
<html>
<body>
<div id="app"></div>
<script type="text/javascript">
// Select the div element with 'app' id
const app = document.getElementById('app');
// Create a new H1 element
const header = document.createElement('h1');
// Create a new text node for the H1 element
const headerContent = document.createTextNode(
'Develop. Preview. Ship. 🚀',
);
// Append the text to the H1 element
header.appendChild(headerContent);
// Place the H1 element inside the div
app.appendChild(header);
</script>
</body>
</html>
HTML vs the DOM
명령적 vs 선언적 프로그래밍
내가 보여주고자 하는 것(what)을 묘사하고, 컴퓨터가 방법(how)를 다루게 합시다. 그래서 리액트를 사용합니다.
(요리사에게 피자를 만드는 방법을 알려주기 vs 피자를 주문하기 🍕)
리액트 시작하기
- react는 React 코어 라이브러리입니다.
- react-dom은 DOM과 함께 React를 사용할 수 있도록 하는 DOM 관련 메서드를 제공합니다.
JSX?
- 단일 루트 엘리먼트를 리턴
- 모든 태그는 닫아야 함
- 대부분의 속성을 카멜 케이스로
- JSX는 js로 바뀌고 애트리뷰트는 JS 오브젝트의 키로 변경됨.
- JS는 class같은 예약어나 변수에 -를 포함하는 일을 할 수 없음
- 역사적 이유로 aria-* 및 data-* 속성은 HTML과 같이 대시를 사용하여 작성합니다.
Preserving and Resetting State
A JavaScript library for building user interfaces
beta.reactjs.org
리액트의 렌더링은 컴포넌트를 호출하여, 커밋(실제로 변경된 부분만 돔 변경)하기위한 부분을 계산하기 위한 작업임.
렌더링 과정에서 DOM 위치가 변경되지 않은 요소들은 그대로 재사용함.
sandpack-project - CodeSandbox
sandpack-project using react, react-dom, react-scripts
codesandbox.io
즉, 중요한 것은 렌더링 결과 UI 트리에서의 위치임. 같은 위치에 동일하게 props 변경 없이 나타났다면 완전히 같은 것으로 취급함.
이게 상당한 버그를 만들 수 있음
컴포넌트와 UI 만들기
렌더링을 위한 데이터인 Prop 전달하기
렌더링을 위해 필요한 데이터가 아니면 알 필요가 없습니다.
상태와 훅
훅을 사용하면 상태를 사용하는 추가 로직을 컴포넌트에 더할 수 있습니다.
상태 vs 프롭스
추가 참고자료
'FrontEnd' 카테고리의 다른 글
| 디자인 시스템 컴포넌트를 만들 때 고려할 사항들 (0) | 2022.07.02 |
|---|---|
| CSS Variables를 이용하여 컬러 팔레트 구성하기 (0) | 2022.07.02 |
| 웹 애플리케이션을 구성하는 요소들 (0) | 2022.07.01 |
| React DnD 튜토리얼 (0) | 2022.06.30 |
| CSS : Flex와 min-width (0) | 2022.06.30 |
