[React] 리액트 SPA, JSX 그리고 map, filter 메서드

 

 SPA(Single Page Application)

public/index.html 템플릿 파일에서 div element의 id가 root로 되어있고,

src/index.js 자바스크립트 시작점에서 root id를 가진 div element를 잡아준다.

그래서 element 안에서 화면을 꾸밀 수 있게 되는 것이다.

index.html 템플릿이 하나면 한 개의 페이지 만들 때는 괜찮지만 두 개 이상의 페이지를 만들 때는?

원래 a 페이지를 만들면 a.html, b 페이지를 만들면 b.html 이런식으로 만들었다.

위와 같은 방식이 전통적인 웹 사이트를 만들 때 사용하는 Multi Page Application이다.

하지만 요즘에는 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현한다.

이것을 Single Page Application: SPA 라고 부른다.

그럼 SPA에서 화면 변경은 어떻게 일어날까?

전통적인 웹 사이트에서 a page에서 b page로 페이지 전환할 때 a.html을 보여주다가 b.html을 보여주면 됐지만 index.html밖에 없는 SPA에서는 어떻게 페이지 전환(브라우징)을 해줄까?

바로 HTML5의 History API를 사용하면 이것이 가능하다.

자바스크립트 영역에서 History API를 이용해서 현재 페이지 내에서 화면 이동이 일어난 것처럼 작동하게 해준다.

 

 JSX(Javascript syntax extension)

JSX는 자바스크립트의 확장 문법이다. 리액트에서는 이 JSX를 이용해서 화면에서 UI가 보이는 모습을 나타낸다.

JSX를 이용하면 UI를 나타낼 때 자바스크립트(logic)와 HTML구조(markup)를 같이 사용할 수 있기 때문에 기본 UI에 데이터가 변하는 것들이나 이벤트들이 처리되는 부분을 더욱 쉽게 구현할 수 있다.

리액트에서 JSX 사용이 의무는 아니지만 자바스크립트 안에서 UI작업을 하는데 너무 편리하기 때문에 거의 모든 사람이 사용한다.

원래 리액트에서 화면을 그리는 방식은 React.createElement API를 사용해서 element를 생성한 후(객체가 된다)

이 element를 In-memory에 저장한다.

그리고 ReactDOM.render 함수를 사용해서 실제 웹 브라우저에 그려준다.

모든 UI를 만들 때마다 createElement를 사용해서 컴포너트를 만들 수 없기에 JSX를 사용한 후 그걸 바벨이 다시 createElement로 바꿔서 사용한다.

JSX를 사용할 때 컴포넌트에 여러 element 요소가 있다면 반드시 부모 요소 하나로 감싸줘야한다.

 

 Map 메서드

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Array.prototype.map() - JavaScript | MDN

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

그리고 map 메서드를 사용해서 데이터를 나열할 때 key 속성을 넣지 않는다면 에러가 발생한다.

리액트에서 요소의 리스트를 나열할 때는 JSX Key를 넣어줘야한다.

키는 React가 변경, 추가 또는 제거된 항목을 식별하는 데 도움이 된다.

요소에 안정적인 ID를 부여하려면 배열 내부의 요소에 키를 제공해야 한다.

리액트는 가상 돔을 이용해서 바뀐 부분만 실제 돔에 적용하기 때문에 리액트에서 리스트를 나열할 때 바뀐 부분을 찾을 때

key를 이용해서 어떠한 부분이 바뀌었는지 인식할 수 있다.

key에는 유니크한 값을 넣어준다. index도 0부터 시작해서 유니크한 값을 가지지만 만약 리스트가 추가되거나 제거되면 해당 리스트들의 key값도 바뀌기 때문에 Index는 비추천이다.

새로 맨앞에 들어온 리스트가 그 전에 있던 index를 key값으로 가져서 이러한 현상이 일어난다.

 

 

 Filter 메서드

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Array.prototype.filter() - JavaScript | MDN

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.

CRUD에서 Delete를 구현할 때 자주 사용한다.

const handleDelete = (id) => {
  let newTodoData = todoData.filter((data) => data.id !== id);
  setTodoData(newTodoData);
};
  
return (
  <div>
    {todoData.map((data) => (
      <div style={getStyle(data.completed)} key={data.id}>
        <input
          type="checkbox"
          defaultChecked={false}
          onChange={() => handleCompleteChange(data.id)}
        />
        {data.title}
        <button style={btnStyle} onClick={() => handleDelete(data.id)}>
          x
        </button>
      </div>
    ))}
  </div>
);

handleDelete라는 이벤트핸들러 예시를 보면 filter 메서드를 사용하여 data.id와 id가 일치하지 않은 것들만 새로운 배열로 저장한다.

즉, 해당 id에 해당하는 데이터만 삭제하게 되는 것이다.