❑ 프로젝트 수정
● 1단계 : 필요없는 파일 or 내용은 지운다.
✨주의 : 리액트에서는 import한 파일을 사용하지 않으면 오류가 발생한다.
● public/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"/>
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
● src/App.js
import './App.css';
function App() {
return (
<div className="App">
</div>
);
}
export default App;
● src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
● 블로그 navbar 만들기
(1) 태그에 class를 주고 싶다면?
// HTML
<div class="nav-bar"></div>
// JSX
<div className="nav-bar"></div>class 속성 대신에 className을 사용한다. (이유는 react에서 클래스(class)를 따로 사용하는 부분이 있기 때문에)
(2) 리액트에서 데이터 바인딩 쉽게하는 법
{ 변수명 } : 중활호 안에 변수를 넣으면 사용할 수 있음.
- 변수 말고 함수도 가능
- src, id, href 등의 속성에서도 사용가능
(3) 데이터는 변수에 넣거나 state에 넣거나!
- state
(1) 변수 대신 쓰는 데이터 저장공간
(2) useState()를 이용해서 만들어야 함
(3) 문자, 숫자, array, object 다 저장가능
● state에 데이터를 저장하는 이유 : state는 변경되면 HTML이 자동으로 재렌더링이 된다.(새로고침 없이 변경가능)
(4) 리액트는 클릭할때 onclick이 아니라 onClick을 사용한다
(5) state를 변경할 땐 deep copy해서 수정한다.
- 아래는 배열의 복사에 잘못된 방법(배열의 복사가 아니라 공유)
function change(x){
return x;
}
let Arr = [1, 2, 3, 4];
let newArr = Arr;
newArr[0] = 5;
change(newArr);
- 제대로 된 방법 : array나 object 자료형은 ES6에서 새로 배운 spread operator를 사용해야 한다.
function change(x){
return x;
}
let Arr = [1, 2, 3, 4];
let newArr = [...Arr];
newArr[0] = 5;
change(newArr);
[...Arr] : Arr의 내용을 풀어서 Arr 안에 있는 [ ] 를 삭제하고 안에 있는 내용을 다시 [ ] 안에 담는다.
❑ 프로젝트 수정
● 웹사이트의 뼈대를 구성하는 태그
❑ 프로젝트 수정
● 웹사이트의 뼈대를 구성하는 태그
'React' 카테고리의 다른 글
| [React] Component 생명주기(LifeCycle)와 Hooks (0) | 2024.01.18 |
|---|---|
| [React] 프로젝트 생성 및 설정 (0) | 2024.01.18 |
| [React] 리액트 준비하기 (0) | 2024.01.17 |
| [React] 리액트 첫시간 (0) | 2024.01.16 |
| [React] 리액트를 배울때 기대효과 (0) | 2024.01.16 |