dispatch를 쓰면 일반적으로 리렌더링이 된다. useEffect 내부에서는 최초 렌더링 이후엔 api요청함수와 dispatch를 넣으면 안될 것같다. 대신 useEffect 내부에서 지역state로 바꾸어서 사용해야 한다.
컴포넌트 내부에서는 전역state를 받지말고 useEffect내에서 지역state를 받으면 괜찮아질 것같다.
useEffect는 무조건 한번씩 실행된다. 그리고 의존성 배열의 변경사항에 따라 다시 실행이된다.
의존성 배열 안에 있는애들은 전역상태, useEffect 내부에서 상태바꾸는건 지역 상태갱신함수로 바꾸어준다. return부분에서 rendering후 데이터를 받아올 때 지역상태로 보여준다.
useEffect에서 첫 렌더링될떄 보이는 부분은 예외처리해주고
dispatch를 useEffect안에서 최대한 빼내야한다.
해결해야 할 것
MainPage
Jumbotron
- axios & dispatch
- 처음 렌더링시, order가 변할 때마다 allConcerts에 콘서트 목록 저장
- order가 변할 때, 화살표를 누를 때 target,targetIdx가 변함
- useEffect
- order가 변할 때마다 orderJumbo가 변함
PosterSlide
- axios & dispatch
- targetIdx가 잡혀있을 시(콘서트페이지에서 옴)target을
allConcerts[targetIdx]로 변경시킨다. - targetIdx가 잡혀있지 않을 시(처음 렌더링시) setTargetIdx로 targetIdx를 0으로 만든다
- targetIdx가 잡혀있을 시(콘서트페이지에서 옴)target을
- useEffect
- 전역상태 allConcerts가 변경될 때마다 지역상태 allConcertsMain이 변함
- 전역 target 변경시 지역상태 targetMain이 변함
- 전역 targetIdx 변경시 지역상태 targetIdxMain이 변함
MainConcertInfo
- axios & dispatch
- target이 바뀔 때마다 detail(상세콘서트 정보) 받아오기
- useEffect
- 전역 detail이 변경될 때마다 setDetailMain으로 지역 deatilMain이 변함
- 여기도 데이터 받아올 때까지 시간이 1초정도 걸려서 loading 표시가 있으면 좋을 것같다.
만들었지만 안써서 지운 것
/* D-DAY 계산기 */
const dayCalculator = (openDate?: Date): string => {
if (openDate) {
const today = new Date();
const targetDay = new Date(openDate);
const gap = targetDay.getTime() - today.getTime();
const count = Math.ceil(gap / (1000 * 60 * 60 * 24));
/* 남은 일수에 따라 디데이 리턴 */
if (count === 1) return 'D-0';
else if (count < 1) return '';
else return 'D-' + (count - 1);
}
return '';
};조회수가 2씩 증가하는 에러 수정
댓글을 조회할 때 해당 콘서트를 조회하고나서 댓글을 조회(총 2번요청)해서 서버측에서 콘서트조회와 관련없이 바로 totalComment를 따로 받아올 수 있도록 고쳐주셔서 수정되었다.
총 댓글 수가 댓글을 추가,삭제할때마다 변하지 않는 에러 수정
comment store에 전체댓글수를 담은 전역상태를 만든다. 전역상태는 mainComment에서 댓글을 추가하거나 삭제할 때 변경된다. 전역상태가 변할 때마다 mainConcertInfo에있는 지역상태가 변한다.
2/20
reactSlick이 slick라이브러리(제이쿼리)를 리액트에서 쓸 수 있게 만들어놓은 라이브러리라서 centerMode일때 에러가 많고 slickGoTo 메서드도 에러가 있을 때가 많은 것같다.
리액트 생명주기가 어려운 것같다. 언제 렌더링되는건지 아는게 어렵다.
