반나절동안 고민해보고 해결하지 못하여 질문드립니다.
function App() {
const parsedDate = new Date().toLocaleDateString('ko-KR');
const arr = ['인형뽑기 잘하는 법', '리액트 독학', '국내 여행지 10곳 추천'];
const [post, setPost] = useState(arr); //sorting state
const [like, setLike] = useState(0);
const [modal, setModal] = useState(false); //modal state
const postingHandler = ((e) => { //sorting할 수 있는 postingHandler를 만들었습니다.
let newArr = [...arr];
newArr = newArr.sort((a, b) => (a > b) ? 1 : ((b > a) ? -1 : 0))
console.log(e)
setPost(newArr);
});
const likeHandler = ((e) => {
setLike(like + 1);
console.log(e)
});
const modalHandler = ((e) => {
console.log(setModal(e))
setModal(!modal)
});
const mappedList = arr.map((cur, index) => {
return (
<div className="list">
<h3 onClick={modalHandler} key={index}>{cur}<span onClick={likeHandler}>❤️</span>{like}</h3>
<p>{parsedDate}</p>
<hr/>
</div>
);
});
return (
<div className="App">
<div className="nav-bar">
<h1>Mini Blog</h1>
</div>
<button onClick={postingHandler}>click</button>
<div>{mappedList}</div>
{ modal === true ? <Modal /> : null }
</div>
);
}
버튼을 누르면 가나다 순 정렬을 위해 sorting할 수 있는 state와 postingHandler를 생성했습니다. 그리고 mappedList 변수를 만들어 arr의 맵을 해 맵 안의 html 리턴부분에 <h3>{cur}</h3>을 주었습니다. 맵을 하기전에는 <h3>{post}</h3> 원본 state를 넣어서 sorting 구현을 했는데 map함수 안에서 cur라는 현재요소 인자라는게 있을 땐 어떻게 응용해야될지 모르겠습니다.
한가지 더 궁금한 사항있습니다.
일반 jsx로 하드 코딩했을 때, 버튼을 클릭하면 sorting 하는 postingHandler가 실행됬는데, 다시 한번 눌렀을 때 sorting되기 이전으로 돌아가게 하는 방법이 있을 까요? 모달창과 같이 setModal(!modal) 이런식으로 주면 아얘 클릭이 실행이 되지 않아서 구글에도 찾아봤는데 답변을 얻기 힘들어서 질문드립니다.
