리액트 입문 4일 차 @개인 프로젝트 200%

마참내! 프로젝트를 마무리했다. 도전 과제를 달성하며 200%를 꽉 채우느라 오늘도 열심히 달렸지만, 필수 조건은 어제 다 채워서 마음만은 계속 가벼웠다. 

 

사실 어제 내가 업데이트 오류라고 생각했던 것은 단순히 업데이트 기능의 유효성 검사를 하지 않음으로 인해 생긴 사소한 해프닝이었다. sort에는 아무런 문제도 없었고, 다만 list.splice(updateDataIndex,1,updateData) 에서 updateDataIndex가 불리언이 떠서  list.splice(0,1,updateData) 로 작동되었던 것이다. 예전에 리뷰 삭제 기능에서와 같은 오류이다. 일단 이렇게 어제의 실수를 바로잡으면서 도전과제를 수행해나갔다. 

 

아래는 오늘의 코드 작성 리스트이다. 

• 등록 기능 유효성 검사와 alert
• 업데이트 기능 유효성 검사와 alert
• 메달 총 개수를 추가로 표시하고 메달 총 개수로 리스트 정렬
• localstorage로 리스트 저장해서 새로고침해도 데이터가 남도록 하기
• input 박스 컴포넌트 개선

---

• 등록 기능 유효성 검사와 alert

// 추가(Create) 함수
  const addList = ()=> {
    const newList = {
      id:new Date().getTime(),
      country:country,
      gold:gold,
      silver:silver,
      bronze:bronze,
      sum:Number(gold+silver+bronze),
    }

    const countryData = list.map((li)=>li.country)
    
    if(countryData.includes(country)) {
      alert('국가명이 중복되었습니다')
    } else if((!country)||(country.trim()==='')) {
      alert('국가명을 입력하시오')
      inputReset()
    } else {
      setList([...list,newList])
      localStorage.setItem('medal', JSON.stringify([...list,newList]))
      inputReset()
    }
  }

---

• 업데이트 기능 유효성 검사와 alert

 

//업데이트(Update) 함수
  const updateList = () => {
    const updateDataIndex = list.findIndex((li)=>(country===li.country));
    const updateData = {
      id:new Date().getTime(),
      country:country,
      gold:gold,
      silver:silver,
      bronze:bronze,
      sum:Number(gold+silver+bronze),
    }
    const countryData = list.map((li)=>li.country)
    if(countryData.includes(country)) {
      list.splice(updateDataIndex,1,updateData)
      setList([...list])
      localStorage.setItem('medal', JSON.stringify(list))
      inputReset()
    } else if(!country) {
      alert('국가명을 입력하시오')
    } else {
      alert('존재하지 않는 국가명입니다')
    }
    
  }

---

• 메달 총 개수를 추가로 표시하고 메달 총 개수로 리스트 정렬

// 추가 함수에서 저장할 데이터 지정에 sum추가
const newList = {
      id:new Date().getTime(),
      country:country,
      gold:gold,
      silver:silver,
      bronze:bronze,
      sum:Number(gold+silver+bronze),
    }
  
// 업데이트 함수에서 바꿔치기할 데이터 지정에 sum추가
const updateData = {
  id:new Date().getTime(),
  country:country,
  gold:gold,
  silver:silver,
  bronze:bronze,
  sum:Number(gold+silver+bronze),
}

//sort로 총 메달 갯수로 리스트 정렬
{list.sort((a,b)=>(b.sum)-(a.sum)).map((ele)=>{
      return (<List key={ele.id} ele={ele} list={list} setList={setList}/>)
    })}

---

• localstorage로 리스트 저장해서 새로고침해도 데이터가 남도록 하기

//state의 초기값을 로컬 스토리지에서 가져옴
const [list, setList] = useState(JSON.parse(localStorage.getItem('medal'))||[])

//등록 함수에서 로컬 스토리지 값 변화
localStorage.setItem('medal', JSON.stringify([...list,newList]))

//업데이트 함수에서 로컬 스토리지 값 변화
localStorage.setItem('medal', JSON.stringify(list))

//삭제 함수에서 로컬 스토리지 값 변화
const deleteList = () => {
    const deleteData = list.filter((li)=>li.id!==ele.id)
    
    setList(deleteData)
    localStorage.setItem('medal', JSON.stringify(deleteData))
}

---

• input 박스 컴포넌트 개선

//데이터 타입(typeof)으로 input 타입이 다른 input 박스 반환
const MedalInput = ({data}) => {
    if(typeof(data.data)==='string') {
      return (
      <div>
        <label>{data.name}</label>
        <input type='text' value={data.data} onChange={data.func}/>
      </div>)
    } else if(typeof(data.data)==='number') {
      return (
      <div>
        <label>{data.name}</label>
        <input type='number' value={data.data} onChange={data.func}/>
      </div>)
    }
}