[react 리액트] 초간단 게시판, 회원 리스트 만들기 (useState, CRUD)

 

1. 들어가며

useState 만으로 게시판으로 변형이 가능한 초간단 회원정보 리스트를 만들어 보자.

이 리스트는 회원 등록(Create), 조회(Read), 수정(Update), 삭제(Delete)가 가능하다.

완성은 이런 모습이다.

2. 외형

1) 회원 정보를 적는 input 3개와 추가 button이 있고,
회원 생성시, 회원 정보 옆에 수정 button 과 삭제 button 을 만든다.

2) 회원 리스트는 addPerson 함수를 통해 생성된 객체 배열을 map으로 돌며 리스트 생성.

function App() {

  // 성 입력창 상태

  const [firstName, setFirstName] = useState();

  // 이름 입력창 상태

  const [lastName, setLastName] = useState();

  // 이메일 입력창 상태

  const [email, setEmail] = useState();

 

  // 회원 리스트 상태

  const [personList, setPersonList] = useState([]);

 

  return(

    <div className='wrap'>

      <div>

        <span>성:</span><input type="text" value={firstName} onChange={(e)=>{setFirstName(e.target.value)}}></input>

      </div>

      <div>

        <span>이름:</span><input type="text" value={lastName} onChange={(e)=>{setLastName(e.target.value)}}></input>

      </div>

      <div>

        <span>이메일:</span><input type="text" value={email} onChange={(e)=>{setEmail(e.target.value)}}></input>

      </div>

      <button onClick={addPerson}>추가</button>

      <p>{`<회원 명단>`}</p>

      <ul>

        {personList.map((person)=>{

          return <div key={person.id}>

          <li>{`id: ${person.id} ${person.firstName} ${person.lastName} (${person.email})`}</li>

          <button onClick={()=> changePerson(person.id)}>수정</button>

          <button onClick={()=> deletePerson(person.id)}>삭제</button>

          </div>

          })}

      </ul>

    </div>

  )

}

📌 여기서 잠깐!

1) input 창에 작성한 최신값을 가져오려면 onChange와 setter 함수로 변경될때마다 값을 받아와야 한다.

 

2) 이떄 onChange가 확인한 최신값을 setter 함수가 자기 값에 업데이트하고 이렇게 변경된 값을 input 태그의 value 속성이 받아옴.

 

e.g. 이메일을 입력하면 onchange가 최신값을 확인하고 이 값을 setEmail이 email 변수에 담고 그렇게 담긴 값을 input의 value 속성이 가져옴.

 

 

 

3. 회원 생성

1) 정보 중 하나라도 안쓰면 아무것도 return하지 않는 조건을 건다.

이때, !something 으로 하면 비어있거나 null, undefined, false, 0, NaN과 같은 falsy 값 모두를 만족한다. 

 

2) 그리고 추가 버튼 누르면 기존 입력값은 빈칸이 되어야 하니 setter 함수에 빈값( ' ' )을 넣어준다.

 

3) 리스트 setter 함수에 배열을 넣는데 Spread로 기존 리스트를 먼저 깔아주고 추가로 내가 입력한 객체를 추가한다.

반복문으로 리스트를 생성하면 콘솔에 고유한 key값이 필요하다는 warning이 뜨는데 이때 쓰기 위해 생성시, id 값도 새로 만들어 준다. (예문엔 안써있지만 최상단에 let nextId = 1; 로 초기값 선언해둠)

 

4) 객체에 들어가는 각 정보들은 input에서 받은 값을 그대로 써야하기 때문에 해당 변수명으로 적어준다.

/* 리스트에 사람 추가 버튼 */

 

  // 하나라도 비어있으면 추가 안됨

  const addPerson = () => {

    if(!firstName || !lastName || !email){

      return ;

    }

    // 실행시 input 창 비우기

    setFirstName('')

    setLastName('')

    setEmail('')

    // input 창에 입력한 값 리스트로 던지기 (기존 배열에 객체 추가)

    setPersonList([

      ...personList,

      {

        id: nextId++,

        firstName: firstName,

        lastName: lastName,

        email: email

      }

    ])

  }

 

 

 

