Zoeeey
Stack flows in you
Zoeeey
  • 분류 전체보기 (155)
    • 💡 UXUI (4)
      • UXUI (2)
      • UI (2)
      • UX (0)
    • 🟨 JavaScript (66)
      • 개념 (42)
      • 정리 (2)
      • 문제풀기 (프로그래머스, 코딩애플) (15)
      • 응용하여 자동화or문제해결하기 (2)
      • 기타 (5)
    • ⚛️ React (49)
      • 개념 (27)
      • 개념(Redux) (3)
      • 정리 (4)
      • 문제풀기 (코딩애플: React) (15)
    • 📘 TypeScript (10)
      • 개념 (8)
      • 문제풀기 (코딩애플) (2)
    • 🌐 HTML,CSS (18)
      • 실무에서 자주 발생한 오류들 (10)
      • 뒤늦게 알아서 뼈아픈 유용한 CSS (6)
      • 기타 자주 쓰는 CSS (2)
    • 💻 CS (8)
      • CS (5)
      • 정규표현식 (2)
      • Git,Github (1)

태그

  • redux
  • 오류
  • 삼항연산자
  • state
  • axios
  • Props
  • class
  • UXUI
  • TypeScript
  • json
  • CSS
  • useEffect
  • CS
  • react
  • 프로그래머스
  • object
  • JavaScript
  • Ajax
  • array
  • 코딩애플
전체 방문자
오늘
어제
hELLO · Designed By 정상우.
Zoeeey

Stack flows in you

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

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

2023. 5. 11. 12:45

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 (
    <div className="App">
      { 
        title.map(function(a,i){
          return (
            <div className="list" key={i}>
                <h4>{ title[i] }</h4>
                <button onClick={(i) => handlesetLike(i)}>👍  { like[i] }</button>
                <button onClick={()=>{ modal ? setModal(false) : (setModal(true),setTitleIndex(i)) } }>🗨</button>
                <p>2월 18일 발행</p>
              </div>
          );
        }) 
      }
      <input id='title' name='title' type="text" onChange={ (e)=> setInput(e.target.value) }/>
      <button type="submit" onClick={ handleSubmit }>발행</button>
    </div>
  );

알게 된 점 1

input태그에 onChange는 텍스트를 한글자씩 타자칠때마다 바뀌는건데 그걸 setInput 해버리면 한글자씩 다 배열에 들어가버리지 않을까? 생각했지만,
당연히 아니었다. input state는 애초에 배열이 아닌 ' ' 문자열로 세팅되어 있었고, handleSubmit 되는 시점도 발행 버튼을 누르는 시점이기 때문이다.
생각을 좀더 가볍게 할 필요가 있따.

알게 된 점 2

빈 문자열을 검사하려면 trim()을 쓰면 된다.


게시글 삭제하기

조건

삭제 버튼을 누르면 해당 게시글이 삭제된다.


풀이

let handleDelete = (i, e) => {
  e.preventDefault();
  let copyTitle = [...title];
  copyTitle.splice(i, 1);
  setTitle(copyTitle);
}
title.map(function(a,i){
  return (
    <div className="list" key={i}>
      <h4>{ title[i] }</h4>
      <button onClick={() => handlesetLike(i)}>👍  { like[i] }</button>
      <button onClick={()=>{ modal ? setModal(false) : (setModal(true),setTitleIndex(i)) } }>🗨</button>
      <button onClick={(e) => handleDelete(i,e) }>삭제</button>
      <p>2월 18일 발행</p>
    </div>
  );
})

코드는 다 짜놓고 매개변수를 잘못 넣어서 고생했다.


알게 된 점 1

i는 map 메서드가 호출될 때 자동으로 제공되므로, map 함수 내에서 i를 매개변수로 별도 지정할 필요가 없다. (배열이기 때문이다. 이를 "콜백 함수 인자"라고 한다고..)

알게 된 점 2

그에 반해 e는 매개변수로 지정해주어야 한다. onClick 함수는 자체적으로 이벤트 객체를 생성한다. handleDelete 함수에서 이벤트 객체에 접근하기 위해서는 onClick 함수에서 이벤트 객체를 받아 handleDelete에 전달해야 하기 때문에, e를 꼭 넣어줘야 했다.


출처 : 코딩애플 https://codingapple.com/

저작자표시 비영리 동일조건 (새창열림)

'⚛️ React > 문제풀기 (코딩애플: React)' 카테고리의 다른 글

React : 2초 뒤에 사라지는 alert 만들기 (useEffect, 숏서킷평가)  (0) 2023.05.23
React : 가나다정렬되어도 끄떡없는 상세페이지 불러오기 (useParams, find())  (1) 2023.05.22
React : 데이터 바인딩해서 컴포넌트로 뿌리기 (템플릿 리터럴 Template literal)  (0) 2023.05.18
React : 클릭한 글의 제목이 모달에 뜨게 만들기 (props, 삼항연산자)  (0) 2023.05.08
React : 좋아요버튼 만들기 (숏서킷평가,삼항연산자)  (0) 2023.05.02
    '⚛️ React/문제풀기 (코딩애플: React)' 카테고리의 다른 글
    • React : 가나다정렬되어도 끄떡없는 상세페이지 불러오기 (useParams, find())
    • React : 데이터 바인딩해서 컴포넌트로 뿌리기 (템플릿 리터럴 Template literal)
    • React : 클릭한 글의 제목이 모달에 뜨게 만들기 (props, 삼항연산자)
    • React : 좋아요버튼 만들기 (숏서킷평가,삼항연산자)
    Zoeeey
    Zoeeey
    길게 생각하고 짧게 그리기

    티스토리툴바