⚛️ React/문제풀기 (코딩애플: React)

React : input에 글 쓰면 게시글 추가하기 (onChange, 매개변수, trim, splice)

input에 글 쓰면 게시글 추가하기 조건 input에 텍스트를 넣고 발행버튼을 클릭하면 게시글 목록 상단에 추가된다. 아무 텍스트도 입력하지 않았다면 발행을 막는다. 풀이 let [input, setInput] = useState(''); let handleSubmit = (e) => { e.preventDefault(); if (input.trim() !== ""){ let copyTitle = [...title]; copyTitle.unshift(input); setTitle(copyTitle); } else {alert(`글제목을 입력하세요.`)} } return ( { title.map(function(a,i){ return ( { title[i] } handlesetLike(i)}>👍 { li..

React : 클릭한 글의 제목이 모달에 뜨게 만들기 (props, 삼항연산자)

조건 클릭한 글의 제목이 모달에 뜨게 만들기 풀이 function App() { let [title, setTitle] = useState(['쌍검사길드에서 닌자시작퀘 받기', '파판14 초보자 가이드 이벤트 진행안내', '귀여운 구부 꼬마친구를 받아보자']); let [modal, setModal] = useState(false); let [titleindex, setTitleindex] = useState(0); return ( { title.map(function(a,i){ return ( { title[i] } { modal ? setModal(false) : (setModal(true), setTitleindex(i)) } }>🗨 2월 18일 발행 ); }) } {modal && } ); } f..

React : 좋아요버튼 만들기 (숏서킷평가,삼항연산자)

조건 좋아요 버튼을 누르면 각각의 게시글의 좋아요가 1씩 올라가야 한다. 풀이 function App() { let [title, setTitle] = useState(['쌍검사길드에서 닌자시작퀘 받기', '파판14 초보자 가이드 이벤트 진행안내', '귀여운 구부 꼬마친구를 받아보자']); let [like, setLike] = useState([0,0,0]); let handlesetLike = (i) => { let copyLike = [...like]; copyLike[i] = copyLike[i] + 1; setLike(copyLike); } return ( { title.map(function(a,i){ return ( { title[i] } handlesetLike(i)}>👍 { like[i]..