function App() => JS 함수
-> Component
App Component
export 하고 있음 (내보내기)
여기서 App 은 src/index.js에서 import
-> App.js 를 나타냄
App 함수 호출
const root = ReactDOM.createRoot(document.getElementById('root'));root 라는 id를 가진 애 가져오겠다
public 폴더 안에 index.html 안에 있음
root 안에 App.js 안 내용이 들어간 거
React Component와 클래스형, 함수형 컴포넌트
React 컴포넌트는 React 애플리케이션의 구성 요소입니다.
컴포넌트는 재사용 가능하도록 만들어져 있으며, UI를 작은 조각으로 나누어 관리할 수 있습니다.
React 컴포넌트는
클래스형 컴포넌트와 함수형 컴포넌트로 나뉩니다.
클래스형 컴포넌트는 React.Component 클래스를 상속받아 구현하며,
함수형 컴포넌트는 함수로 구현합니다.
컴포넌트는 다른 컴포넌트를 포함할 수 있으며, 부모-자식 관계를 가집니다.
부모 컴포넌트는 자식 컴포넌트에게 props라는 속성을 전달할 수 있습니다.
자식 컴포넌트는 props를 통해 전달받은 값을 사용하여 UI를 렌더링합니다.
App.js
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
아래 코드를 JSX 문법이라고 함
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
// 'root' 라는 id를 가진 DOM 요소를 찾아 그것을 루트로 사용하도록 설정함(public 폴더의 index.html에 존재)
root.render( // 루트를 통해 React 요소를 렌더링함. -> 즉, <App /> 컴포넌트가 렌더링되어 DOM에 삽입됨.
<React.StrictMode>
<App />
</React.StrictMode>
// <React.StrictMode> :
// Strict Mode는 개발 중에 일부 문제를 검사하고 경고를 표시하여 개발자에게 앱의 잠재적인 문제를 알려줌.
// 만들어두고 사용 안하고 있으면 그것도 알려줌
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
jsx 주석 처리 방법
ctrl + / {/**/}
터미널 ctrl + shift + ` (백틱)으로 열고
터미널에서 yarn start 서버 켜기
터미널에서 ctrl + c 서버 끄기
App.js 내용 수정
import logo from './logo.svg';
import './App.css';
function App() {
return (
<h1>Hello, world!</h1>
);
}
export default App;
출력 화면
src 폴더 안에 exam 폴더 생성 후 새파일 컴포넌트 역할을 하는 파일 만들어줌
대문자로 시작 Exam1.js 파일 생성
Component :
React 앱의 구성 요소로, 재사용 가능하도록 만들어져 있으며
UI를 작은 조각으로 나누어 관리함.
컴포넌트 명은 보통 대문자로 작성함.
컴포넌트 아래와 같이 두가지로 나뉨.
1. 클래스형 컴포넌트 : React.Component 클래스를 상속 받아 구현
2. 함수형 컴포넌트 : 함수형태로 구현
클래스형 컴포넌트
Exam1.js
// Component 예제 1
import { Component } from "react";
/*
Component :
React 앱의 구성 요소로, 재사용 가능하도록 만들어져 있으며
UI를 작은 조각으로 나누어 관리함.
컴포넌트 명은 보통 대문자로 작성함.
컴포넌트 아래와 같이 두가지로 나뉨.
1. 클래스형 컴포넌트 : React.Component 클래스를 상속 받아 구현
장점 :
- 생명주기 메서드 제공 :
componentDidMount, componentDidUpdate, componentWillUnmount ... 등의 생명주기 메서드를
사용할 수 있어서 컴포넌트의 생명주기 동안 특정 동작을 쉽게 구현할 수 있음
단점 :
- 복잡성 : 문법이 복잡하고, this 키워드를 자주 사용해야함으로 코드를 작성하고 이해하기 어려울 수 있다.
- 함수형 컴포넌트에 비해서 코드 길이가 증가
- Hooks 도입 이후 감소된 사용
2. 함수형 컴포넌트 : 함수형태로 구현 (더 많이 사용함, 클래스형 컴포넌트보다 늦게 나온 거)
장점 :
- 간결함 : 코드 길이가 줄어들었고, this 키워드 사용할 필요가 없어서 이해하기 쉽다.
- Hooks 사용 가능 : Hooks를 사용하여 함수형 컴포넌트에서도
상태관리와 생명주기 메서드와 유사한 기능을 구현할 수 있음
- 성능 최적화 : 메모리 사용이 더 적고, 성능이 더 좋음
단점 :
- Hooks를 사용한 생명주기 관리가 클래스형 컴포넌트의 메서드보다 직관적이지 않을 수 있다.(러닝커브 있을 수 있음)
- 레거시 코드와 호환이 떨어진다.(기존 클래스형 컴포넌트와 호환이 어려울 수 있음)
- state와 props
React 컴포넌트는 두 종류의 데이터를 다룸
1. props(속성) : 부모 컴포넌트로부터 전달되는 읽기 전용 데이터
2. state(상태) : 컴포넌트의 내부에서 관리되며 컴포넌트의 동작 및 UI 렌더링을 제어하는데 사용
(내부 상태를 관리하는데 사용되는 데이터)
*/
// 클래스형 컴포넌트
class Exam1 extends Component { // 컴포넌트의 선언부
// 컴포넌트 정의
// 클래스 구성
// 필드 -> 필요한 변수 넣음
// 생성자(constructor) -> 초기화할 때 어떤 일
constructor(prop) { // prop : 부모에게 받은 속성 매개변수 부모가 Exam1 에 보내준 값을 prop 으로 받음
// java와 같음 메서드 형태
super(prop); // super 생성자 이용해서 prop 전달하겠다는 내용
this.state = {count : 0}; // state : 컴포넌트의 내부 상태를 관리하는데 사용되는 데이터
// state 내부에 count 라는 이름을 가진 상태 초기값이 0이다.
// count 는 Exam1 이라는 컴포넌트의 내부 상태 중 하나의 데이터이며,
// 초기값이 0으로 설정됨. 변수 같은 거
/*
React에서 상태 (state) 와 변수 (variable) 는 둘 다 데이터 저장과 관련되어 있지만,
각기 다른 역할과 사용방식을 가진다.
- 상태(state)는 React 컴포넌트에서 데이터가 저장되는 곳으로, 상태값이 변경될 때마다 컴포넌트가 다시 렌더링된다.
- 변수는 컴포넌트 내에서 상태가 아닌 다른 데이터를 저장하기 위해 사용되므로
변수값이 변경되어도 컴포넌트는 다시 렌더링되지 않는다.
let num = 0;
num = 1 변수 변경
화면에 있는 num 값이 바뀌지 않음 -> js 변수가 변경돼도 화면 렌더링 되지 않음
화면 렌더링 후 변수 변경해도 기존 렌더링된 화면 값 바뀌지 않음
state 는 바뀌자마자 감지해서 화면에 재렌더링됨
*/
}
// 메서드(함수) -> 어떤 기능을 할지
handleClick = () => { // handleClick 이라는 이름의 함수를 정의함
this.setState({ count : this.state.count + 1});
// 이 컴포넌트의 상태(state) 중 count를 현재 상태값에서 +1 한 값으로 상태를 다시 세팅(변경).
}
// render 함수 (클래스형 컴포넌토에서 필수 구문)
render() {
// 화면에 띄워줄 구문을 여기에 작성해주면 됨
// 클래스형 컴포넌트에서 render 함수 안에 return 구문을 필수로 작성해야한다.
// return 에는 무엇을 랜더링할지 작성하면 됨.
return (
<div>
<h1>Count : {this.state.count}</h1>
<button onClick={this.handleClick}>증가</button>
</div>
);
// this.handleClick 에는 호출부 안 써줘도 됨 () 생략
}
// 원래 js 라면 되지 않는 것들이 버튼 클릭 시마다 화면 재렌더링 돼서 숫자가 올라감
}
export default Exam1; // 컴포넌트 내보내기App.js
Exam1 import 및 호출
import logo from './logo.svg';
import './App.css';
import Exam1 from './exam/Exam1';
// 터미널 ctrl + shift + \` (백틱)으로 열고
// 터미널에서 yarn start 서버 켜기
// 터미널에서 ctrl + c 서버 끄기
function App() {
return (
<div>
{/* 여러가지 컴포넌트 불러다 쓸 것임. ctrl + / 눌러서 자동완성 주석처리 */}
<Exam1 />
</div>
);
}
export default App;
함수형 컴포넌트
상태는 모든 곳에서 이용 가능
Exam2.js
// Component 예제 2
import { useState } from "react";
// 함수형 컴포넌트
function Exam2() {
// 함수형 컴포넌트에서 상태를 사용하는 방법
// react 안에 useState import 해서 사용
// Hooks 상태 관리하거나 react 에서 만들어둔 기능 모음
// 그 중에 상태값을 쉽게 다룰 수 있게 만들어둔 useState 가 Hooks 안에 있는 거
const [name, setName] = useState("지윤ʕ•ﻌ•ʔ");
const handleClick = () => {
setName("지윤๑•‿•๑");
// 상태 값을 변경해주는 함수
}
// render 는 클래스형 컴포넌트에서만 사용
return (
// 함수형 컴포넌트는 render() 함수 제외하고 바로 return 작성하면 된다.
<div>
<h1>Hello, {name}</h1>
<button onClick={handleClick}></button>
</div>
);
}
export default Exam2;App.js 에서 Exam2 불러다 쓰면 됨 import 잘 돼있는지 확인
App.js
import logo from './logo.svg';
import './App.css';
import Exam1 from './exam/Exam1';
import Exam2 from './exam/Exam2';
// 터미널 ctrl + shift + \` (백틱)으로 열고
// 터미널에서 yarn start 서버 켜기
// 터미널에서 ctrl + c 서버 끄기
function App() {
return (
<div>
{/* 여러가지 컴포넌트 불러다 쓸 것임. ctrl + / 눌러서 자동완성 주석처리 */}
<Exam1 />
<Exam2 />
</div>
);
}
export default App;
함수형 컴포넌트 많이 사용함
