[React 개인과제_입문 주차] (기록용)

useState, 제출 - 삭제 기능 구현

 

◆ useState

 

App.jsx에 국가별로 메달 집계를 표시하는 리스트를 추가한다. useState를 활용해서 데이터를 저장하고 출력하는 React hook에 익숙해질 필요가 있었다.

function App() {
  const [country, setCountry] = useState('');
  const [gold, setGold] = useState(0);
  const [silver, setSilver] = useState(0);
  const [bronze, setBronze] = useState(0);

  const [medalList, setMedalList] = useState([]);

  const handleSubmit = (event) => {
    event.preventDefault();
    const newEntry = { country, gold: Number(gold), silver: Number(silver), bronze: Number(bronze) };
    setMedalList([...medalList, newEntry]);
    setCountry('');
    setGold(0);
    setSilver(0);
    setBronze(0);
  };

 

 

◆ 삭제 기능 구현하기

 

splice 메서드를 사용하여 특정 인덱스의 항목을 직접 삭제한 후 정렬하는 방식으로 작성할 수 있다. 배열을 직접 수정하는 splice 때문에 원본 배열의 복사본을 먼저 만든 후 수정해야 state를 원하는 방식으로 관리할 수 있음을 알게 되었다.

const handleDelete = (index) => {
  const updatedList = [...medalList]; // 원본 배열 복사
  updatedList.splice(index, 1); // 해당 인덱스의 항목 삭제
};

 

질문 & 더 알아보기

 

: 복습 - JSX 문법의 특징

JSX 문법을 통해 React에서도 HTML과 비슷한 구조로 코드를 작성할 수 있다.

function App() {
	return (
    	<div className="App">
        	// html 구성
        </div>
    )
};

 

• Class를 넣고 싶을 때에는 className 사용 : class 문법과 혼동될 수 있기 때문에 JSX 안에서는 className을 쓴다.

function App() {
  let post = "";

  return (
    <div className="App">
      <div className="black-nav">  // className 으로 class 지정
      </div>
      <h4>{post}</h4>
    </div>
  );
}

 

• 변수를 넣고 싶을 때에는 { } 사용 : 자료를 변수에 담고 이를 참조하는 형식으로 데이터를 바인딩한다.

function App() {
  let post = "content";

  return (
    <div className="App">
      <div className="black-nav"> 
      </div>
      <h4>{post}</h4>  // 자료를 post라는 변수에 담아서 사용
    </div>
  );
}

 

• style을 지정하고 싶을 때에는 style = {{ style 속성: ' ' }} 사용

function App() {
  let post = "content";

  return (
    <div className="App">
      <div className="black-nav"> 
        <h4 style={{color:'blue', fontSize:'15px'}}>Text</h4>  // style 지정
      </div>
      <h4>{post}</h4>  
    </div>
  );
}