[공부] 노마드 코더 React hooks 2회차(useTab)

✨ 느낀 점

👍 알게 된 점

버튼을 클릭하면 내용이 바뀐다.

버튼을 클릭하면 changeItem함수가 실행된다. 나는 changeItem을 setCurrentIndex함수로 정의했으므로 content.map함수로 인해 생성된 index값을 currentIndex에 넣는다. useState함수가 실행됨으로써 리 렌더링이 진행되어, return 해주는 currentItem의 값이 변경된다. allTabs [0] -> allTabs [1]으로 바뀐다. 그래서 <div> 태그에 currentItem의 content이 바뀌게 됨으로써, 결과적으로 화면에 내용이 바뀌게 나타난다. 

 

배열 안에 객체로 데이터 받기

이용할 데이터는 다음과 같이 정의해 사용한다.

const data = [{id:1, content:'i am superman'}, {...}];

이는 영화 크롤링할 때 받은 json값도 동일한 자료구조로 되어있기 때문에 이러한 자료구조에 대해 익숙해져야 한다고 생각한다.