Chapter03. 리엑트 프로젝트 / 주소록 추가, 출력

<< 학습 목표 >>

1. 컴포넌트 구조를 그릴 수 있다.

2. 자식 컴포넌트에서 부모 컴포넌트로 값을 전달할 수 있다.

---

전 글 ( https://codingaja.tistory.com/83 ) 에서는 페이지를 나누는거에 초점을 맞췄다면 이번에는 기능 구현에 초점을 맞추자

전 글에서 페이지를 나눈 걸 시각화 하면 다음과 같음

 

AddressAdd 컴포넌트에서 [ 추가 ] 버튼의 기능을 구현하자

 

AddressAdd 컴포넌트에서 이름, 연락처, 주소를 입력하고 [ 추가 ] 버튼을 누르면 AddressAdd 컴포넌트를 지나 AddressMng 컴포넌트를 지나 AddressList 컴포넌트로 전달되야함

 

AddressList 컴포넌트에서는 전달 받은 주소 정보를 addressList 변수에 저장해야함

그렇게 되면 addressList 컴포넌트에 변화가 생겼으므로 기존 AddressList 컴포넌트가 새 AddressList 컴포넌트로 교체되면서 추가된 정보를 갖고 있는 Address 컴포넌트들이 만들어질 것

---

AddressMng 컴포넌트가 가장 위에 있으므로 부모 컴포넌트라 부르고 AddressAdd, AddressList 컴포넌트는 자식 컴포넌트라 하자

AddressMng 컴포넌트 기준으로 Address 컴포넌트는 자식의 자식인 자손 컴포넌트이지만 AddressList 컴포넌트를 기준으로 Address 컴포넌트는 자식 컴포넌트임

 

현재 상태에서 사용자가 입력한 주소 정보를 전달하는 과정을 다시 얘기하면 AddressAdd 자식 컴포넌트에서 AddressMng 부모 컴포넌트로 값을 전달(1)해야하고 AddressMng 부모 컴포넌트는 AddressList 자식 컴포넌트로 값을 전달(2)해야하는 상황임

 

이렇게 자식 컴포넌트에서 부모 컴포넌트로 값을 전달 하고자 할 때는 부모 컴포넌트에서 자식 컴포넌트로 useState로 생성한 변수의 setter 를 전달해주면 됨

그리고 자식 컴포넌트에서는 부모 컴포넌트가 전달한 setter 를 사용해 전달 할 값을 저장하면 됨

이와 같이 구현한 코드를 입력하자

 

AddressMng 컴포넌트와 AddressAdd 컴포넌트에 아래와 같이 코드를 추가하자

 

<< 코드 설명 >>

(1). AddressMng 컴포넌트에서 useState, useEffect 훅을 사용하기 위한 import

(2). AddressAdd 자식 컴포넌트에서 추가한 주소 정보를 받아오기 위한 address 변수 선언

(3). AddressMng 부모 컴포넌트에서 AddressAdd 자식 컴포넌트로 address 변수의 값을 바꿀 수 있는 setter 함수 전달

  이때 전달한 setter 함수는 setAddress가 아닌 handleChangeAddress임

  이렇게 함수를 변수에 담아 전달할 수 있는 이유는? JS의 함수는 1급 객체이기 때문에

  만약 1급 객체란 말을 모르면 JS 1급 객체 와 관련된 키워드로 검색해보자

(4). AddressAdd 자식 컴포넌트에서 useRef 훅을 사용하기 위한 import

(5). 이름, 연락처, 주소 input 태그를 저장하기 위한 ref 변수 선언

(6). 이름, 연락처, 주소 input 태그를 ref 변수에 저장

(7). [ 추가 ] 버튼을 클릭하면 clickAddBtn 함수 호출

(8). 이름, 연락처, 주소 input 태그에 입력한 값을 가져와 JSON 객체에 담은 뒤 address 변수에 저장

  그 후 전달 받은 setter 함수에 JSON 객체 저장

(9). AddressAdd 자식 컴포넌트에서 전달받은 setter 함수를 사용해 주소 정보를 저장하면 AddressMng 부모 클래스의 address 변수에 변화가 생기므로 useEffect 내 함수가 동작해 AddressAdd 자식 컴포넌트가 전달한 값을 부모 클래스에서 확인할 수 있음

 

(9)는 부모 컴포넌트에서 자식 컴포넌트가 전달한 값을 받을 수 있나 확인하기 위한 훅임

 

이제 웹 페이지에서 개발자 모드의 [ console 패널 ] 을 열고 이름, 연락처, 주소를 입력하고 [ 추가 ] 버튼을 눌러보자

---

AddressMng 부모 컴포넌트에서 AddressAdd 자식 컴포넌트가 전달한 주소 정보를 전달 받았으므로 이제 AddressMng 부모 컴포넌트에서 AddressList 자식 컴포넌트로 값을 전달(1)하면 됨

AddressMng 부모 컴포넌트에서 확인용으로 추가해둔 useEffect 훅은 삭제하자

 

AddressList 자식 컴포넌트에서는 AddressMng 부모 컴포넌트가 전달한 주소 정보를 받기 위해 props 를 선언(1)하자

또한 주소 정보 목록(주소록) 을 저장하기 위해 useState로 addresList 변수를 선언함(2)

AddressMng 부모 컴포넌트에서 값을 전달하면 props에 변화가 생기므로 useEffect 훅으로 props의 변화를 감지하자(3)

props에 변화가 생기면 useEffect 내 코드가 동작(4)하고 AddressMng 부모 컴포넌트가 전달한 주소 정보가 있다면(5) 기존의 주소록을 복사한 새로운 주소록을 생성(6)하고 새로운 주소록에 전달 받은 주소 정보를 추가(7) 한 뒤 기존의 주소록을 새로운 주소록으로 교체(8)함

 

이제 AddressMng 컴포넌트 내에서 이름, 연락처, 주소를 입력한 후 [ 추가 ] 버튼을 눌러보자

그럼 주소 정보가 AddressAdd 자식 컴포넌트에서 AddressMng 부모 컴포넌트로, AddressMng 부모 컴포넌트에서 AddressList 자식 컴포넌트로 전달된 후 AddressList 컴포넌트 내 useEffect 훅을 통해 addressList 배열에 새로운 주소 정보가 추가되고 주소 정보가 출력됨