react next 공부하기(기본개념) - 1
참고문헌: https://nextjs.org/learn/foundations/about-nextjs/what-is-nextjs
* 사용용어
- 사용자 인터페이스 - 사용자가 애플리케이션을 사용하고 상호 작용하는 방법입니다.
- 라우팅 - 사용자가 애플리케이션의 다른 부분 사이를 탐색하는 방법입니다.
- 데이터 가져오기 - 데이터가 있는 위치와 가져오는 방법.
- 렌더링 - 정적 또는 동적 콘텐츠를 렌더링하는 시기와 위치입니다.
- 통합 - 사용하는 타사 서비스(CMS, 인증, 결제 등) 및 연결 방법.
- 인프라 - 애플리케이션 코드(서버리스, CDN, Edge 등)를 배포, 저장 및 실행하는 곳입니다.
- 성능 - 최종 사용자를 위해 애플리케이션을 최적화하는 방법.
- 확장성 - 팀, 데이터 및 트래픽이 증가함에 따라 애플리케이션이 조정되는 방식입니다.
- 개발자 경험 - 팀의 애플리케이션 구축 및 유지 관리 경험.
*명령형 대 선언적 프로그래밍
리액트는 선언적 프로그래밍이다.
명령형 프로그래밍 : 사용자 인터페이스를 업데이트 하는 방법 에 대한 단계를 작성
선언적 프로그래밍 : DOM 메서드를 작성하는 대신 개발자가 표시하려는 항목을 선언할 수 있음
* react, react-dom
- react 는 핵심 React 라이브러리입니다.
- react-dom 은 DOM과 함께 React를 사용할 수 있도록 하는 DOM 관련 메서드를 제공합니다.
* jsx
- 태그는 유효한 자바스크립트 문법이 아니다.
- 브라우저는 기본적으로 JSX를 이해하지 못하므로 JSX 코드를 일반 JavaScript로 변환하려면 Babel 과 같은 JavaScript 컴파일러가 필요합니다.
* react 를 사용한 결과 (달라진점)
1. 반복적인 코드를 줄인다.
2. 사용자를 대신하여 작업을 수행하는 재사용 가능한 코드 스니펫이 포함된 라이브러리이다.
적용전
<script type="text/javascript">
const app = document.getElementById('app');
const header = document.createElement('h1');
const headerContent = document.createTextNode('Develop. Preview. Ship. 🚀');
header.appendChild(headerContent);
app.appendChild(header);
</script>적용 후
<script type="text/jsx">
const app = document.getElementById("app")
ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app)
</script>
* javascript 최신문법 사용 (es6)
- Functions and Arrow Functions
- Objects
- Arrays and array methods
- Destructuring
- Template literals
- Ternary Operators
- ES Modules and Import / Export Syntax
* React 핵심 개념
- Components
- Props
- State
* 기본 구성요소 만들기
1. React 에서 컴포넌트는 함수이다.
2. React 구성 요소는 일반 HTML 및 JavaScript와 구별하기 위해 대문자로 표시해야 한다.
3. 꺾쇠 괄호를 사용하여 일반 HTML 태그를 사용하는 것과 같은 방식으로 React 구성 요소를 사용합니다.
<!-- index.html -->
<html>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/jsx">
const app = document.getElementById("app")
function Header() {
return <h1>Develop. Preview. Ship. 🚀</h1>;
}
ReactDOM.render(<Header />, app);
</script>
</body>
</html>
* 중첩 구성 요소 만들기
function Header() {
return <h1>Develop. Preview. Ship. 🚀</h1>;
}
function HomePage() {
return (
<div>
{/* Nesting the Header component */}
<Header />
</div>
);
}
ReactDOM.render(<Header />, app);
* Props 로 데이터 표시하기
정보 조각을 React 구성 요소에 속성으로 전달할 수 있는데, 이것들을 props 라고 한다.
React에서 데이터는 구성 요소 트리를 따라 흐릅니다. 이를 단방향 데이터 흐름 이라고 합니다.
자식컴포넌트는 props 를 첫번째 매개변수로 받아들인다.
const app = document.getElementById("app")
function Header({title}) {
return <h1>{title}</h1>;
}
function HomePage() {
return (
<div>
<Header title="React 💙" />
</div>
);
}
ReactDOM.render(<HomePage />, app);jsx 내부에 중괄호 내부에서는 javascript 문법과 동일하게 사용할 수 있다.
ex 함수호출 ---->
function createTitle(title) {
if (title) {
return title;
} else {
return 'Default title';
}
}
function Header({ title }) {
return <h1>{createTitle(title)}</h1>;
}
* 목록 반복하여 출력하기 (map) + event 사용하기
function HomePage() {
const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
return (
<div>
<Header title="React 💙" />
<ul>
{names.map((name) => (
<li key={name}>{name}</li>
))}
</ul>
<button onClick={handleClick}>Like</button>
</div>
);
}
* react hooks 사용하기
배열의 첫 번째 항목은 state value이며 이름은 무엇이든 지정할 수 있습니다.
배열의 두 번째 항목은 update값에 대한 함수입니다.
useState 내에 들어가는 파라미터는 초기값입니다.
const [likes, setLikes] = React.useState(0);주의 ::
첫 번째 함수 매개 변수로 구성 요소에 전달되는 props와 달리 상태는 구성 요소 내에서 시작되고 저장됩니다. 상태 정보를 props로 자식 구성 요소에 전달할 수 있지만 상태를 업데이트하는 논리는 상태가 처음 생성된 구성 요소 내에서 유지되어야 합니다.
따라서
props 는 읽기전용 정보, state는 양방향