REACT 기본문법 복습 끄적끄적
{반복할데이터.map(()=>{return})};
예시
var 어레이 = [2,3,4]; 어레이.map(function(a){ return a *2 });
블로그 좋아요 기능 만들어보기
function App(){
let [post, setPost] = useState(['직구 사이트 추천', '서울 우동 맛집', '리액트 독학'])
let [like, setLike] = useState([0,0,0]);
let [moda1, setModal1] = useState(0);
function switchLike(a){
var newArray1 = [...like];
newArray[1] = newArray[a] + 1;
setLike(newArray1)
}
return (
<div className="App">
<div className='black-nav'>
개발LOG
</div>
{
post.map((text, i)=>{
return (
<div className='list' key={i}>
<h3 onClick={()=>{setModal1(i)}}>{text}<span onClick={()=>{
switchLike(i)
}}>👍</span>{like[i]}</h3>
<p>4월 17일 발행</p>
<hr/>
</div>
)
})
}
<div>
);
}
input 사용 예시
let [inputs, setInputs] = useState(''); //state에 빈값을 초기값으로 넣어줌 <input onChange={(e)=>{setInputs(e.target.value)}}/> // e.target.value는 현재 써넣는 입력값
블로그에 글 추가 기능
// 기본적인 App () 과 return 제외하고 필요한 부분만 썼습니다 let [post, setPost] = useState(['직구 사이트 추천', '서울 우동 맛집', '리액트 독학']); let [inputs, setInputs] = useState(''); <div className='publish'> <input onChange={(e)=>{setInputs(e.target.value)}}/> <button onClick={()=>{ var newPost = [...post]; newPost.unshift(inputs) setPost(newPost); }}>저장</button> </div>