4. 회원 수정

1) 수정 버튼을 눌렀을 때 input 창이 비워져야하기 때문에 각 setter 함수에 ( ' ' )빈 값을 보내준다.

 

2) 이 버튼 주인과 수정하려는 회원이 동일한지를 확인하기 위해, 버튼의 onClick 함수에서 id 값을 인자로 전달함.

      {personList.map((person)=>{

        return <div key={person.id}>

        <li>{`id: ${person.id} ${person.firstName} ${person.lastName} (${person.email})`}</li>

        <button onClick={()=> changePerson(person.id)}>수정</button>

        </div>

      })}

📌 여기서 잠깐!

onClick에 직접 changePerson 함수를 넣지 않고 화살표 함수를 사용해서 changePerson 를 반환하는 이유?

1. 콜백 함수의 실행 시점 제어: 화살표 함수를 사용하여 onClick 이벤트 핸들러에 함수 호출을 넣으면, 해당 버튼이 클릭될 때 콜백 함수가 실행됩니다. 즉, 버튼을 클릭하는 시점에 changePerson(person.id)가 실행되는 것이 아니라, 화살표 함수가 반환하는 함수가 실행되도록 할 수 있습니다. 이를 통해 필요한 시점에 함수를 호출할 수 있습니다.
   
   
2. 인수 전달: onClick 이벤트 핸들러에 인수를 전달해야 할 경우, 화살표 함수를 사용하여 콜백 함수를 감싸면 인수를 전달할 수 있습니다. 예를 들어, onClick={() => changePerson(person.id)}의 경우 person.id 값을 changePerson 함수에 인수로 전달합니다.
   
   
3. 직접 넣으면 버튼을 클릭할 때 실행이 아니라, 버튼이 랜더링 될 때 실행된다.

 

3) 리스트를 map 으로 돌며 요소의 id와 삭제버튼에서 받은 id 값이 동일하다면 수정된 내용을 반환하는 조건을 건다.

- 스프레드 연산자를 사용하여 기존 객체에 내용을 추가하거나 수정할 수 있다.

 

4) 이때, 조건에 부합하지 않으면 (즉, 버튼에서 받은 id와 다르면) 있는 그대로를 반환한다라는 else 를 꼭 적어주자.

 

5) 이렇게 생성된 새로운 리스트를 새로운 변수에 담아 리스트 setter 함수에 넣어준다.

  /* 사람 수정 버튼 */

  const changePerson = (id) => {

    // 실행시 input 창 비우기

    setFirstName('')

    setLastName('')

    setEmail('')

    // 전달받은 id 값과 일치하는 사람의 정보를 입력값대로 변경

    const newPersonList = personList.map((person)=>{

      if(person.id === id){

        return {

          ...person,

          firstName: firstName,

          lastName: lastName,

          email: email

        }}

        else {

          return person; //조건에 부합하지 않는 경우, 그대로 반환하겠다.

        }

    })

    // 변경한 값을 가져와서 setter 함수 실행

    setPersonList(newPersonList)

  }

 

 

 

4. 회원 삭제

1) 삭제 또한 버튼에서 받은 id 값을 활용한다.

2) 여러가지 방법이 있지만 나는 배열에 filter 메소드를 사용했다.

3) 버튼에서 받은 id 값과 일치하지 않는 회원만 필터링하여 새 리스트에 담아준다.

4) 이렇게 담긴 새 리스트를 리스트 setter 함수에 담아준다. 

/* 삭제 버튼 */

// filter를 통해 삭제 버튼 안누른 요소만 배열에 재배치

const deletePerson = (id) =>{

  const newPersonList = personList.filter((person)=>{

    return person.id !== id

  })

  setPersonList(newPersonList);

}

 

 

 

5.완성

오호

 

지금까지 useState를 활용한 CRUD 환경 구축, 초간단 회원 리스트 만들기였습니다.

외형만 바꾸면 게시판으로 얼마든지 변형이 가능합니다.