반복되는 컴포넌트 처리, 나누기

1. 단순  컴포넌트 반복 => map()사용하기

function App() {
  
  return (
    <div className="app-style">
      <div className="contentStyle">감자</div>
      <div className="contentStyle">고구마</div>
      <div className="contentStyle">오이</div>
      <div className="contentStyle">가지</div>
      <div className="contentStyle">옥수수</div>
    </div>
  );
}

(1)중복된 컴포넌트 안에 있는 요소들로 배열을 만들어주기

(2) map()을 이용하여 새로운 배열 내뱉기

function App() {
  let guhwang = ['감자', '고구마', '오이', '가지', '옥수수']

  return (
    <div className="app-style">
      {guhwang.map((item)=>{return <div className="contentStyle">{item}</div>})}
       
    </div>
  );
}

 

2. 배열안 객체 처리하기

let users = [
    { id: 1, age: 30, name: "송중기" },
    { id: 2, age: 24, name: "송강" },
    { id: 3, age: 21, name: "김유정" },
    { id: 4, age: 29, name: "구교환" },
  ]

이 배열을 아까 만든 틀에 넣어서 만들어 주기를 해보자!

(1) state화 해주기

  let [users, setUsers] = useState([
    { id: 1, age: 30, name: "송중기" },
    { id: 2, age: 24, name: "송강" },
    { id: 3, age: 21, name: "김유정" },
    { id: 4, age: 29, name: "구교환" },
  ]);

 

(2) 해당 위치에서 map()으로 굴려주기

//자바스크립트니까 {}에 넣기
{
users.map(function(){
	return ( 
    	<div key={item.id} className="contentStyle">
    	{item.age}{item.name}
    	</div>
      )

	})
}

++ key={ }는 왜 있는 건가뇨?

=> key는 react가 변경, 추가, 삭제등을  어떤 항목에서 할 지 식별할 때 돕기위해 쓰인다. 

==> 그러므로 고유하게 식별가능 한것으로 지정하는 것이 좋다. 없을 경우 인덱스로 하기도 하지만 순서는 변할 수 있기에 비추!

 

3. 배열에 추가하기

(1) input 추가하기, state화하기

  let [name, setName] = useState('')
  let [age, setAge] = useState('')
  let ageHandler = (event) => { setAge(event.target.value) }
  
  //return 밑
  //  띄어쓰기
   이름 :&nbsp;<input
        value={name}
        onChange={(event) => { setName(event.target.value) }} />

      나이 :&nbsp;<input
        value={age}
        onChange={ageHandler} />

input에 state를 줄 경우 value={state}, onChange={function(event){setState(event.target.value)}}가 필수로 들어간다. 

 

(2)버튼을 만들고 이벤트를 부여해서 전개구문으로 배열 추가하기

  let addBoxButton = function () {
    let addThings = {
      id: users.length + 1,
      age: age,
      name: name
    }//key와value가 같아서 생략해됨 하지만 나중에 못알아먹을까봐 나둠
    setUsers([...users, addThings])
    setAge('')
    setName('')
  }
return 밑

<AddButton addBoxButton={addBoxButton}>추가</AddButton>

let AddButton = ({addBoxButton, children}) => {
    return <button onClick={addBoxButton}>{children}</button>
  }
  //사실 위에는 children활용해서 하려한거라 이렇게 해도됨
 <AddButton addBoxButton={addBoxButton}>
 
 let AddButton = ({addBoxButton}) => {
    return <button onClick={addBoxButton}>추가</button>
  }

children <>사이값<> 이 {children}이 표시// 굳이 나타내 본거고 원래는 헤더 같은 곗고 다른 페이지에도 계속 보여야하는 것에 쓰임

2023.10.31 - [React] - React props

React props

별 참고는 안되지만..

중간에  setName('') 랑 setAge('') 는 실행 후 마지막엔 input을 비워줘야하니까!

 

(3)닫기 버튼 구현하기 filter사용하기

  let deleteThingButton = function (id) {
    let filteringUser = users.filter((user) => user.id !== id);
    setUsers(filteringUser)
  }
  
  return 밑
  
  let User = ({ item, deleteThingButton }) => {
    return (<div key={item.id} className="contentStyle">
      {item.age}{item.name}
      <button onClick={() => deleteThingButton(item.id)}>X</button>
    </div>)
  }

 

닫기 클릭이벤트에 새로운 배열을 뱉는 filter()를 이용해서 삭제를 했다. 그래서 필터가될 주체가 필요하니 button onClick={() => deleteThingButton(item.id)} 이렇게 구분이 갈만한 값을 매개변수로 넣어주고 위에서 비교해주면 된다. 흠.