[본 캠프 24일차] React 스탠다드 실습

공휴일 쉬고 오니까 그새 다 잊어버렸다. 실습 망해서 처음부터 다시 복습하기.

아.. 강의 들어야 되는데 오늘은  복습만 싹 하고 내일부터 주말 다 쓰는걸로..

 

Input (추가)

• input 은 value 와 onChange 를 사용한다.
• input type은 text고 value 는 name(국가명), onChange 가 발생하면 setName(새로운이름)을 input(target) 창에 value(입력값)을 변경해준다. 

1. handleAddCountry 라는 함수를 만들고 event 가 일어나면 event.preventDefault 폼 제출 시 기본 동작(새로고침)을 막는다.
2. newCountries 새로운 객체 함수(id,name,gold,silver,bronze)를 만들고 setCountries를 실행한다
3. setCountries 를 실행할 때, ...countries 기존 배열과 newCountries를 추가하여 새로운 배열로 업데이트하여 실행한다

  const handleAddCountry = (event) => {

    event.preventDefault();

 

    const newCountries = {

      id: new Date().getTime(),

      name: name,

      gold: gold,

      silver: silver,

      bronze: bronze,

    };

    setCountries([...countries, newCountries]);

 

<input type="text" value={name} onChange={function (c) {

                setName(c.target.value);

              }}

 

Update

1. handleUpdateCountry 이벤트 발생시 새로고침 방지
2. countries 에서 find로 업데이트 할 국가를 찾을 때 순회할 때 찾은 name 과 기존 name 이 같다면 targetCountry로 넘김
3. 만약 countries.map으로 순회했을 때, 순회할 때 찾은 이름과 위에 업데이트 할 국가 이름이 같다면
4. ...countries 기존 배열을 유지하고, 새로운 gold,silver,bronze 값으로 덮어씌운다.
5. else 아니면 기존 배열을 유지한다.
6. setCountries 새로운 배열을 실행하는데 newCountries 로 업데이트해서 실행한다. 

 

* find() 메서드는 순회해서 조건을 첫번째로 만족하는 나라를 저장한다.

const handleUpdateCountry = (event) => {

    event.preventDefault();

 

    const targetCountry = countries.find((c) => c.name === name);  // 여기서 업데이트 할 국가 이름 찾았음

    const newCountries = countries.map((countries) => {  // 여기서 새로운 객체를 (newCountries) 순회해서 찾고있음

      if (countries.name === targetCountry.name) {   // 만약 순회해서 찾은 이름과 위에 업데이트 할 국가 이름이 같으면

        return {   // ...countries (기존 배열에) 새로운 메달 숫자를 추가해라.

          ...countries,

          gold,

          silver,

          bronze,

        };

      } else {

        return countries; 

      }

    });

    setCountries(newCountries);

    resetForm();

  };

 

Delete

1. countries.filter 로 순회하여 찾은 id 와 삭제하려는 id가 같지 않은 경우, 같지 않은 id만 남겨두고 나머지는 삭제해라
2. setCountries 를 실행할 때 filterCountry 로 업데이트하여 실행
3. button을 누르면 onClick 이벤트가 발생하고 클릭된 국가의 id를 handleDeleteCountry 함수에 전달

  const handleDeleteCountry = (id) => {

    const filterCountry = countries.filter((c) => {

      return c.id !== id;

    });

    setCountries(filterCountry);

  };

 

 <button onClick={() => handleDeleteCountry(c.id)}>삭제</button>

 

Read

1.  sort 로 금메달이 많은 순으로 정렬
2.  map 으로 countries를 순회하여 해당 data를 각 구역별로 출력

<tbody>

                {countries

                  .sort((a, b) => b.gold - a.gold)

                  .map((data) => {

                    return (

                      <tr key={data.id}>

                        <td>{data.name}</td>

                        <td>{data.gold}</td>

                        <td>{data.silver}</td>

                        <td>{data.bronze}</td>

                        <td>

                          <button onClick={() => deleteHandler(data.id)}>

                            삭제

                          </button>

                        </td>

                      </tr>

                    );

                  })}

              </tbody>

 

오늘 이것만 지웠다 썼다를 계속 반복중이다.

진짜 이해가 안가서 튜터님을 찾아갔다가 반응이 없으셔서 마음 고쳐먹고 다시 혼자 노력중...