[React] Text 입력 웹페이지 생성하기 #5 (배열, LIST)

아래 단계에 따라 웹페이지를 구성하여 생성하고자 한다.

크게는 (1)화면을 구성하고, (2)화면을 구동하는 2가지 스텝으로 구성하고 각 스텝마다 세분화하였다.

본 포스팅은 (2)화면을 구동하는 스텝의 두번째 2.2단계에 해당된다.

 

    1. 화면 구성

        > 1.1 : Input Component 생성하기 (textarea, input)

        > 1.2 : Option Component 생성하기 (option)

        > 1.3 : CSS 적용하기 

    2. 화면 구동

        > 2.1 : DOM 조작하기

        > 2.2 : 배열 사용하기

 

2.1단계에서 텍스트를 기입하여 해당 내용을 저장하는 저장 기능을 추가하였다.

이번 2.2단계에서는 배열을 이용하여 내용을 저장하고, 저장된 내용을 삭제/수정이 가능하도록 하고자 한다.

 

 

 

 

---

배열(Arrays)이란?

---

배열(Arrays)은 하나의 변수명 아래에 데이터 아이템의 리스트를 저장하는 간편한 방법으로,  보통 리스트에 저장된 다수의 값들을 포함하고 있는 하나의 객체를 말한다. 

배열 객체는 변수에 저장할 수 있고, 배열 안의 값에도 개별적으로 각각 접근이 가능하다.

배열을 사용하지 않으면, 모든 원소에 대해 각각 별도 변수에 저장해야 하지만 배열을 사용하면 이 과정을 줄여 효과적으로 사용할 수 있다.

 

 

 

 

---

2.2 : 배열 사용하기

---

1. React 프로젝트 생성 ~ Input Component 생성 (이전 포스팅 참조)

▶ 아래 포스팅을 참조하여,

Create React App을 통해 React 프로젝트 생성 후 Input Component를 생성한다.

 

1.1단계 : Input Component 생성하기 (textarea, input) -> 

https://break-time-for.tistory.com/entry/React-Text-입력-웹페이지-생성하기-1-textarea-input

[React] Text 입력 웹페이지 생성하기 #1 (textarea, input)

 

2. Option Component 추가 (이전 포스팅 참조)

▶ 아래 포스팅을 참조하여, Option Component를 추가한다.

 

1.2단계 : Option Component 생성하기 (option) ->

https://break-time-for.tistory.com/entry/React-Text-입력-웹페이지-생성하기-2-option

[React] Text 입력 웹페이지 생성하기 #2 (option)

 

3. CSS 파일 수정 (이전 포스팅 참조)

▶ 아래 포스팅을 참조하여, CSS를 수정한다.

 

1.3단계 : CSS 적용하기  ->

https://break-time-for.tistory.com/entry/React-Text-입력-웹페이지-생성하기-3-css

[React] Text 입력 웹페이지 생성하기 #3 (css)

 

4. useRef를 활용하여 DOM 조작 (이전 포스팅 참조)

▶ 아래 포스팅을 참조하여, DOM을 추가한다.

 

2.1단계 : DOM 조작하기  ->

https://break-time-for.tistory.com/entry/React-Text-입력-웹페이지-생성하기-4-useRef-DOM

[React] Text 입력 웹페이지 생성하기 #4 (useRef, DOM)

 

5. List Array 추가

▶ 작성한 텍스트를 저장한 후에, 리스트 형태로 조회할 수 있도록 화면 하단에 추가하고자 한다.

화면 설계

 

▶ [Item.js] 파일을 추가하여 아래와 같이 작성해준다.

const Item = ({ id, first_text, second_text, option, created_date }) => {
    return (
      <div className="Item">
        <div className="info">
          <span className="first_text_info">
            제목 : {first_text}
          </span>
          <br />
          <span className="option_day"> 요일 : {option} </span>
          <br />
          <span className="date">{new Date(created_date).toLocaleString()}</span>
        </div>
        <div className="second_text">{second_text}</div>
      </div>
    );
  };
  
  export default Item;

 

▶ 아래 그림과 같이 저장된 내용이 보일 수 있도록 Component를 구성한다.

저장된 내용 설계

 

▶ 위에서 만든 [Item.js]를 가져올 [List.js] 파일을 추가하여 아래와 같이 작성해준다.

import Item from "./Item";

const List = ({ List }) => {
  return (
    <div className="List">
      <h2>목록</h2>
      <div>
        {List.map((it) => (
          <Item key={`item_${it.id}`} {...it} />
        ))}
      </div>
    </div>
  );
};

List.defaultProps = {
  List: []
};

export default List;

 

6. 저장, 수정, 삭제 기능 추가

▶ 내용을 배열에 저장하고, 해당 내용을 수정 및 삭제를 할 수 있도록 코드를 수정한다.

const handleClickRemove = () => {
    if (window.confirm(`${id}번째 항목을 삭제하시겠습니까?`)) {
      onRemove(id);
    }
  };

  const handleQuitEdit = () => {
    setIsEdit(false);
    setLocalContent(second_text);
  };

  const handleEdit = () => {
    if (localContent.length < 5) {
      localContentInput.current.focus();
      return;
    }

    if (window.confirm(`${id}번째 항목을 수정하시겠습니까?`)) {
      onEdit(id, localContent);
      toggleIsEdit();
    }
  };

 

▶ 수정한 코드에 맞게 [App.js] 역시 수정해준다.

<Input onCreate={onCreate} />
<List onEdit={onEdit} onRemove={onRemove} List={data} />

 

7. 저장 및 조회

▶ 수정한 [App.js], [List.js], [Item.js] 를 저장한다.

css 파일을 수정한 경우에는 해당 파일까지 저장이 필요하다.

 

▶ 수정한 파일을 저장하면 웹 브라우저는 자동으로 수정된다.

혹시 파일 저장을 해도 수정이 안 된다면, 웹 브라우저를 [새로고침]하면 된다.

 

▶ Text 입력 영역에 값을 기입하고 아래 '저장' 버튼을 클릭한다.

버튼을 클릭하면 '저장 성공!' 알림창이 나오는 것을 확인할 수 있다.

웹 브라우저 (텍스트 작성)

 

▶ 저장이 정상적으로 되면 아래 그림과 같이 '목록' 하단에 기입한 내용이 조회된다.

저장된 내용 목록

 

▶ 목록의 '수정하기'를 클릭하여 저장된 내용 수정이 가능하다.

저장된 내용 수정

 

▶ 목록의 '삭제하기'를 클릭하여 저장된 내용 삭제가 가능하다.

'삭제하기' 버튼을 클릭하면,  '#번째 항목을 삭제하시겠습니까?' 알림창이 나오는 것을 확인할 수 있다.

 

 

 

 

지금까지의 포스팅을 통해 간단히 웹 페이지를 구성하는 단계에 대해 알아보았다.

이 외에도 다양한 Component를 추가하고, css를 수정하여 보다 더 다채로운 웹 페이지 구성이 가능하다 !

 

---

    1. 화면 구성

        > 1.1 : Input Component 생성하기 (textarea, input)

        > 1.2 : Option Component 생성하기 (option)

        > 1.3 : CSS 적용하기 

    2. 화면 구동

        > 2.1 : DOM 조작하기

        > 2.2 : 배열 사용하기