node_modules : 라이브러리 모은 폴더
public : static 파일 보관함
src : 소스 코드 보관함
package.json : 설치한 라이브러리 목록
src -> index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();src -> App.js
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
// 여기에 평소 웹 만들던것처럼 HTML 코딩을 진행하면 된다.
</div>
);
}
export default App;
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"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
//여기에 App.js 들어와진다!!!!!!!
</div>
</body>
</html>jsx 에서는
class 말고 classNmae으로 지정해야함!
왜냐면 class가 이미 js에 정의되어있기 때문이다.
App.js
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<div className="black-nav">
리액트 적응하기 1일차
</div>
</div>
);
}
export default App;App.css
.App {
text-align: center;
}
body{
font-family: 'nanumsquare';
}
.black-nav {
background: black;
width: 100%;
display: flex;
color: white;
padding: 20px;
font-weight: 600;
font-size: 20px;
}리액트를 쓰는 이유
그렇다면 왜 리액트를 쓰는 것인가,,?
데이터 바인딩
데이터 바인딩이 쉽다!!
데이터 바인딩 : 데이터를 HTML에 꽂아넣는것
중괄호 !!!!!!!!!
{변수명, 함수 } 으로 한번에 바인딩이 된다.
src, id, href 등의 속성에도 { 변수명, 함수 등 } 적용 가능
상상하는 모든 곳에 { } 로 변수 집어넣기 가능
js
document.getElementById().innerHTML = "binding"react
function App() {
let server_data = '서버 데이터';
function ten(){
return 10
}
return (
<div className="App">
<div className="black-nav">
리액트 적응하기 1일차
</div>
<div className = {server_data} >
서버 데이터 클래스 이름
</div>
<img src ={ logo }/>
<h3> { server_data }</h3>
<h4>{ ten() }</h4>
</div>
);
}JSX style 속성
오브젝트 형식으로 넣어야 한다
style = { object 자료형으로 만든 스타일 }
여러개일 경우 콤마로 구분!
camelCase 작명 습관을 따라서 자스에 있는 - 기호를 다 바꿔주어야 한다.
<h3 style = {
{ color : 'purple',
fontSize : '20px'
}
}>
{ server_data }</h3>function App() {
let server_data_style = { color : 'purple', fontSize : '20px'};
let server_data = '서버 데이터';
return (
<div className="App">
<div className="black-nav">
리액트 적응하기 1일차
</div>
<img src ={ logo }/>
<h3 style = { server_data_style } > { server_data }</h3>
</div>
);
}state
리액트에서 데이터는
변수에 넣거나 state에 넣거나 둘 중 하나 인데 !!!
state를 사용하여 쓰는 것이 대부분이다.
1.변수 대신 쓰는 데이터 저장공간
2.useState()를 이용해 만들어야 함
- {useState} 상단에 첨부
- useState(data)
참고) ES6 destructuring 문법
array, object에 있던 자료를 변수에 쉽게 담고 싶을때
var [ a, b ] = [10, 100];
let [array, fun ] = useState('core');import './App.css';
import React, {useState} from 'react';
//내장 함수를 가져다 쓰겠습니다~
function App() {
let [ title , title_modify ] = useState(['CORE', 'Student']); // [array , fun ]
//state데이터, state데이터 변경 함수
return (
<div className="App">
<div className="black-nav">
리액트 적응하기 1일차
</div>
<div className= "list" >
<h3> { title[0] }</h3>
<p> 2021년 10월 22일 </p>
<hr/>
</div>
<div className= "list" >
<h3> { title[1] }</h3>
<p> 2021년 10월 22일 </p>
<hr/>
</div>
</div>
);
}
export default App;state에 데이터를 저장해놓는 이유
웹이 App처럼 동작하게 만들고 싶어서
그리고
state는 변경되면 HTML이 자동으로 재렌더링이 된다
따라서 자주 바뀌고, 중요한 데이터 는 변수 말고 state로 저장해서 써야 함
