input 다루기 2 / 응용 1,2,3

[최문길]

function App(){
  const [글제목, 글제목변경] = useState(['남자코트 추천','강남 우동맛집', '파이썬 독학'])
  const [따봉,따봉변경] = useState([0,0,0]); 
  let [inputValue,valueState] = useState('');
  // 날짜 찍히게 하는 것임
  let dateOption = {
    month: 'long',
    day : 'numeric',
    weekday: 'long',
    second : 'numeric'
  }
  const currentDate = new Date()
  let [date,setDate] = useState(['2월 17일','2월 17일','2월 17일'])
----------
return (

 {
      글제목.map(function(a,i){
        return (
        <div className="list" key={i} data-id = {i}>
          <h4 onClick={(e)=>{
              setTitle(i)
               setModal(!modal)
            }}>
            { a } <span onClick={(e)=>{
              e.stopPropagation()// 따봉눌러도 모달창 안띄워짐 stopPropagation은 이벤트 버블링 막아줌
              let count = [...따봉]
              count[i] +=1
              따봉변경(count)
              }}>👍</span>
            {따봉[i]}
          </h4>
          <p>{date[i]}</p>
          <button onClick={(e)=> {

            /* 내가 짠 코드
             let delet = 글제목.filter((title,i)=>{ 
              let id = parseFloat( e.currentTarget.parentNode.dataset.id)
              console.log(id)
               return  title != 글제목[id]
             }) 
             */

             // 코딩 애플이 짠 코드
             let copy = [...글제목];
             copy.splice(i,1)
            글제목변경(copy)
          }}>삭제</button>
        </div>
        )
      })
    }

-------------------- 응용 1,2,3
<input onChange={(e)=>{
          valueState(e.target.value)
        }} type="text" />

        <button onClick={()=> {
          let copy = [...글제목]//아니면 글제목.push(inputValue)
          let copy2 = [...따봉]// 따봉도 추가해줘야함
          // !inputValue 만으로는 space바 눌러 공백시 검사가 안됨

          const today = [...date]
          
   !inputValue || inputValue.trim() == ''  ? alert("똑디 입력하셈") : copy.unshift(inputValue) && copy2.unshift(0) && today.unshift(currentDate.toLocaleDateString('ko-KR',dateOption))

          console.log(new Date())
           따봉변경(copy2)
           글제목변경(copy)
           setDate(today)
        }}>글발행</button>

)

선생님 코드리뷰요...  전반적으로 응용1,2,3 해주세욤

ps)
날짜 찍히게 하려는 거 array로 하는것이 선생님이 날짜 발행하려면 생각하는 로직과 비슷 한가요??

[codingapple]

잘될거같은데요 
조건에 따라서 코드 실행하고 싶으면 삼항연산자말고 if문 쓰는게 보기좋습니다 
여러데이터 한 변수에 저장하려면 array 또는 object밖에 없습니다

[최문길]

사실 if문을 쓰고 싶었는데

생 자바스크립트식 말고 리액트식으로 짜라는 말에 꽂혀서 

혼자서 제약하는 부분이 많습니다.

예를 들어 foreach문 같은 것도 Onclick={()=>{
                    array.foreach() 
  이렇게 사용하고 싶은데 먼가 이게 리액트 스러운건가? 라는 의문점으로 안쓰게 됩니다.
   그래서 제가 다시 리액트 식으로 짜라는 강좌를 들으면서 혼자 생각 해봤는데

   부끄럽지만 잘 모르겠습니다.

    귀찮으시더라도 한번만 더 상세히 리액트 식이란 머 state를 이용해서 동적 UI를 만드세요 
     그 외에 원하는 코드는 리액트식이라던가 생바닐라식이라던가 이런거 없습니다.
     그냥 원하는 걸 만드려면 코드를 if문이든, foreach문이든, 다른 내장 함수든 사용 하고 
     그거에 따라 state변경을 하세요 

    이런 식으로요 ㅜㅜ

   가르쳐주세요 센세...

              }
           }

[codingapple]

삼항연산자는 문자나 숫자값 남기는 부분에만 보통 씁니다
querySelector addEventListener 이런거만 안쓰면 리액트스럽게 잘 개발하고있는것입니다

[글쓴이]

글