레포에 접속을 하게 되면 Movie app이 하나 나오는데, 그 부분에 있는 images와 data.json을 받아와 주시면 됩니다. 그리고 images 폴더 전체를 프로젝트 폴더의 public 에 넣어주세요. data.json은 src 폴더 안에 넣어주시면 됩니다.
이렇게요 !
이미지를 public 폴더에 넣는 이유는, 나중에 img 태그를 통해서 이미지를 불러올 때 간단하게 불러올 수 있게 하기 위함입니다. data.json은 state로 할당해주어야 하는 변수이기 때문에 src에 위치시켰습니다.
더미데이터 to state
App.js부분을 다음과 같이 변경해 주세요.
data.json의 data를 import 후 App component의 state로 만들었습니다.
이제 모든 더미데이터의 세팅이 끝났습니다.
영화 소개 리스트 컴포넌트 제작하기
우선 컴포넌트를 하나 만들어야 합니다. src 폴더 안에 movie-list라는 폴더에 컴포넌트를 하나 생성해 주세요.
컴포넌트를 생성했습니다.
그 후, 이 컴포넌트의 기본 클래스 형태를 만든 후에, App.js에 렌더링을 시켜주도록 하겠습니다.
이 컴포넌트는 영화 정보의 리스트를 보여주기 때문에 영화 정보 state를 props로 넘기겠습니다.
이제 한번 본격적으로 우리의 앱을 만들어 볼 시간입니다.
movie-list 컴포넌트에 들어가 주세요. 우선 여기서도 styled-components를 사용하겠습니다. 그러나 우리는 리액트를 하러 온거지 CSS를 하러 온 것이 아니니, CSS컴포넌트는 복사 붙여넣기를 통해 진행해 주세요.
또, 이번 컴포넌트는 외부 라이브러리 두 개를 사용해 볼 계획입니다. dom-confetti와 numeral이라는 라이브러리도 같이 설치해 주세요!
많아보이는 코드이지만, 반복의 연속입니다.
class 윗부분
class 아랫부분
Map 함수를 이용해서 배열을 렌더링 할 때는, key를 붙여 주어야 합니다.
map 함수를 이용해서 여러 개의 배열 리스트를 렌더링 할 때에는, 리액트에서 정해준 규칙이 있는데 그것은 바로 key 값을 붙이라는 겁니다. 붙이지 않아도 작동은 하지만, 개발자 도구에서 에러를 보게 됩니다.
계속 이상한 map 함수가 나와서 당황하셨죠? 리액트에서 map 함수에 대한 부분은 정말 중요하니, 잠시 이 부분에서 짚고 넘어가도록 하겠습니다.
props로 받은 데이터 자체가 배열이기 때문에, 그 데이터를 렌더링 해 주기 위해선 각각의 배열 요소를 렌더링 해 주어야 합니다. 이럴때 for문을 사용하는 것이 아닌, map을 사용하게 되면 편하게 렌더링을 수행해 줄 수 있습니다. map이 좋은 점은, map함수를 실행하게 되면 어쨋든 배열 형태로 데이터를 받게 되는데, 리액트가 그 데이터를 풀어서 요소를 렌더링 해 줍니다. map함수를 실행하고 join을 걸어야 하는 것이 아니고, 제대로 된 JSX구문만이 들어간 문자열을 넣으면 리액트가 알아서 렌더링을 진행해 줍니다.
리액트에서의 DOM 컨트롤, Ref로 하세요 !
사실 리액트에서는, querySelector를 통해서 DOM요소를 직접 가져오지 않습니다. 그렇다면 어떻게 DOM 요소를 가져와야 할까요? 그 답이 바로 Ref입니다. ref는 리액트에서 dom요소를 선택해 currentTarget, target과 같은 선택자를 특정해서 직접 우리가 DOM을 다룰 수 있게 해 줍니다.
앞으로 우리가 할 작업은, 영화 리스트 마다 좋아요 버튼을 만들고, 버튼을 클릭하면 dom-confetti모듈을 이용해 효과를 불어넣어줄 작업을 할 것입니다. 그럴 때 필요한 것이 바로 ref입니다. dom-confetti 모듈은 DOM요소를 필요로 하기 때문이죠. 그런데 우리가 좋아요를 몇 개 만들어야 할까요? 영화 리스트는 8개이니 8개의 DOM을 잡아야 하는데, 우리는 이것을 구조화 해서 이미 하나의 map 함수로 코드를 작성을 해 놓았습니다. 요소마다 제각각 ID를 부여하는 것을 하지 못하게 되었다는 이야기 이고, 이럴 때에 element를 선택하는 것은 굉장히 부담스럽습니다. 이럴때 DOM을 컨트롤 하는 방법을 만들어 보겠습니다.
createRef
props로 받은 영화의 리스트 만큼 createRef를 생성해 줍니다.
Ref를 만들기 위해서는 반드시 createRef()가 실행된 프로퍼티에만 담을 수 있습니다.
