[본 캠프 21일차] React 스탠다드 + React 입문 개인과제

React 에서 제공하는 기능들을 연결 (hook) 시켜주는 것들 

• useState();

React 는 state의 변경을 감지해서 화면을 다시 그린다.(리렌더링을 한다)

state 변경 = 리렌더링

 

<form> 태그는 어딘가로 제출이 되어야한다.

form 태그 안에있는 button 태그는 기본적으로 submit 속성을 가진다.

  const [newTodoTitle, setTodoTitle] = useState("");

  // 1. input 값이 어딘가에 저장되야 한다. state 로 보관 input = state(value, onChange)

<input

          value={newTodoTitle}

          onChange={(e) => {

            setTodoTitle(e.target.value);

          }}

 

input 태그를 연결해주기 위해선 state 에 저장해줘야 한다. (value,onChange)

state 를 저장하려면 value와 onChange 를 사용해서 연결시켜줘야한다.

map을 이용해 컴포넌트를 작성할 때 key 라는 속성을 넣어줘야 한다.

button 은 onclick 이벤트 말고 form 태그에 onSubmit 태그로 작성해주자.

1. 각 input 값 연결해주기

   1-1 useState 로 각각 설정해주고, 모든 값을 하나에 넣어주기

    ex) country 를 useState에 넣고 새로운 값으로 빼려면 setCountry 를 사용하면 된다.

  const [countries, setCountries] = useState([ ]);

  const [country, setCountry] = useState('');

  const [gold, setGold] = useState(0);

  const [silver, setSilver] = useState(0);

  const [bronze, setBronze] = useState(0);

   

   1-2 input 값을 State 로 넣어주기 (value, onChange)

    ex) value(country)를 onChange 바꿔준다. setCountry (새로운 값에) c.target.value(새로운 요소를)

<input

              value={country}

              onChange={function (c) {

                setCountry(c.target.value);

              }}

              type='text'

              placeholder='국가 입력'

            />

 

2. 국가 추가 버튼을 눌러 밑에 띄우기 onClick 대신 onSubmit으로 form 태그에 (form 태그는 어디로 값을 보낸다)

• onSubmit 기능을 사용할 때 preventDefault 로 새로고침을 방지하고, 새로운 객체를 만들어 id값은 히든값으로 새로 나오게 해주고, country 는 country 를, gold는 gold를 각자 input 값을 그대로 가져오게 한다..? setCountries는 ...countries (모든 요소)에 newCountries 를 추가한 값을 넣어준다. 그리고 countries를 map으로 순환하여 key 값을 받아 각 html 구역마다 data값을 넣어준다. 버튼을 눌러주면 input 위치에 있는 form 태그값을 리셋해준다.

<form

          onSubmit={function (e) {

            e.preventDefault();

            const newCountries = {

              id: new Date().getTime(),

              country: country,

              gold: gold,

              silver: silver,

              bronze: bronze,

            };

           

            setCountries([...countries, newCountries]);  //countries 가 cgsb 인데 newCountries는 tries에 id값만 추가하는건지

            {countries.map((data) => {

                return (

                  <tr key={data.id}>

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

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

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

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

            resetForm();

          }}

>

 

3. 삭제 버튼을 누르면 해당 값만 삭제한다.

 ex) countries를 filter한다. id값이 countryData.id 값과 다를때 setCountries를 filter한다? 난 여기 설명을 들어도 모르겠음

  const deleteHandler = (id) => {

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

      return countryData.id !== id;

    });

    setCountries(filterCountry);

  };

<tbody>

          {countries.map((data) => {

                return (

                  <tr key={data.id}>

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

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

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

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

                    <td>

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

                        삭제

                      </button>

                    </td>

                  </tr>

                );

              })}

            </tbody>