import React, { useState, useEffect } from 'react';
import './App.css'
import PropTypes from 'prop-types';
function App() {
let [alert, alert변경] = useState(true);
useEffect(() => {
let 타이머 = setTimeout(() => { alert변경(false) }, 1000);
});
let [inputData, inputData변경] = useState('');
let [article, article변경] = useState(0);
let [태그저장소, 태그변경] = useState("");
const title = document.title;
function 제목바꾸기() {
var newArray = [...글제목];
newArray.sort();
글제목변경(newArray);
}
function 글추가() {
var eventArray = [...글제목];
eventArray.push(태그저장소);
var newheart = [...좋아요];
newheart.push(0);
좋아요변경(newheart);
글제목변경(eventArray);
}
function modal띄우기() {
if (modal === false) {
modal변경(true);
} else if (modal === true) {
modal변경(false);
}
}
return (
<div className="App">
{
alert === true
? (
<div className='my-alert'>fdsfsdfds</div>
)
: null
}
{inputData}
<input onChange={(e) => { inputData변경(e.target.value) }} />
<div className="black-nav">
<div>개발 blog</div>
</div>
<button onClick={title바꾸기} className="straw"> 딸기s 수정버튼 </button>
<button onClick={제목바꾸기} className="rebutton"> ㄱㄴㄷ 수정버튼 </button>
<button onClick> 검색용 </button>
<div>{태그저장소}</div>
<div id="result"></div>
<button onClick={modal띄우기}>광고버튼</button>
{
modal === true
? <Modal 글제목={글제목} article={article}></Modal>
: null
}
{
글제목.map(function (a, index) {
return (
<div className="list" key={index}>
<h3 onClick={() => { article변경(index) }}> {a} <span onClick={function () { 좋아요버튼클릭(index) }}>💖</span> {좋아요[index]} </h3>
<p>2월 17일 발행</p>
<hr />
</div>
)
})
}
<div className='publish'>
<input onChange={e => 태그변경(e.target.value)}></input>
<button onClick={글추가}> 저장</button>
</div>
</div>
);
}
function Modal(props) {
return (
<div className="modal">
<h2>{props.글제목[props.article]}</h2>
<p>날짜</p>
<p>상세내용</p>
</div>
)
}
export default App;
useeffect 사용시 재렌더링할때 inputdata가 업데이트될때마다 useeffect 이 실행되도록 짯는데,
왜 화면에는 아무 변화가 없을까요??
