function App() {
return ( // 소괄호 안에 html 코딩 = html같지만 JSX라는 문법
<div className="App">
dddd
</div>
);
}
--------App.js
function App() {
return (
<div className="App">
<div className='black-nav'>
<div>개발 blog</div>
</div>
<h4>{ 변수명 }</h4> // 데이터 바인딩 { 변수명, 함수 등 }
</div>
);
}
--------App.css
body {
font-family:
'nanumsquare';
}
.black-nav {
background: black;
width: 100px;
display: flex;
color: white;
padding: 20px;
font-weight: 600;
font-size: 20px;
}
<h4>{ 변수명 }</h4> // 데이터 바인딩 { 변수명, 함수 등 }
import logo from './logo.svg';
<img src={ logo } /> // {import해온 변수명}
style={ { color : 'blue', , fontSize : '30px'} }
// style= { {오브젝트 형태로 넣어야 한다} }
// font-size : ' - ' 사용 불가 , 카멜케이스 표기법으로 작성
function App() {
let posts = '참치 맛집';
let posts2 = { color : 'red', fontSize : '30px' }; //
return (
<div className="App">
<div className='black-nav'>
<div style={ **{ color : 'blue', fontSize : '30px' }** }>개발 blog</div>
</div>
<div className='black-nav'>
<div style={ posts2 }>개발 blog2</div>
</div>
<h4>{ posts }</h4>
</div>
);
}
변수에 넣거나
let posts = '참치 맛집';
// 그냥 변수는 변경되어도 자동 재렌더링이 안된다 -> 새로고침해야한다
state에 넣거나
import React, { useState } from 'react';
// 리액트 데이터 저장공간 state 만드는 법
useState('맛집 추천');
// [a,b] a= 맛집 추천 데이터가 들어가 있고, b = 맛집 추천 state 정정해주는 함수
let [글제목, 글제목변경] = useState('맛집 추천!');
// [state 데이터, state 데이터 변경 함수]
// state : 변수 대신 쓰는 데이터 공간
// useState()를 이용해 만들어야함
var [a,b] = [10,100];
// 10, 100을 a와 b변수에 담아주세요
// array, object에 있던 자료를 변수에 쉽게 담고 싶을때
// a=10, b=100
state에 데이터를 저장해 두는 이유
// state 는 변경되면 HTML이 자동으로 재렌더링된다
// 그냥 변수는 변경되어도 자동 재렌더링이 안된다 -> 새로고침해야한다
// 자주 바뀌는, 중요한 데이터는 변수말고 state로 저장
import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
// useState('맛집 추천');
// [a,b] 형태로 저장
// a= 맛집 추천 데이터가 들어가 있고, b = 맛집 추천 state 정정해주는 함수
//let [글제목, 글제목변경] = useState('맛집 추천!');
let [글제목, 글제목변경] = useState(['맛집 추천!', '신발 추천!', '옷 추천!']);
// [state 데이터, state 데이터 변경 함수]
// state : 변수 대신 쓰는 데이터 공간
// useState()를 이용해 만들어야함
// useState( ['','']): array, object, 문자, 숫자 등 다 저장가능
// state 는 변경되면 HTML이 자동으로 재렌더링된다
let posts = '참치 맛집';
// 그냥 변수는 변경되어도 자동 재렌더링이 안된다 -> 새로고침해야한다
return (
<div className="App">
<div className='black-nav'>
<div>개발 blog</div>
</div>
<div className='list'>
<h3> { 글제목[0] }</h3>
<p></p>
<hr/>
</div>
<div className='list'>
<h3> { 글제목[1] }</h3>
<p>2월 18일 발행</p>
<hr/>
</div>
<div className='list'>
<h3> { 글제목[2] }</h3>
<p>2월 19일 발행</p>
<hr/>
</div>
</div>
);
}
export default App;