import logo from './logo.svg';
import './App.css';
import { useState } from 'react';
function App() {
let post = 'GANGNAM';
let [a,b] = useState('YES');
let [c,d] = useState('NO');
let [e,f] = useState('OR');
return (
<div className="App">
<div className="black-nav">
<h4>BLOG</h4>
</div>
<div className="list">
<h4>{a}</h4>
<p>2022년 06월 09일</p>
</div>
<div className="list">
<h4>{c}</h4>
<p>2022년 06월 09일</p>
</div>
<div className="list">
<h4>{e}</h4>
<p>2022년 06월 09일</p>
</div>
</div>
);
}
export default App;
import logo from './logo.svg';
import './App.css';
import { useState } from 'react';
function App() {
let post = 'GANGNAM';
let [글제목,b] = useState(['YES','NO','OR']);
return (
<div className="App">
<div className="black-nav">
<h4>BLOG</h4>
</div>
<div className="list">
<h4>{글제목[0]}</h4>
<p>2022년 06월 09일</p>
</div>
<div className="list">
<h4>{글제목[1]}</h4>
<p>2022년 06월 09일</p>
</div>
<div className="list">
<h4>{글제목[2]}</h4>
<p>2022년 06월 09일</p>
</div>
</div>
);
}
export default App;
- 터미널 / 브라우저 콘솔창에 warning이 뜨는 이유
/*eslint-disable*/
이라는 주석을 js 파일 최상단에 추가해주면 eslint 기능을 잠시 끌 수 있습니다.
- 좋아요 버튼 만들기
<h4> { 글제목[0] } <span>👍</span> 0 </h4>
2-1. html
<div onclick="실행할 자바스크립트~~~">
2-2. JSX
Click이 대문자인거
{} 중괄호 사용하는거
그냥 코드가 아니라 함수를 넣어야 잘 동작한다는거
<div onClick={실행할함수}>
클릭시 뭔가 실행하고 싶으면 onClick={함수} 이렇게 이벤트 핸들러를 달아서 사용합니다.
state를 변경하시려면 state 변경함수를 꼭 이용하십시오.
state변경함수는 ( ) 안에 입력한걸로 기존 state를 갈아치워줍니다.
/*eslint-disable*/
import logo from './logo.svg';
import './App.css';
import { useState } from 'react';
function App() {
let post = 'GANGNAM';
let [글제목,b] = useState(['YES','NO','OR']);
let [따봉,따봉변경] = useState(0);
return (
<div className="App">
<div className="black-nav">
<h4>BLOG</h4>
</div>
<div className="list">
<h4>{글제목[0]}<span onClick={()=>{따봉변경(따봉+1)}}>👍</span> {따봉} </h4>
<p>2022년 06월 09일</p>
</div>
<div className="list">
<h4>{글제목[1]}</h4>
<p>2022년 06월 09일</p>
</div>
<div className="list">
<h4>{글제목[2]}</h4>
<p>2022년 06월 09일</p>
</div>
</div>
);
}
export default App;
참조: 코딩애플 리액트 강의
Top comments (0)