React의 List와 Form

React에서 리스트와 폼은 웹 애플리케이션의 유저 인터페이스를 구성하는 데 중요한 역할을 하는 요소이다.

List

주로 같은 종류의 요소들을 담은 배열을 뜻한다. 동적으로 많은 수의 아이템을 표시하거나 렌더링하는데 사용된다. react에서는 동일한 동적인 요소를 for 반복문이 아닌, js의 .map() 함수를 사용해 각각의 아이템들을 하나의 컴포넌트로 렌더링한다. 이때 아이템들은 각자 고유한 key 값을 가져야 한다. 아래의 todo list를 통해 예시로 살펴보자.

const TodoListL FC<{ todos: Todo[] }> = ({ todos }) => {
  
  return (
    <ul>
      {todos.map((todo, i, arr) => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

todos 에 들어있는 할일 목록들을 각각의 <li> 로 렌더링하여 보여주는 예제이다.
map() 함수에는, 3개의 인자를 받을 수 있다. 첫 번째는 각각의 아이템, 두 번째는 아이템의 인덱스, 세 번째는 본체의 배열이다.

.map() 함수를 통해 컴포넌트를 렌더링할 때, 각각의 아이템에 key값을 지정해주는 것은 매우 중요하다. key를 지정해주지 않으면, default로 배열의 index를 지정하는데, 이는 에러까지는 아니지만 다양한 상황에서 잠재적 에러를 일으킬 수 있다. 그래서 react는 자체적으로 경고를 띄워준다.

그렇다면 왜 map() 을 통한 아이템은 key값을 index로 지정하면 안 될까?

• 성능 이슈
  react에서는 다양한 상황에서 리렌더링이 일어난다. 이는 배열 자체에서도 일어날 수 있으며, 배열 내부의 각각 아이템에서도 일어날 수 있다. 이때 만약 아이템의 "순서"에 변경이 일어난다고 가정하자. 만약 key값을 index로 주었다면, 순서의 변경이 일어났을 때 index로 주어진 key 값은 고유한 값이 아니기에 key 값도 같이 변경된다. 이로 인해 react는 아이템 순서의 변화를 인지하기 힘들며 개발자가 예측한대로 동작하지 않을 수 있다.

• 상태 관리와 상호작용 문제:
  key는 각 아이템을 식별하는데 사용되므로, key 값이 변경되면 react는 해당 아이템을 새로운 것으로 간주하고 이전 상태와 비교하여 업데이트를 수행한다. 하지만 index를 key로 사용하면 배열의 순서가 변경될 때마다 모든 key 값이 변경되어 이전 상태와 새로운 상태가 올바르게 비교되지 않을 수 있다.

따라서 map 함수로 리스트를 렌더링할 때는 각 아이템에 고유한 식별자인 key를 제공하는 것이 중요하다. 일반적으로는 각 아이템의 ID나 고유한 값을 key로 사용한다. 또한 key 값은 전역적이 아닌 list내부의 형제 아이템끼리만 고유하면 되기만 한다.

Form

폼은 유저로부터 정보를 수집하거나 전송하기 위한 요소이다. 회원가입 창이나 로그인 창을 예시로 들 수 있다. react에서 폼은 html과 동일하게 <form> 태그와 그 안의 <input>, <select>, <textarea> 등의 폼 컨트롤 요소들을 사용하여 구성된다. 유저의 입력을 받아서 상태로 관리하거나 서버로 전송하는 등의 작업을 수행한다.

하지만 일반 html의 form과 react의 form에는 몇가지 차이점이 존재한다.

• 이벤트 헨들링
  보통 html에서의 폼 제출(submit)은, 페이지 전체를 새로고침하여 동작하지만, react에서는 새로고침 동작을 방지하고, react의 state 기능과 js의 기능을 혼합하여 제출을 진행한다. 때문에 유저는 더 유연한 페이지 흐름을 느낄 수 있다.

• 상태 관리
  html에서의 form은 일반적으로 브라우저의 기본 동작에 의해 유저의 입력 정보들이 URL에 매개변수 형태로 전달된다. 반면 react는 컨트롤드 컴포넌트 (Controlled Component)를 이용하여 폼 요소의 값을 상태로 유지한다. 이를 통해 유저 입력을 더욱 세밀하게 관리하고 처리할 수 있으며 실시간으로 유저의 입력에 관한 피드백을 제공할 수 있다.

• 전송 방식
  form에서 submit 이벤트가 발동하여 데이터가 서버로 전송될 때, html에서의 form은 페이지가 한번 새로고침 된다. 이후 데이터가 서버에 전송되는 방식이다. 반면 react는 페이지를 새로고침하지 않고도 비동기로 데이터를 서버에 전송한다. 따라서 속도 측면에서 유저가 느끼는 차이가 존재한다.

아래는 유저의 이메일과 비밀번호를 입력받아 로그인을 진행하는 예제이다.

  
const LoginForm: FC = () => {
  const [email, setEmail] = useState<string>('');
  const [pw, setPw] = useState<string>('');

  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log(`Submitted: ${email} / ${pw}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Email:
        <input type="email" value={email} onChange={e => setEmail(e.target.value)} />
      </label>
      <label>
        Password:
        <input type="password" value={pw} onChange={e => setPw(e.target.value)} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default FormExample;

react에서 List는 유저에게 다양한 목록을 추가 정보와 함께 보여주는 시각적 요소이고, Form은 유저의 입력 정보를 받아 웹 사이트의 서버와 데이터 정보를 송수신하는 중요한 매개체이다. 이 둘은 상호작용과 동적인 UI를 구현하는 핵심 요소로서 중요한 역할을 한다. 때문에 react를 개발할 때는 이 두가지의 컴포넌트들의 기능을 이해하며 더욱 동적이고 유저 친화적인 웹 애플리케이션을 개발할 수 있다.