Chapter03. 리엑트 프로젝트 / 주소록 관리

<< 학습 목표 >>

1. 프로젝트에 부트스트랩을 추가할 수 있다.

2. 하나의 컴포넌트를 여러 컴포넌트로 분리할 수 있다.

3. map 함수를 사용해 컴포넌트들을 출력할 수 있다.

---

지금까지 배운 내용들을 활용해 아래와 같은 주소록 관리 페이지를 만들어보자

1. 이름, 연락처, 주소를 입력하고 [ 추가 ] 버튼을 누르면 아래 목록의 마지막에 새로운 주소 정보가 추가됨

2. 수정 버튼을 누르면 해당 하는 주소 정보의 이름, 연락처, 주소가 수정 가능한 상태로 바뀜

  그 상태에서 이름, 연락처, 주소를 수정한 뒤 [ 완료 ] 버튼을 누르면 수정이 완료됨

3. 삭제 버튼을 누르면 [ 확인 ] [ 취소 ] 창이 나오며 [ 확인 ] 버튼을 누르면 해당 주소 정보가 삭제됨

---

CSS는 최대한 부트스트랩을 사용할 것임

 

먼저 프로젝트에 부트스트랩을 적용하자

인터넷에 부트스트랩 으로 검색(1) 해 첫 번째 결과 페이지(2)로 들어가자

결과 페이지가 다르다면 직접 들어가자 / https://getbootstrap.kr/

 

부트스트랩 적용하기 전 부트스트랩의 버전(1)을 확인하자

이 글을 보는 시점에 부트스트랩 버전이 다르다면 버전(1)을 클릭해 5.2 또는 버전 내 [ 모든 버전 ] 을 클릭해 5.2 버전으로 이동 하자

부트스트랩 버전이 5.2인 걸 확인하고 문서(2) 로 들어가자

 

문서 페이지로 들어가면 [ 빠른 시작 ] 이 보이는데 [ 빠른 시작 ] 내 2번(1) 안에 있는 link 태그(2)와 script 태그(3) 를 프로젝트에 복사 & 붙여넣기 해야함

 

이제 프로젝트 -> public -> index.html 을 열자

 

index.html 파일 내 head 태그 안에다가 문서에서 봤던 link 태그를 넣자

head 태그 안에만 있으면 됨

 

또한 index.html 파일 내 닫는 body 태그(</body>) 직전에 문서에서 봤던 script 태그를 넣자

 

이제 프로젝트에 부트스트랩 적용이 됐음

---

이제 주소록 관리 프로젝트 샘플 페이지를 추가하자

 

프로젝트 -> src -> chapter03 -> AddressMng.jsx 파일을 추가하고 아래 코드를 추가하자

import React from 'react';

function AddressMng() {
    return(
        <div className="container">
            <div className="text-center">
                <h1>[ 주소록 관리 프로젝트 ]</h1>
                <hr />
            </div>

            <div id="add_panel">
                <div className="row align-items-center justify-content-center">
                    <div className="col-2">
                        <input type="text" className="form-control" placeholder="이름" />
                    </div>
                    <div className="col-2">
                        <input type="tel" className="form-control" placeholder="연락처" />
                    </div>
                    <div className="col-5">
                        <input type="text" className="form-control" placeholder="주소" />
                    </div>
                    <div className="col-2 text-center">
                        <button type="button" className="btn btn-primary">추가</button>
                    </div>
                </div>
                <hr />
            </div>

            <div id="list_panel">
                <table className="table text-center">
                    <thead>
                        <tr className="row">
                            <th className="col-1" scope="col"></th>
                            <th className="col-2" scope="col">이름</th>
                            <th className="col-2" scope="col">연락처</th>
                            <th className="col-5" scope="col">주소</th>
                            <th className="col-2" scope="col"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr className="row">
                            <th className="col-1" scope="row">1</th>
                            <td className="col-2">홍길동</td>
                            <td className="col-2">010-1111-1111</td>
                            <td className="col-5 text-left">서울특별시</td>
                            <td className="col-2">
                                <div className="btn-group" role="group" aria-label="Basic example">
                                    <button type="button" className="btn btn-success">수정</button>
                                    <button type="button" className="btn btn-danger">삭제</button>
                                </div>
                            </td>
                        </tr>
                        <tr className="row">
                            <th className="col-1" scope="row">2</th>
                            <td className="col-2" >고영희</td>
                            <td className="col-2" >010-2222-2222</td>
                            <td className="col-5" >인천광역시</td>
                            <td className="col-2">
                                <div className="btn-group" role="group" aria-label="Basic example">
                                    <button type="button" className="btn btn-success">수정</button>
                                    <button type="button" className="btn btn-danger">삭제</button>
                                </div>
                            </td>
                        </tr>
                        <tr className="row">
                            <th className="col-1" scope="row">3</th>
                            <td className="col-2">김철수</td>
                            <td className="col-2">010-3333-3333</td>
                            <td className="col-5">경기도</td>
                            <td className="col-2">
                                <div className="btn-group" role="group" aria-label="Basic example">
                                    <button type="button" className="btn btn-success">수정</button>
                                    <button type="button" className="btn btn-danger">삭제</button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    );
}

export default AddressMng;

 

이 코드는 샘플 코드로 이 컴포넌트를 출력해보자

---

위 코드에서 역할별로 컴포넌트를 분리하자

먼저 사용자가 이름, 연락처, 주소 를 입력하고 [ 추가 ] 를 하는 영역이 있으므로 이 부분을 컴포넌트로 분리하자

 

프로젝트 -> src -> chapter03 -> AddressAdd.jsx 파일을 추가하고 아래 코드를 추가하자

그 후 AddressMng 컴포넌트에서 해당 부분을 AddressAdd 컴포넌트로 교체(1)하자

 

이번에는 주소 목록을 보여주는 영역이 있으므로 이 부분을 컴포넌트로 분리하자

 

프로젝트 -> src -> chapter03 -> AddressList.jsx 파일을 추가하고 아래 코드를 추가하자

그 후 AddressMng 컴포넌트에서 해당 부분을 AddressList 컴포넌트로 교체(1)하자

 

AddressList 컴포넌트에서 다시 컴포넌트로 분리할 수 있는 부분이 있음

주소 정보가 출력되는 각 행

프로젝트 -> src -> chapter03 -> Address.jsx 파일을 추가하고 아래 코드를 추가하자

그 후 AddressList 컴포넌트에서 해당 부분을 Address 컴포넌트로 교체(1)하자

 

눈에 보이는 외관에 변화는 없지만 코드는 상당히 체계가 잡혔음

---

일단 지금 유심히 봐야할 부분은 AddressList에서 주소 정보가 들어있는 addressList 변수에 map을 사용했다는 점

리엑트에서 map함수를 사용해 Address 컴포넌트를 출력하고 있다는 점

 

앞선 글 ( https://codingaja.tistory.com/76 ) 에서도 봐서 map 함수에 대해서 잘 알고 있겠지만 데이터들을 갖고 있는 변수를 사용해 컴포넌트를 출력할 때는 map 함수를 사용함(1)
map 함수를 사용해 컴포넌트를 출력할 때 컴포넌트에 반드시 key를 전달해야하며 key는 컴포넌트 간에 구분할 수 있는 유일한 값이어야함

유일한 값은 데이터들의 인덱스 번호이므로 인덱스 번호를 전달(2)하고 있음

 

map 함수를 사용해 컴포넌트를 반환하면 컴포넌트 배열이 만들어짐(1)

리엑트가 이 컴포넌트 배열을 화면에 출력할 수 있는 태그들로 변환해 화면에 출력되는 것(2)