추가 기능
- React Developer Tools
크롬에서 사용할 수 있는 React 툴이다. 크롬 웹스토어에서 설치해주어야 한다.
도구 더보기 > 확장 프로그램에 들어가서 React Developer Tools의 세부정보를 눌러준다.
- 다음과 같은 창에서
파일 URL에 대한 액세스 허용을 클릭.
- Components 레이어를 볼 수 있는 기능을 활용해보자!
컴포넌트 별도 파일로 분리하기
- App에서는 전체의 구조, 골격과 레이아웃만 남기고 각각의 컴포넌트를 사용할수 있게 하고, 실제 컴포넌트는 각 파일로 분리시켜준다.
- component 파일들은 폴더를 만들어서 그곳에 몰아 넣어준다.
- App.js에 import 경로를 추가해주어야 한다.
제품 구매 관련 기능 구성
아이템 추가하기
- 버튼을 눌렀을 때 이벤트를 발생하도록 구성해준다.
<button onClick={} ~~
- 바로 기능을 구현해도 되지만, 따로 메서드를 구성해서 삽입해주는 것이 좋다. → 추후 사용할수도 있기 때문.
const handleAddBtnClicked = e => { }
<button onClick={handleAddBtnClicked}
- id를 전달받는지 확인하기 위해 id도 작성해 콘솔로그에 추가하자.
console.log를 추가해서 잘 기능하는지 확인하자.
- F12를 누르면 팝업시킬 수 있다. 로그가 잘 출력된다.
근데 id 데이터가 전달되지 않은 듯, undefined가 출력된다.
ProductList.js에 가서 id를 추가해주자.
- 추가하면 콘솔창에 uuid로 출력되는 것을 확인할 수 있다. 하지만 이것을 일일히 추가해주는 것은 상당히 귀찮은 일이다. 다음과 같은 방법을 쓸 수 있다.
.... 은 스프레드 연산자.
v.~내용이 나열되면서 프로덕트 argument에 맵핑되게 된다.- 이제 Summary Item 아이템 추가를 위한 작업을 해보자.
Product는 ProductList와 App의 자식이므로 기능을 작성할 수 있게 위임해야한다.
props 이용.
onAddClick을 이용해서 버튼을 클릭할 때마다 id를 부모에게 전달해준다.
아직 onAddClick를 부모인 ProductList에서 전달하고 있지 않기 때문에 에러가 발생한다.
- 하지만, 여기서도 더 위로 전달해주어야 한다.
- App의 hooks에 접근해야한다. App으로 돌어가자.
- ProductList에
onAddClick={handelAddClicked}를 추가해주고 const로 handleAddClicked를 정의해준다.
- 추가를 눌렀을 때 콘솔에서 잘 표기됨을 확인할 수 있다.
- 전체 내용을 확인하기 위해서
products.find를 사용한다.
- 해당 정보를 "상태"에서 find해서 가져온다.
장바구니 기능 구현하기
- items에서
setItems의 정보를 바꿔주면 제품 추가를 표현할 수 있다.
products.find(v => v.id == id)가 items에 있는지 확인하기.
const found = items.find(v => v.id == id);
- null이 아니라는 것을 확인했을 때, count를 계속 증가시킬 코드 구성.
found ?items.map(v => (v.id == id) ?
map을 이용해서 새로운 배열 생성.
v.id와 id가 같고 이미 found로 찾아진 요소라면 { ...v, count: v.count + 1 }
...v → 기존 요소들의 모든 속성을 복사하고,
count: v.count + 1 카운트를 1 증가시킴: v) : 없다면 원래 것 반환: [...items, { ...product, count: 1}]
못찾은 경우 [...items, 기존것 반환.
{ ...product, count: 1} product 의 내용을 전체 복사하고, count를 1로 설정함. const product = products.find(v => v.id == id);
3항연산자 맨 뒤에 들어갈 product를 추가해준다.
- 위에 설정한 것은 3항연산.
const updatedItems로 정의해주고, setItems(updatedItems)를 추가한다.
- JS는 강력한 표현식을 이용해서 쉽게 배열을 조작할 수 있다.
스프링 서버와 연결해서 데이터 가져오기
Axios 라이브러리 설치하기
npm install : 노드 패키지 모드 설치를 이용해서 JS 라이브러리를 설치할 수 있다.
useEffect
- 리액트 애플리케이션은 '라이프사이클 훅'이라는 것이 존재.
- 리액트 애플리케이션이 브라우저 로드가 되면 DOM이 그려지는 시간과 리액트 가 element를 받는 시간에 갭이 존재한다.
앱에 있는 함수가 실행될 때 리액트 엘리멘트를 반환하는데, 화면에서 랜더링되는 것과 리턴한 것에 갭(시간차)이 발생한다. 랜더링이 완료된 후에 돔에 접근하려 할 때, 라는 준비가 다 됐을 때 특정한 코드를 실행할 상황이 있음.
- 그럴 때
useEffect라는 훅을 사용할 수 있다.
useEffect(() => {} ) useEffect 괄호 안에 있는 내용이 랜더링이 완료되면 호출된다.
- [~~]를 사용해서 디펜던시를 추가하면, "product가 바뀔 때마다 실행되게 하겠다."라는 명령도 가능하다.
빈 배열 [ ]을 주면 랜더링이 완료된 후 딱 한번만 실행된다.
- 비동기 작업은 다
useEffect안에서 이루어져야 한다.
axios.get('URL')
JS Promise란 것을 요청을 한다.
.then(v => setProduct(v.data)); 리턴되는 것의 데이터 값을 갖고 setProduct로 데이터를 불러와줄 수 있다.
- 스프링 서버에서 데이터를 불러와서 리액트 애플리케이션에 출력했다.
