학습한 내용
redux(리덕스)
리덕스는 JavaScript 상태 관리 라이브러리이다
상태 관리 툴 종류
React Context
Redux
Mobx
실습
1
먼저 새 프로젝트를 만든다
2
npminstall redux react-redux로 리덕스를 설치한다
redux와 react-redux를 같이 설치하는 명령어이다
- react-redux: 리액트 환경에 맞는 리덕스를 사용할 수 있게 해줌
crc 폴더에 있는 App.js에서 div의 내용을 모두 지우고
Container, Row, Col 코드를 작성하고
태그의 출처를 가져온다
그리고 bootstrap을 설치해야 하는데 구글에서 react bootstrap을 검색해서 가장 위에 있는 사이트로 들어간다
Get started 클릭
설치 명령어를 그대로 입력한다
npm install react-bootstrap bootstrap
설치 완료
ContactForm 태그와 ContactList 태그를 써주고
src 폴더 밑에 component 폴더를 만든다
component 폴더에 ContactForm.js와 ContactList.js 파일을 만든다
그리고 두 파일을 import 코드로 App.js에 연결한다
App.css파일로 들어가서 내용을 전부 지우고 title을 가운데정렬 해준다
ContactForm.js파일로 들어가 함수 기본 구조를 만들어주고
아까 들어갔던 bootstrap 홈페이지에서 좌측의 Forms 메뉴로 들어간다
Overview에 있는 코드를 그대로 복사해서 붙이고, 보기 좋게 들여쓰기 정리를 해준다
그리고 태그의 출처를 명시하면 오류가 생기지 않는다
그리고 만들고자 하는 형식에 맞게 내용을 수정한다
3
ContactList.js도 기본 구조를 만들고
SearchBox태그를 쓰고 태그의 출처가 될 SearchBox.js를 component 폴더 안에 만든다
SearchBox.js도 기본 구조를 만든다
내용을 적고 코드 출처를 밝힌다
4
ContactList에 ContactItem 태그를 작성하고
태그의 출처가 될 ContactItem.js를 component 폴더 안에 만든다
구글에서 unknown person 이미지를 가져와서 이미지 태그의 링크에 붙여넣는다
div태그 2개를 만들고, Row, Col 태그의 출처를 밝힌다
5
SearchBox.js에서 각 Col 영역의 비율을 조정한다
비율 조정 코드는 lg이다
ContactItem.js 비율 조정
현재까지 진행도
6
UI는 여기까지 진행하고, 이제 기능을 구현한다
구현 과정은왼쪽에는 연락처 등록하는 폼이, 오른쪽에는 연락처 리스트와 search 창이 있다.
리스트에 유저 이름과 전화번호를 추가 할 수 있다.
리스트에 아이템이 몇 개 있는지 보인다.
사용자가 유저를 이름 검색으로 찾을 수 있다.
먼저 src 폴더 밑에 Store.js를 만든다
여기까지 작성하고
src 폴더 밑에 reducer폴더를 만들고 거기에 reducer.js를 만든다
(reducer는 여러 개가 될 수 있기 때문에 따로 폴더를 만든다)
reducer.js를 작성한다
그리고 src 폴더의 index.js로 들어가 수정해주고, import로 태그를 가져온다
여기까지 저장과 삭제를 구현했다
7
이제 ContactForm.js에서 입력값 정보를 읽고 건네주는 작업을 구현한다
ContactForm.js에서 위처럼 작성하고, import로 가져온다
그리고 return문에서 이벤트를 만든다
버튼에 대한 이벤트도 만들어준다
8
그리고 ContactForm.js에서 건네주는 정보는 ContactList.js에서 받아서 추가된다
받는 작업을 구현한다
9
ContactList.js의 item을 ContactItem.js에서 받아 화면에 추가하는 작업을 구현한다
완성된 웹 페이지에서 이름과 전화번호를 입력하면
연락처에 추가가 된다
어려운 내용
해결방법
학습소감
이번 시간에는 redux를 이용해 입력값에 입력된 정보를 추가하는 작업을 구현해보았다
본격적인 기능 구현 이전에 UI를 만드는것도 물론 어려웠지만, 작업이 이루어지는 과정을 구현하는 일이 상당히 어려웠다
ContactForm의 입력창에 입력된 입력값을 저장하고 그 정보가 ContactList에서 받아서 배열에 저장된 정보를 ContactItem에서 화면에 출력하는 일련의 과정이 아직 어떤 메커니즘으로 이루어지는지 잘 모르겠다
