문제 해결후 다시 장바구니만들기 2

arrow함수와 function의 차이-> function은 호스팅이된다(선언을 맨위로올려줌-> undefined로 초기화) arrrow는 초기화시켜주지않는다-> arrow는 매개변수를 선언해야 받아올수있고 function은 매개변수로 받은 값을 일단 다가져온다 

 

 

상품값 총액 변\경하기

 

1.리덕스state에 변경요청후 리덕스 state가 변경되면 카트컴포넌트 렌더링이생긴다

2.렌더링이 생기면 state를 다시불러온다 

3. useeffect에  state 의존성을 부여했으므로 연쇄적으로 실행된다

4. useeffect는 state를 가져와 map으로 원소하나씩 곱한다

5. 변할수있는 블록변수 let sum을 useeffect내에 선언후 useeffect와 라이프사이클을 같이한다

6. map으로 객체하나씩 가져오면서 객체의 수량과 가격곱한 값을 sum에 차례대로 담아준다

7.map함수가 끝나면 sum에 모든값이 채워지고 컴포넌트와 라이프사이클이 같은 state에 값을 옮겨준다

8.state를 이제 출력만해주면된다

 

 

유저정보 가져오기

 

1.로그인에 성공하면 세션에 현재 아이디를 넣어준다.

2.세션의 저장 라이프사이클은 브라우져가 꺼질때까지 이다->크롬은 탭이꺼지는게 버무이

3.세션에 저장한뒤 페이지이동을 해야한다.  세션저장이비동기는 아니지만 async연습을 위해 한번써봤다

4.세션저장후 페이지 이동을 원하니까 sesstion저장을 async함수를 만들어준다

5.async 함수의 반환은 프로미스객체가 생성된다

6.프로미스객체 메서드에서 .then을 사용하여 바로 다음 실행으로 만들어준다

7.페이지이동중 histoy객체에 push('/')메서드를 이용하여 메인페이지로 이동한다

 

8.카트 컴포넌트에서 세션 아이디를 가져온후 useeffect에 의존성 []을 사용하여 처음 한번만불러준다

9.useeffect를 사용하는이유는 컴포넌트 첫마운트시 한번만 가져오면되고 서버로 유저정보를 얻기위함이기에 비동기적이라 나머지 렌더링 다하고 받아오도록 설정했다.

10.거기다 빈 배열을 의존성에 넣어주면 컴포넌트 마운트시에만 작동하므로 추가적으로 서버부담이 없어진다.

11. 비동기인 axios가 실행되고 프로미스객체가 생기며 .then()사용가능하며 서버반환해준 user데이터를 setuser로 넣어준다

12. user데이터를 뿌려주면된다.