오늘은 어제에 이어서 무한스크롤 설정방법, 그리고 하위컴포넌트에서 상위컴포넌트를 제어할수 있게 하는 state 끌어올리기에 대해서 배웠다.
State 끌어올리기
react의 데이터 흐름은 단방향 이다.
즉 부모컴포넌트에서 자식컴포넌트를 변경할수 있고 자식에서 부모를 변경할수는 없다.
만약 자식컴포넌트에서 부모컴포넌트를 변경해야할 상황이 나오면 어떻게 해야할까?
처음부터 컴포넌트 구조를 다시 만들어야할까?
자식컴포넌트로 부모컴포넌트를 변경할수 있게하는 방법이 바로 state 끌어올리기 이다.
react의 데이터 흐름
리액트는 기본적으로 이렇게 데이터를 부모컴포넌트에서 자식 컴포넌트에게 전달해준다.
자식컴포넌트는 props로 전달받은 값을 사용한다.
자식컴포넌트에서 부모컴포넌트에 대한 내용을 바꾸려면 아래 그림과 같이 진행해 줘야 한다.
부모컴포넌트에서 state값이 저장된 setState를 자식에게 props로 넘겨준다 자식컴포넌트에서 props로 넘겨받은 값을 변경하면 부모컴포넌트에 값이 변경된다.
예시
좀더 명확한 예시를 보면 다음과 같다.
댓글 기능창의 예시 페이지 이다.
댓글 작성 및 리스트가 부모컴포넌트 이고 댓글 수정페이지가 자식컴포넌트 이다.
댓글창은 조건부 렌더링으로 파란색 동그라미 부분을 클릭하면 id 값을 조회해 클릭시 수정하기 창이 보인다.
파란색 동그라미 부분인 댓글 수정하기를 클릭하면 댓글 수정페이지가 보여지고 댓글수정하기를 클릭하면 댓글 리스트의 내용이 변경되어야 한다.
즉 자식컴포넌트에서 행해지는 onClick이 부모컴포넌트의 값을 변경해야하는 상황이다.
해당코드부분을 보면 아래와 같다.
부모 컴포넌트
[modify, setModify] 라는 state를 만들고 수정하러 가기 버튼(파란색 동그라미)을 누르면 조건부 랜더링으로 댓글 수정페이지가 나타난다.
자식 컴포넌트
자식컴포넌트에선 수정에 필요한 variables, refetchQueries를 작성하고 맨 마지막 부분에 props로 넘겨받은 setModify값을 ""로 바꿔준다.
부모컴포넌트에서 클릭시 id값을 할당받아 클릭한 id값과 댓글의 id값이 같은경우 수정하기 페이지를 보여줬기때문에
수정 완료후 다시 원래상태로 돌리려면 이 값을 없애줘야 한다.
이렇게 setModify를 넘겨주고 그 값을 자식컴포넌트에서 없애줌으로써 자식컴포넌트가 부모컴포넌트를 변경하게 만들수 있다.
무한스크롤
무한스크롤은 pagination종류중 하나이다.
다만 게시글,댓글등이 스크롤을 내릴때마다 계속해서 나오게 하는 pagination 방식이다.
유튜브, 페이스북등 페이지를 넘겨 새로운 게시물을 보여주는것이 아니라 스크롤을 내리면 계속해서 게시글이 나오는 방법이 무한스크롤 방식이다.
먼저 무한스크롤을 적용하려면 설치가 필요하다.
터미널에서 설치를 해준다.
함수 정의
무한스크롤을 사용하려면 react-infinite-scroller 속성값인 loadmore 속성을 사용해야 한다.
loadmore에 속성값처럼 함수를 정의해 준다.
variables값으로 page가 필요하며 page 값은 게시판 방식의 pagination과 동일하게 써준다.
updateQuery라는것이 좀 다른데 ...prev.fetchBoardsComments 는 기존에 있는 댓글 값
...fetchMoreResutl는 새로 업데이트된 값
이함수가 돌면서 이전 댓글들이 계속 보이게 된다.
present 적용
이렇게 정의해준후 무한스크롤을 적용할 부분에 감싸준다.
style 페이지에서 infinitescroll을 불러와 스타일을 정의해 준다.
ScrollWrapper를 만들어 map이 돌고있는 부분을 감싸준다.
이때 container에서 정의한 loadMore 함수를 바인딩 하고 추가적으로 사용할 속성들을 정의한다.
이렇게 감싸주면 댓글 무한스크롤이 적용된다.
