1. To Do List (1)
이번 섹션에서는 할 수 있는 한 최대한 많이 연습을 하고 최대한 많은 것들을 만들어 볼거야
우린 State, Effect, props를 연습하면서
우리가 지금까지 배운 모든 것들을 한 번 적용해볼거야
자, 그럼 우선 아주 매우 엄청 간단한 to-do list를 만드는 걸로 시작해보자. 알겠지?
먼저 input을 만들거야
(위와 같이 작성)
아주 간단하지?
이제 한 번 더 연습해볼텐데
input 값을 어떻게 컨트롤 할 수 있을까?
우리가 가장 먼저 해야 하는 것은 useState()를 쓰는 거야
import 도 됐고
기본값으로는 빈 String 을 해줄 거야
그럼 이제 value 를 받아와야 하니까
toDo 랑
그걸 수정하는 함수를 setToDo라고 부를게
이 포지션을 기억하는한 이름을 꼭 이렇게 만들 필요는 없다는 걸 기억해
자 그럼 여기 input에 value 로 toDo 를 주고
onChange 이벤트를 줄게
여기에 onChange 를 넣는데 onChange function 을 만들어서 줄 거야
이 함수는 event 를 받을 거고, 이렇게 setToDo 로 설정할 거야
자 그럼 이게 잘 작동하는지 확인해보자
console.log(toDo)를 하고
여기로 와서, 새로고침하고!
그럼 이제
자, 여기 보이는 것처럼 value 가 State에 나오네
좋아
자 그럼 이제 내가 원하는건 여기 있는 input들을 form에 넣는 거야
(위와 같이 작성)
그리고 이 form 안에 button을 추가로 넣을 건데, 이름을 Add To Do라고 하자
됐지?
이제 이 버튼을 클릭했을 때
form의 submit 이벤트를 발생시키도록 할 거야
여기 form을 만들어 뒀는데, 그 form 안에 button이 하나만 있다면
그 button이 클릭 됐을 때 form을 submit 하도록 만들 거야
여기서 한 번 보여줄게
Add To Do 버튼을 누르면 보이는 것 처럼 새로고침 되었지?
이건 기본적으로 설정된 것으로 작동되었기 때문이야
우리는 바닐라JS를 알고, form이 submit이라는 이벤트를 갖고 있다는 것을 알기에 이건 익숙하지
자 그럼 여기서 form이 그렇게 작동하는 것을 막아보자
(위와 같이 작성)
그리고 이걸 form에 추가할거야
onSubmit 이라고 적어줘
event listener를 추가하기 굉장히 쉽지
여기도 onSubmit 이야
그럼 여기에서 event를 받아보자
이건 그냥 기본적인 자바스크립트처럼 작동해
(위와 같이 작성)
그렇지만 더 많은 것을 해야해
일단 여기에서 console.log(toDo)를 해서 살펴보자
여기까지는 새로운걸 하진 않았어
그저 State를 만들었고
HTML에 대해 event listener를 만들었고 그에 대한 함수도 만들었어
여기까진 무서울게 없지
자 그럼 새로고침 해보자
아 새로고침 할 필요가 없어. 지금까지 내가 쭉 새로고침 해왔지만, 새로고침 할 필요가 없어
Create React App을 사용하기 때문에 새로고침할 필요가 없어
그럼 Add To Do를 클릭해보자
좋아, 완벽해
이렇게만 하면 돼
자 그럼 내가 여길 누르면 짠!
여기 보이는 것처럼 잘 작동하지
오케이?
이제 한 번 확인하는 과정을 거쳐볼거야
toDo가 비어있을 수도 있잖아. 근데 난 그렇게 되길 원하지 않거든
그래서 만약 toDO가 비어있다면
그냥 return 시킬 거야. 이렇게
이 함수를 작동하지 않도록 만들 거야
그렇지 않으면 toDo를 추가하도록 만들자
그리고 또, input을 비우기도 하고 싶어
그렇게 하려면 setToDo 함수를 다시 불러서
input을 비워주면 돼
기억해, setToDo는 toDo값을 수정하는 함수고
그리고 toDo 값은 input이랑 연결되어 있어
그래서 내가 여기 toDo의 값을 변경하면 input값도 변경되는 거야
자, 완벽해
그럼 이제 실행해보자
여기서 hello라고 치고 엔터를 누르면
완벽해
hello 치고 엔터를 쳐보니 완벽하게 작동하지
여기까지가 우리의 toDo의 첫번째 파트야
보다시피 아주 쉬워
이제 우리가 해야할 것은 여러 개의 toDo를 받을 수 있는 array를 만드는 거야
그래서 또 다른 State를 만들어 줄 건데
(위와 같이 작성)
이 기본값으로는 비어있는 array 가 되어야겠지
오케이?
그럼 이제 to-do를 추가할 때
나는 우리가 갖고 있는 이 array(toDos)를 가져가서 한가지를 더 넣고 싶어
일반적인 자바스크립트에서라면 toDos.push를 했을 거야
이건 array이니까. 맞지?
하지만 우리는 State를 직접적으로 수정할 수 없다는 걸 기억해야 해
그렇게 하지 않아. 알겠지?
내가 이렇게 작성하지 않는 이유야
나는 절대 이렇게 하지 않아
대신에 나는 함수를 사용하고 그 함수는 toDo를 수정하는 역할을 하는거지
그러니까 절대 이렇게 하지 않아
절대 State를 직접적으로 수정하지 않아
우리는 항상 수정하는 함수를 사용하는 거지
여기 보이는 것처럼 경고가 떴어
toDo가 constant이기 떄문에 이렇게 해선 안 된다고 하잖아
그래서 우린 이렇게 함수를 써
결국 요점은 우리는 State를 직접적으로 수정하지 않는 다는 거야
우린 toDo와 toDos를 직접 수정하지 않아
우린 이런 식으로 코드를 작성하지 않을 거야
절대 이렇게 하지 않아
만약 네가 toDos array를 수정하고 싶다면
수정하는 함수를 사용해야만 해. 오케이?
자 그럼 이제 console.log(toDos)를 통해 toDos array를 확인해볼게
이게 어떻게 보일지 확인해볼텐데, 여기 보이지?
비어있는 array야
완벽해
이걸 좀 지울게
됐다. 이건 비어있는 array야
이제 array에 element를 추가하는 방법을 보여주고 싶어
array를 직접적으로 수정하지 않으면서 setToDos로 array에 element를 추가하는 방법을 말야
어떻게 사용하냐면, 여기로 와서
(위와 같이 작성)
여기에 직전의 값(Previous Value)을 받아올 거야
우리에게 두가지 옵션이 있는데
하나는 값을 직접적으로 수정하는 방법이고
또 다른 방법은 여기에 함수를 넣는거지
그리고 이 함수는 첫번째 argument로 현재의 state를 받아올거야
previous state라고 불러도 되고 current state라고 불러도 돼, 알겠지?
이 경우에는 조금 더 정확하기 위해 우린 currentArray라고 부를게
그리고 이건 함수가 될건데
그나저나 이건 이렇게 하는 것과 똑같은거야
이거랑 같은 건데
이게 조금 더 길지
이렇게 currentArray를 받아오는 함수를 만들었어
그리고 이제 새로운 array를 받아올거야
여기가 매우 중요한데
이 State는 언제나 항상 새로운 거여야 해
이렇게 나는 currentArray 혹은 currentToDos를 받아왔고
새로운 array를 return해주고 싶어
그리고 나의 새로운 array는 State에 있는 toDo와
여기에 더해서
모든 이전의 toDos까지 갖게 될 거야
우선 여기서 간단히 테스트를 해보면서 확인해보자
만약 우리가 이런 array를 가지고 있다면
그리고 이 array의 element들로 새로운 array를 만들고 싶다면
난 뭘 해야할까?
어떻게 할 수 있을까?
여기에 이것들을 넣고 싶어
나는 6이라는 element에 여기 food array의 element를 추가해주고 싶어
내가 만약 이런식으로 적는다면
제대로 작동하지 않을 거야
이건 6과 그 안에 또 다른 array가 있게 되겠지
이건 내가 원하는 게 아냐
내가 원하는 건 6에 food array의 element들을 더해서 새로운 array를 만드는 거야
그래서 우선 array를 만들고
(위와 같이 작성)
이게 food의 element를 돌려주게 될 거야
만약 이렇게 작성하면
우린 6과 array를 가지게 될거야
결국 array와 그 안에 또 다른 array인 것이지
우린 이걸 원하지 않아
우린 element들을 가져오길 원하지
그래서 앞에 점점점을 찍어준 거야, 알겠지?
이렇게 여기도 점 세개를 찍어서 currentArray를 가져올게
오케이?
이제 일어나는 일을 살펴보면
어플리케이션이 시작될 때는 비어있는 array를 가지게 될거야
우리가 첫번째 to-do를 입력할 때
여기에서 우선 비어 있는 currentArray를 받아올 텐데
이건 결국 새로운 toDos 가
input을 통해 작성한 toDo와
아무것도 들어있지 않은 비어있는 array의 element가 더해진 게 된다는 거야
결국 이것만 남는 거지. 오케이?
자 이렇게 처음으로 이게 실행이 되는 거고
내 첫번째 toDo가 "Hello"라고 하자
hello라고 적었고
엔터를 눌러서 첫번째 실행이 진행되었어
그리고 byebye라고 적었지
이건 결국 여기 currentArray에는 hello가 들어가 있고
toDo는 bye bye가 될거고
그리고 여기에서 hello라는 값을 가지고 있는 array를 가져오게 되는 거야
이 경우엔 이걸 지워줘도 되겠지
이게 이 다음 실행과정이 될거야
세번째로 우리가 이걸 하게 된다면
우린 여기에 bye bye와 hello를 가진 array를 갖게 된다는 걸 의미하지
여기에는 새로운 toDo를 가지게 될 텐데, hello를 다시 써준다고 해보자
그리고 여기에서 우린 이걸 return하게 될테지
이렇게 새로운 hello에 예전 array의 element가 추가되었어
이런 식으로 이게 계속 커지게 될 거야
알겠지? 매우 간단해
모든걸 다 돌려 놓고 잘 작동하는지 한 번 확인해보자
잘 작동하는지 확인하기 위해서 console.log(toDos)를 진행해볼게
새로고침하고 모든걸 다 지우고
그리고 hello를 쳐보자
보다시피 우리가 뭔가를 계속 적어서 새로고침이 되고 있어
이제 Add To Do를 클릭하면, 짜잔!
여기 보이는게 우리 toDo야. 완벽해
그리고 이제 bye bye라고 써볼게, 짜자잔
여기 bye bye가 있는 새로운 State가 생겨났지
한 번 더 해보자
다른 걸로
another one 이라고 써볼게
그리고 클릭!
여기 another one이 추가되었네. 멋져
다음으로 가기 전에 여기에 title을 하나 추가해보자
My To Dos라고 할게
우리가 React.js를 쓰고 있기 때문에, React.js 가 진짜 엄청난 언어라
제목에 즉각적인 상호작용을 넣을 수있어
toDos 의 갯수를 나타내보는 건 어때?
toDos는 array로 구성되어 있고
우린 array에서 array 에 몇 개나 있는지 셀 수 있으니까
toDos를 가져다가
length를 보여줄거야
그렇지만 이렇게는 작동하지 않을 거야
보다시피 이건 그냥 text거든
jsx에서 자바스크립트를 넣고 싶다면
중괄호를 넣어줘야 한다는 것을 잊지마
자 이제 나의 toDos는 0개야
hello를 입력하면?
완벽해
2. To Do List (2)
보다시피 react.js로 toDo 리스트를 만드는 건 그다지 오래 걸리지 않아
기본적인 바닐라 자바스크립트로 작업하는 것보다 훨씬 더 쉽고 짧지, 오케이?
다만 너희들이 헷갈려할만한 부분이라고 생각되는게 이 부분인데
수정하는 함수를 사용할 때 두가지 옵션이 있다는 것을 꼭 기억해야해
하나는 값을 보낼 때 이런 식으로 보낼 수 있다는거야
이 값은 우리가 저장한 data를 가지고 있지
그래서 만일 setToDo가 비어있는 String 값으로 불려졌다면
그건 toDo가 비어있는 String 값이 될 거라는 거야
알겠지? 그리고 우린 또 다른 옵션이 있지
단순히 값만 보내는게 아니라
함수를 보내는 방법이야
함수를 보낼 때 react.js는 함수의 첫번째 argument로 현재 State로 보내
지금 이게 무엇인지를
그러면 우리는 이 현재 State를 계산하거나 새로운 State를 만드는데 사용할 수 있게 되지
우리가 여기서 하고 있는 건 결국 현재 toDos를 받아와서
새로운 toDo의 array로 return하고 있는거야
이 toDo는 State로부터 만들어진거고
이 toDo, 그냥 text 지. 이거에 현재 State에 들어있는 모든 요소들을 더해서
새로운 State를 계산할 수 있는거지
여기까지가 우리가 한 일이야
이제 우리가 할 것은 뭐냐면
array 로부터 동일한 component 에 있는 많은 것들을
render 할 수 있는 방법을 보여줄거야
생각해보면 여기에 array를 가지고 있잖아
여기 array 를 가진 부분에서 consolel.log()를 했었잖아
(위와 같이 작성)
array 가 이것저것 많이 가지고 있지
나는 이 각각을 component를 만들고 싶어
이걸 하기 위해 우리가 무엇을 할 수 있을지 살펴보자
한 번 해볼까?
자 우선 또 다른 중괄호를 하나 더 열거야
너도 알다시피 자바스크립트를 사용하기 위해서는 이렇게 생긴 애(중괄호)가 필요하잖아
맞지?
자 그럼 여기에 hr(horizontal rule) 을 하나 만들고
여기에서 중괄호를 연 다음에
이 array를 가져와서
여기에 map 을 사용할 거야
map은 자바스크립트 함수인데
이게 네가 멋있는, 똑똑한 react.js 개발자라면
그건 네가 진짜 쩌는 자바스크립트 개발자기 때문이라고 계속 말하는 이유야
react.js는 자바스크립트를 더 많이 쓰도록 만들거든
여기서 우리가 하고 있는 것들
예를 들어서 여기 있는 이것들은 모두 자바스크립트야
이것도 그냥 자바스크립트고
여기서 우리가 할 것도 자바스크립트야
react.js 의 것들이 아니지
돌아와서 map이 하는 것은 예전에 다른 강의에서 진행 한 것 같은데
그 강의를 아직 안들었거나 map이 뭔지 모르겠더라도 걱정마. 아주 쉬워
이런 것과 같은 array를 가지고 있을 때
가끔 array 각각의 element들을 바꾸고 싶을 거야
이 element 들을 다 바꾸고 싶고, 다 바뀐 새로운 array를 가지고 싶을 때 말야
map은 이 안에 함수를 넣을 수 있도록 해주는데
이 함수는 array의 모든 item에 대해 실행될거야
그리고 여기에서 무엇을 return하던지 간에
그 return한 값이 새로운 array에 들어가 있게 될거야
예를 들어서 우린 지금 여기에 하나, 둘, 셋, 넷, 다섯, 여섯개의 item이 있잖아
이건 결국 여기에 내가 적은 함수가 6번 실행된다는 거야
그리고 그 함수로부터 내가 return한 어떠한 값은 새로운 array에 들어가게 되는 거지
알겠지? 예를 들어서 이렇게 할 수 있잖아. 웃는 표정의 이모티콘을 return할 거야
그리고 여길 봐봐. 하나 둘
6개를 얻었어
1, 2, 3, 4, 5, 6
6개의 이모티콘을 얻었어
이게 map이 하는 역할이야
map은 하나의 array에 있는 item을 내가 원하는 무엇이든지로 바꿔주는 역할을 하고
그건 결국 새로운 array로 return 해줘
여기서 문제는 이게 좀 쓸모 없다는 거야
보다시피 기존의 item으로 접근할 수 없게 되었어
좋은 소식은 map은 함수의 첫번째 argument로 현재의 item을 가져올 수 있다는 거야
map이 6번 동작할 때
첫번째로 우리는 there을 얻을거고
두번째로는 are을 얻고
세번째로 you, 그다음 are, how, hello
이런 식으로 겠지?
이렇게 하는 방법은 여기에 item이나 원하는 어떠한 변수명을 여기에 넣고
어떤 변수명이든 상관없이 넣을 수 있어
포인트는 map의 함수의 첫번째 argument가 진행되고 있는 순서에 맞는 item이라는거야
그리고 우리가 return하는 어떤 값이던지 간에 그 값이 새로운 array에 들어가게 되는거지
그 말은 나는 item 자체를 return할 수도 있다는 거지
item.toUpperCase()라고 할 수도 있겠다
그럼 item이 모두 대문자가 되어 있는 새로운 array를 return한 것을 확인할 수 있지
이게 다야. 매우 간단하지
이게 map함수가 하는 역할이야
예전 array를 가져와서 변형하는 거야
우리가 return하는 어떤 값이던지 그 값이 새로운 array가 될거야
그리고 이 함수는 array의 각 item들을 한 번씩 동작해 거쳐갈 거야
그래서 나는 이 map을 사용해서
component를 return시키고 싶어
그래서 우리는 여기 toDos에 map을 붙여서
여기에 함수를 만들거고
다시 함수의 첫번째 argument는 각 todo를 의미하므로
여기에 toDo라고 적자
item이라고 해도 되고, string이라고 해도 되고. 원하는거 아무거나 해도 돼
나는 item이라고 부를게
그리고 난 이제 이걸 li 안에 집어 넣을게
이건 기본적인 자바스크립트의 component야
그리고 여기에서 item을 받아오자
toDos는 그냥 text로 구성된 array였잖아
맞지?
그럼 이제 이 전체를 ul안에 넣어보자
(위와 같이 작성)
됐다
여기로 넘어와서 새로고침을 하면!
그럼 이제 우리는 1, 2, 3, 오 나온다! 4..
우리 다했어!
얼마나 쉬워?
너무 쉽지 않아?
이게 다야
그리고 모든게 다 새로고침 되었기 때문에
이것들이 동작할 때마다 새로운 버전의 toDos를 기준으로 동작하게 될거야
다시 이유를 짚고 가자면 모든게 다 새로 고침 되었기 때문에!
하지만 console에 문제가 좀 있어
여기 console에서 말하는 걸 보면
같은 component의 list를 render할 때 key라는 prop을 넣어줘야 한대
이건 그냥 react가 기본적으로 list에 있는 모든 item들을 인식하기 때문이야
그게 다야
매우 쉽지
그냥 여기에 key만 넣으면 돼
근데 key는 고유의 값(unique)이어야 해
그래서 map 함수에 대한 문서를 찾아보면
첫번째 argument는 value 여야하고, 이건 각각의 toDo를 의미하지
두번째 argument는 index 래
여기서 우리가 다루는 값은
0, 1, 2, 3, 4의 숫자로 되어 있는 값이지
여기에서 index라고 할 수 있고, 이건 다시 말하지만 숫자야
그걸 여기에 넣자
자 그럼 우린 준비가 다 됐어
새로고침해서
1, 2, 3, 4를 넣어 보면~
완벽해
우리 console에도 어떠한 문제가 생기지 않지
다 했다
이렇게 우린 to-do 리스트를 만들어냈어
얼마나 쉬웠어
엄청 쉬웠지
여기에서도 우린 react.js 관련된 걸 하지도 않았어
음.. 맞아 여기에서!
여기만 react.js가 유일하네
그렇지만 여기 모든 로직들은 기본적인 자바스크립트 코드야
이렇게 우린 끝냈어!
우린 3줄부터 37줄까지의 코드로 to-do 리스트를 만들어냈어
진짜 적지. 엄청 적어
그리고 보다시피 한 곳에서만 다 작성했어
만약 이게 바닐라 자바스크립트였다면 우린 html, 자바스크립트 두 곳에서 하면서
addEventListener 등등등을 엄청 했겠지
그리고 계속 UI를 새로고침을 해줘야만 했을 거야
그렇지만 지금은 data만 바꿔주면 되고 UI는 자동으로 바뀌어
얼마나 멋져
좋았어
그럼 우리 다음 강의에서 보자
여기서 할건 다 했어
기억해 여기서 우리가 한 건 결국 array를 가져와서
그 array의 item들을 변형해서
li가 되도록 한거야
그게 다야
이 array는 단순 string으로 구성된 array이지
여기에 return하는 값이 어떤 값이던지 그 값은 새로운 array가 되지
이것들이 다 진행되고 우리는 이런식으로 계속 진행될거야
이렇게 여러 li로 구성된 array 말야
여기선 이건 0이 될거고
여기선 1
여기선 2, 여기선 3... 이런 식으로
이게 결국 최종적으로 나오게 될 모습이야
여러 li로 구성된 하나의 array
여긴 물론 text 도 들어올 수 있어
hello와 같은 것들이 말야. 이게 다야
이게 이렇게 되는거야
오케이?
자, 이게 다야! 매우 쉽지!
보다시피 아주 매우 작은 state를 가지고
우리는 component를 refresh할 새로운 array를 만들기만 하고
여기서는 toDos에 있는 각각의 item으로 li를 만들기만 하면 됐어
그걸 집어 넣기에 좋은 방법으로는
toDos에 있는 각각의 item별로 li를 만들어 넣는 거였어
toDos는 string으로 구성된 array였으니까
다음 영상.. 아니 다음 영상에서 보기 전에
이게 더 너에게 쉽고, 이렇게 하고 싶다면
이걸 console.log()를 활용하여 확인해볼 수 있어
이걸 console.log()해보면서
이해하기 어렵지 않다는 것을 확인할 수 있을 거야
(위와 같이 작성)
이걸 console.log()해보면서 뭘 얻을 수 있는지 확인해볼 수 있지
여기서 검사를 진행해보면
자 해보자
hello 를 넣어보자
엔터를 치면
우리는 react element처럼 얻을 수 있지
이거 전에 본 적 있잖아. 맞지?
시작할 때 우리 이거 봤었잖아
이렇게 react element로서의 array를 얻을 수 있을거야
여기 hello 가 나왔어
how, are, you 도 해보자
한 번 확인 해볼까
가장 마지막 걸로
이게 string으로 된 toDos이고
이건 react element인 array이지
li가 있는 곳 안에
children이 여기 들어있지. you 라고 들어가 있네
3. Coin Tracker
번 영상에서는 작은 프로젝트를 하나 해볼건데
이 프로젝트는 단순히 그냥 암호화폐들과 그 가격을 나열하게 될거야
알겠지? 이게 다야
이게 우리가 할 것들이야. 오케이?
이렇게 만들기 위해서 useEffect라는 것을 연습해볼 건데
내가 원하는 건, 페이지나 앱을 들어왔을 때 로딩 메세지가 보이고
코인들이 나열되면
로딩 메세지를 숨기고 코인들을 멋진 리스트로 보여주는 거야
쉽게 들리고, 실제로 쉽지만
우리가 지금까지 배운 많은 것들을 연습하게 될거야
State를 하나 만들면서 시작해보자
우린 두가지 State를 만들게 될 건데
하나는 로딩을 위한 거고 또 다른 건 코인 리스트를 잠시 갖고 있기 위한 거야
우선 이건 loading이라 setLoading으로 설정해두고
useState를 사용할 건데, 기본 값으로 loading은 true일거야
자 이렇게 하면 되겠지
여기에서 이렇게 적자
(위와 같이 작성)
그럼 여기에서는
만약 loading이라면
우리는 Loading... 이라는 메세지를 보여줄거고
만약 loading이 아니라면 아무것도 보여주지 않을거야
이게 코드가 동작하면 보이게 될 화면인데
The Coins! 그리고 Loading... 다 잘 나오네
이제 API를 가져오고 싶어
API는 coinpaprika라고 불리고
api.coinpaprika.com/v1/tickers에서 어어엄청 많은 코인을 넘겨주고 있어
거의 8000개 정도의 코인을 말야
그래서 component가 가장 처음으로 render되었을 때 이 함수를 즉시 실행시키고 싶어
그래서 뭘 할거냐면
useEffect를 넣어줄 거야
우리 예전에도 해봤잖아. useEffect
자, 봐봐
좋아
다시 한 번 기억해야할 것은, 우린 이 Effect를 한 번만 사용하고 싶잖아
그래서 어떤 것에도 의존하지 않고 비워둘 거야
알겠지?
우린 아무것도 주시하고 있지 않을 거야
아무것도 주시하고 있지 않으면(빈 배열이면) 이 코드는 한 번만 작동한다고 했잖아
그게 바로 우리가 원하는거지
그러니 이제 이 URL을 fetch시켜보자
됐다. 엄청 쉽지
이제 우리 콘솔을 보고 잘 작동하는지 확인해볼게
콘솔에 들어가서 네트워크에 들어가면
그리고...화면 크기를 줄여줄게
됐다, 그리고 새로고침을 하면!
우린 그럼 어딘가에서
tickers를 request했다는 것을 확인할 수 있어
여기 있지. 짠!
여기 보이는 것처럼 request가 일어났지
그리고 우리는 큰 response를 받았어
그래서 request가 일어나면 request를 받아서
우리는 200을 받았고 그렇게 우리는 response를 받았어!
엄청 많은 코인을 받았어
코인 4000개를 받았어
대박
많은 코인을 받았네
너무 멋져
이제 나는 response로 부터 이 json을 추출해내고 싶어
그래서 우리가 fetch에 추가로 해야할 것은
then을 쓰고
response를 받아서 response.json을 return해주자
그리고 then을 써서 그 json을 가지고 console.log()를 해보자
자 이 쪽으로 넘어와서
콘솔을 보면!
아 맞아 새로고침을 해서 봐야지 새로고침을 하고
콘솔을 보면 이렇게 나오네
약 4700개의 코인이 있다
엄청 큰 array지
됐다
자, 모두들 이걸 봐. 이게 우리의 data야!
이 data로 뭘 할까?
생각해보자. 우린 여기에 data를 가지고 있고
이게 그 모든 코인들이잖아
이제 뭘 하면 좋을까?
그 data를 우리의 component에서 어떻게 보여줄 수 있지?
어떻게 해야하지?
맞았어!
이 data를 State에 넣으면 되지
자 그럼 useState를 해보자
기본 값으로는 비어있는 array가 되어야 할거고
data의 이름은 coins라고 하자
그리고 setCoins 이렇게
됐다
그럼 우리가 json 즉 coins를 얻었을 때
json의 값을 setCoins 해줄 거야
아주 멋져
하지만 이와 동시에 coins 얻기를 끝냈다면 loading을 false로 바꿔줘야 해
(위와 같이 작성)
보다시피 다른 함수를 사용해서 data를 바꿀 수 있다는건 정말 멋져
하나의 함수에서는 loading의 state를 변환하고
또 다른 하나에서 coins의 state를 바꿔줬지
react.js는 모든 것을 새로고침해서
그걸 우리가 쉽게 하게끔 도와주지
좋아. 이제 이거 닫고 새로 고침을 해보면
보다시피 loading이 매우 빠르게 있다가 사라지지
이건 우리가 coins를 아주 빠르게 가져온다는 거지. API가 정말 빠르게 response해
자 그럼 이제 우리는 coins라는 변수에 코인들의 array가 담겨있다는 것을 알고 있어
이제 무얼 하면 좋을까?
우린 array를 가지고 있어
뭘할까?
맞았어
우린 map을 사용할거야
이전에 배운 것들을 연습해볼거야
그래서 우리는 ul을 만들고
중괄호를 열고
coins.map()이라고 하자
map은 함수가 필요한데, 그 함수는 첫번째 argument로 차례에 따른 값을 가지고
그 다음에는 index, 그 다음엔... 신경 안써도 돼
자 이제 값을 받아오자
우린 이걸 coin이라고 부르자, 이건 뭐라고 이름 지어도 상관 없어
그 다음은 coin의 index인데 우리는 coin의 index는 필요 없어
index가 필요 없는 이유는 여기를 살펴보면
여기 ID를 가지고 있으니 우린 이 ID를 key로 써도 돼
map을 사용하면 react.js는 element에 key를 주도록 했었던거 기억하지?
오케이?
그럼 이제 우리 여기에 li를 해주자
이제 우린 coin에 접근할 수 있게 되었으니
생각해봐야해
우리가 보여주고 싶은 건 뭘까?
자 첫번째로 나는 name을 보여주고 싶어
그럼 여기에 coin.name을 해주자
그리고 그 뒤에 symbol을 보여줄 수 있겠지
그럼 이제 괄호를 열고
여기에 coin.symbol을 해주자
그리고 자바스크립트를 쓸 때 여기에 괄호 쳐주는 것을 잊지마
만약 변수를 사용하고 싶다면 괄호를 꼭 쳐줘야 해
만약 괄호를 안쳐준다면 이건 그냥 string이야
알겠지? 좋아
자 이제 우리는 symbol도 있고, 그 다음엔 price 를 말해주고 싶어
그 price 는 quotes라는 object의 USD 야
그러니까 coins.
아 coins가 아니라 coin이다 미안
(위와 같이 작성)
그 다음에 이렇게 써주거나 아니면 .USD로 써주면 돼
.price까지
이게 USD가 될거야
자 다했어
와, 꽤 많지만 매우 쉬워
coin이라는 변수는 이 경우에서
coins array안에 있는 각각의 coin을 의미한다는 걸 기억해
그래서 각각의 coin은 이렇게 생겼을 거야
각 coin은 이런 정보를 가지고 있을거야
여기 보이는 것처럼 다들 똑같아 보이지
name을 가지고 있고
symbol을 가지고 있고
USD에 quotes를 가지고 있고
US 달러를 기준으로 한 가격도 가지고 있어
그래서 나는 coin.name을 가져오고
coin.symbol 도 가져오고
coin.quotes.USD.price를 가져왔지
여기에 있는 coin안의 quotes 안의 USD 안의 price
맞지? 좋아
이게 잘 작동하는지 확인해보자
여기로 와서 새로고침을 하면
이렇게 나오네!
세계에 있는 모든 코인들을 가져왔어. 정말 많네
미치게 많아
세고 싶어도 이게 몇 개인지 세지를 못하겠다
여기에서 우리는 coins.length를 할 수 있어
보다시피 우리가 새로고침을 하면
로딩 중이기 때문에 코인이 0개이지만
그리고 이제 다 로딩 됐어
우린 처음에 기본값으로 비어있는 array를 넘겨주기 때문에 coin이 처음에는 0개야
우리가 만약 이렇게 하면
이렇게 error를 얻게 될거야
component의 시작인 coins가 undefined이기 때문이야
그리고 undefined는 length(길이)를 가지고 있지 않지
이게 내가 기본값을 지정하려는 이유야
적어도 비어있는 array로 두어서 undefined 되지 않도록 해줘
자 그럼 쭉 가보자
이것봐 미쳤어
자 이쯤에서, 내가 코드챌린지를 줄게
이 USD를 BTC로 전환해보는건 어때
예를 들어서 멋진 input을 만들어서
내가 20달러를 가지고 있다고 적을 수 있게 하고
그 돈을 얼만큼의 BTC로 줄 수 있는지 알려주거나
혹은 얼마만큼의 이더리움인지
혹은 얼마만큼의 솔라나인지
혹은 얼마만큼의 폴카닷인지
그래서 ul이나 li를 만드는 것 대신에
우린 select를 만들어서
li가 option이 되는거지
이렇게
그래서 아마 이렇게 하면..
이거 엄청 많네.. 대박이야. 미쳤어
그래 그래 음.. 너무 많다
input을 만들어서
내가 20달러를 가지고 있다고 쓸 수 있게 하고
20달러로 0.00의 비트코인을 가질 수 있다고 말해주는 등을 만들면 정말 멋질거야
알겠지?
정말 재미있는 챌린지가 될거야
자, 이게 다야. 보다시피 useEffect는 이렇게 사용하면 돼
이건 component의 시작에서만 어떠한 것을 실행되도록 해줘
그리고 엄청 쉽지
그냥 유저와 커뮤니케이션만 하면 되는데, 그 커뮤니케이션은 여기에선 로딩인 거야
여기에 있지
그리고 우리가 coins에서 무언가 보여줄게 있다면
map을 사용하면 되지. 아주 간단하게
다 됐어. 보다시피 우린 로딩을 하고 있지
그리고 여기 body가 어떻게 생겼는지 봐봐
여기 select가 비어있는 것을 볼 수 있지?
처음에 select는 비어있어
예쁘게 보이지만은 않네
그럼, 만약 로딩하고 있다면 select를 숨길 수 있지 않을까?
그래서 우린 이걸 여기에 넣을 수 있겠지
이제 모든게 완벽해
만약 우리가 loading이라면 우린 이걸 보여줄거야
만약 loading이 아니라면 이걸 보여주는 거지
이제 완벽해 진짜
자 이제 새로고침 하면 로딩이 나오고 셀렉트가 나오네
아주 멋져
같은 걸 여기에도 적용 시켜보자
여기서는 이걸 활용해서
만약 loading이라면 아무것도 보여주지 말거나
이걸 보여줄 수도 있어
그냥 이렇게 string 그리고 이거
다 했다. 좋아
자 그럼 새로고침을 해보자
그럼 여기에는 더 이상 숫자가 없지
loading인 경우 우린 그걸 숨겼으니까!
멋져!!
오늘 분량은 다 한 거야
얼마나 멋져
좋아 완벽해
다음 시간에 만나자
해봐서 알겠지만 react.js 쓰기 매우 쉽지
한 번 useEffect를 이해하고
한 번 State를 이해하면 그게 다야!
그냥 우리가 원할 때 State를 바꾸는 방법이랑
기본적인 자바스크립트를 하고
HTML을 하는게 다야
아까 준 코드 챌린지에 도전해봐
정말 재미있을 거야
input창을 만들고
내 돈으로 얼마만큼의 비트코인을 살 수 있는지 알려줘
아주 간단한 나누기잖아
다음 강의에서 보자, 바이바이
4. Movie App (1)
이제 우리의 마지막 프로젝트를 진행할 건데
이 프로젝트는 영화를 보여주고
그 영화들에 대한 정보들도 조금 보여주고
거기에 링크를 넣어서
그 영화에 대해 더 많은 것을 찾아볼 수 있도록 앱에서 다른 곳으로 연결도 시켜줄거야
사용자는 클릭해서 선택한 영화에 대한 더 많은 정보를 볼 수 있는거지
알겠지? 그래서 우리는 앱 안에서 페이지를 전환하는 방법을 배울거야
지금까지는 하나의 상호작용이 있는 스크린은 만들 수 있었지만
어떻게 페이지를 전환하는지는 몰랐어
하지만 걱정하지마, 아주 매우 정말 쉬워
그런데 가장 첫번째로 해야할 것은 그 영화들을 다 보여주는 거야
그렇게 하기 위해서 많은 영화 정보들을 받을 수 있는 API를 가지고 왔어
여기 수천개의 영화들이 있어
하지만 여기서 나는
별점이 8.5점 이상인 영화들만 원한다고 했어
그리고 나는 연도별로 정렬하고 싶어
가장 최신영화를 먼저 보고 싶거든
알겠지? 자 그래서 이게 API이고
이 강의 상단에 있는 Github 코드에서 URL을 확인할 수 있을 거야
그리고 바로 전 강의에서 했던 것과 같은 것을 먼저 할거야
로딩 중이라는 걸 보여줄 거고
로딩이 끝났을 때 우리 영화들을 보여줄거야
자 매우 쉽지
그러니까 마지막으로 한 번 연습해보자
useState를 사용할거고, 기본값으로는 true를 가질거야. 오케이
여기는 loading과 setLoading 이 있겠지
첫 번째 item이 data이고
두 번째 item은 data를 수정할 수 있는 함수였어
이 함수를 실행하면 component가 다시 render 하는 거야
오케이?
그래서 만약 loading 이면
Loading... 을 return 하고 싶어
h1으로 크게 써주자 Loading...
loading 이 아니라면 영화들을 return 해줘야 하는데 아직 우리는 영화가 없기 때문에
null 로 해주고 여기서 멈출게
오케이. 두 번째
나는 내 component가 시작할 때만 어떠한 코드를 딱 한 번 실행시키고 싶어
그래서 useEffect를 사용할 거야
(위와 같이 작성)
그리고 어떠한 dependencies 도 가지지 않을건데
이 빈 배열은 어떤 것도 주시하거나 의존하지 않고 있다는 것을 의미하고
이건 이 코드가 한 번만 작동한다는 것을 의미해
자 그리고 여기에서 fetch를 진행할거야
이 URL을 fetch 하는 거야
좋아 완벽해
이전에 했던 것과 똑같이 진행할건데
response를 받아오고
우리는 받아온 response에서 json파일을 얻게 될거야
(위와 같이 작성)
그리고 그 json을 받아와서
확인해보기 위해 console.log()를 진행해보자
좋아. 잘 작동하는 지 확인해보자
여기로 넘어와서
우리가 아직 State를 바꿔주지 않아서 계속 Loading... 만 나오고 있지만
console.log를 했으니 여기와서 object를 봐보면
보다시피 잘 작동해서 object를 받아왔어
data 도 받았고
movie_count를 받았는데 딱히 신경 안 써도 되고
여기서 movies를 얻었네
좋아
그럼 이건 json.data.movies가 되겠다
아주 좋아, 여기서 해보자
State를 만들어서
(위와 같이 작성)
이건 기본값으로 비어있는 array로 둘 거야
그리고 fetch를 진행한 후에
movies는 ...
json.data.movies가 되어야 할거야
(위와 같이 작성)
자 그럼 우린 끝났어
그럼 이제 movies를 console.log를 통해서 잘 작동되고 있는지 확인해보자
여기로 넘어와서 보면
지금 여기 보이는 것처럼
시작할 때 movies는 비어있는 array야
data가 온 후에는
모든 영화들을 가져오지, 완벽해
자 다들, 거의 다했어
그럼 이게 발생하고 나면
우리는 로딩을 끝냈기 때문에 setLoading을 false로 만들어둬야 한다는 걸 잊지마
그러니까 여기에서 setLoading을 false로 만들어줘야 해
그럼 이제 다음으로 넘어갈 수 있겠다
만약 웹사이트에 올라가 있는 우리 강의를 순서대로 따라오고 있다면
'then' 이라는 것을 사용하지 않았을거야
보통 요즘 좀 더 보편적으로 사용하는 게 있는데
이거 대신 async-await 를 사용해
그래서 async-await를 사용하기 위해서 여기에 getMovies라는 함수를 만들거야
이건 async 함수가 될거고
useEffect를 이용해서 getMovies를 호출할 거야
그리고 then() 을 사용하는 대신에
이렇게 할거야
(위와 같이 작성)
그리고 이걸 지우고
여기에 json 을 가져와서
(위와 같이 작성)
그 후에 이렇게 할 수 있겠지
보다시피 이게 더 보기 좋아
그렇지만 누군가는 async와 await를 아직 모를 수도 있을 거야
이것들은 내가 전에 쓰지 않았던 거거든
그렇지만 이건 then() 을 썼던 것과 같은 거고
이게 조금 더 괜찮아 보일 거야
조금 더 게을러지자면
이걸 괄호로 묶어서
여기에 await을 한 번 다시 해주고
여기에서 .json을 해줄 수도 있어
그럼 이걸 지워도 되고
이걸 json이라고 불러도 되겠다
이게 좀 더 짧은 버전이야. 약간 await의 김밥 같은 거지
보다시피 이 await 를 감싸는 또 다른 await가 있는 거야. 재밌지 않아?
나도 재밌다고 생각해
됐다
자 그럼 모든게 잘 돌아가는 지 확인하기 위해서
console.log를 해서 movies를 확인해보자
여기 나오네
완벽해
다시 해보자. 새로고침
로딩을 하고 있고.. 짠!
보다시피 이게 두 번 보이는데
이건 우리가 첫 번째로 setMovies를 하고
두번째로 setLoading을 했기 때문이야
좋아 완벽해
이제 movies를 화면에 보이도록 할 건데 우린 이미 어떻게 하는지 알고 있지
리스트에 있는 것들을 어떻게 화면에 보이도록 했었지?
어떻게 할까?
정답!
map을 사용했었어
맞지?
자 그럼 한 번 해보자
여기서 진행할건데
만약 로딩 중이 아니면
여기서 movies를 보여줄거야
이미 중괄호 쳐진 곳 안에 있으니 우리가 다시 괄호를 칠 필요는 없고
그냥 바로 moives.map()이라고 해주면 돼
혹은 네가 원한다면 여기 안에 또 다른 div를 만들어줘도 돼
이런 식으로
이 div안에서 괄호를 다시 열어서 movies.map()을 해 줄수도 있어
됐다
map함수가 매우 간단했던거 기억하지?
map함수가 하는 것은 오래된 array를 가져가서
그 array의 각각의 item을 변형시키는 거였지
그리고 변형돼서 return 된 것들을 포함해서
새로운 array에 넣어줬어
마지막으로 아주 빠르게 복습해보자
여기에서 우리는 숫자를 가지고 있어
(위와 같이 작성)
여기에 map을 해서
각각의 숫자를 가져오고, 예를 들어 그 숫자에 2를 곱한 수를 return 하는 거야
이건 결국 각 숫자에 2를 곱한 수를 돌려주게 될거야
이게 다야
이렇게가 끝이야
이게 설명하기 가장 좋은 방법이야
array를 가져와서
map함수는 새로운 array를 만들어 줘
하지만 새로운 array의 item들은 이전의 array에서 내가 원하는 대로 변형된 item인 거지
보다시피 여기서 나는 그저
이 array에서 각각의 item을 가져다가 2를 곱하고
그 값을 가진 array를 돌려달라고 했지
console에 직접 돌려보면 더 쉽게 이해할 수 있을거야
여기 x는 array의 각각의 item을 의미하지
그럼 우리는 1을 가져와서
1 곱하기 2를 하고
그 다음에 2를 가져와서
2 곱하기 2를 하고
3을 가져오면
3이 여기 있으니
3 곱하기 2 를 하지
자, 이제 여기에 movie를 가져올거야
다시 말하지만 여기 argument는 마음대로 해도 돼
x도 될 수 있고 m도 될 수 있고 네가 원하는 대로 할 수 있어
하지만 대부분의 사람들은 만약 여기 이름이 movies라면
여기에는 movie라는 이름을 사용해
원하는 대로 명명할 수 있어
자 그럼 여기서 우리는 변형된 값을 return해줘야 하는데, 그 값은..
또 다른 div를 만들어서
이 div에, 알고 있겠지만 key를 넣어줘야 해. React.js는 key를 원해
이 key는 무조건 고유(unique)해야해
그래서 API의 response를 살펴보면
모든 영화는 ID를 가지고 있고 그 값은 아주 고유한 값이지
그래서 우린 movie.id라고 해줄거야
여기에는 movie.
뭘 얻을 수 있지? title 을 가질 수 있어
title. 됐다
좋아 완벽해
자 그럼 여기로 와서 새로고침을 하면
나왔어
우리가 원하던 movie 들을 갖게 됐어
완벽해. 여기 첫 20개의 영화가 나오네
로딩
그리고 짠!
아주 좋아
이상한 것도 없고, 저번에 했던 거랑 다른 것도 없어
이제 나는 조금 더 많은 것들을 보여주고 싶어. 많은 정보가 있으니까
예를 들어서 우린 summary가 있지
그래서 title을 이렇게 보여주기 보다는
title을 h2안에 넣어서 제목을 만들어줄게
이 component들은 movies array에 있는 각 movie에서 변형되어서 나온걸 기억해
그래서 이것들이 movies array에 있는 각각의 movie에 적용되게 될거야
여기에 summary를 갖고 올거야
summary는 p 태그로 들어오게 될거고
movie.summary라고 적어주자
다 됐다. 짠
좋아
완벽해. 또 무얼 할 수 있을까?
어떤 정보를 또 갖고 있는지 봐보자
장르를 가지고 있네. genres
자 이건 array야
그럼 또 다른 map을 한 번 해줘야 겠다
자 여기서 ul을 해주고
li를 해줘
genres array에 있는 각각의 genre에 대해서 map 을 해주는 거야
(위와 같이 작성)
각각의 g를 가져와서
각 g에 대해 li를 만드는 거야
보다시피 이름은 원하는 어떤 것이든 될 수 있어
하지만 여기 에러가 생기는데
알다시피 map을 쓸 때마다 우리는 key를 element에 줘야하기 때문이야
그러니까 여기에 key라고 써줄게
보다시피 ID 등 어떤 고유값이 없기 때문에
원한다면 id 대신 g를 줄 수 있어
g가 고유한 값인 한 괜찮아
여기로 넘어와서 봐보자
이건 다큐멘터리고
이건 코미디, 드라마... 완벽해!
다 잘 나오고 있지?
그냥 계속 map map map map 똑같은 거야
우린 그저 key를 꼭 줘야한다는 것만 기억하면 돼
매우 간단하지
뭘 더 보여줄 수 있을까?
summary는 했고, synopsis.. summary 랑 synopsis는 비슷한 거니까 됐고
language...는 상관없고
오 이것봐
우리 cover_image 를 갖고있네
이거 봐. small_cover_image를 봐보자
이건 너무 작네
medium_cover_image를 봐보자
완벽해. 이거 좋네
이 이미지를 가져오고 싶은걸
large_cover_image도 봐볼까
오 좋다. 오케이
medium_cover_image로 하자
이걸로 충분해
이걸 쓴다는 것은 movie.medium_cover_image를 해야한다는 걸 의미하지
이걸 여기에 넣으면
(위와 같이 작성)
여기서 우리가 한 건 결국 state로부터 받은 data를 보여준 것뿐이야
그리고 State는 그 data를 API로부터 받아와
이게 다야
계속해서 같은 걸 반복하고 있지
loading이 되었을 때 setLoading을 false로 바꿔주고
여기선 movies 가 비어있고
movies를 받아오면
API로 부터 얻은 data로 State를 변경하지
그래서 여기서 우린 movies.map을 하고
그렇게 각각의 movie에 접근해서 그 값을 변환할 수 있지
여기와서 보면
봐봐. 됐지?
진짜 멋있다
이 근사한 영화들을 좀 봐
다 했어, 완벽해
만약 평점을 조금 더 깐깐하게 두고 싶다면 이걸 8.8로 해줘도 돼
가장 좋은 것만
가장 좋은 영화들만 가져오는 거지
자 됐다
좋아
쩐다. 이것들이 최고의 영화들인 거야
됐어, 엄청 멋져
또 뭐가 있지?
우리가 state를 보여줄 수 있을..
아니야. 여기까지만 할게
이 정도면 충분할 것 같아
더 이상은 필요 없을 거야
원한다면 연도(year)정도?
그것도 괜찮겠다. 자 이제 우리는 ID를 얻을 건데
다음 영상에서 링크를 만들거라서 필요해
사람들이 여기를 클릭해서
또 다른 페이지로 가도록 하고 싶어
왜냐하면 우린 URL도 있으니까 그렇게 할 수 있거든
이 URL은 모든 영화를 나열하고 있어
이 URL은 이 ID를 가진 영화에 대한 디테일을 보여주고 있어
예를 들어 여기에서
우리가 Top Gear Africa Special을 찾고있다고 하자
이건 내가 만약 이 영화에 대한 ID를 찾으면
나는 그 영화에 대한 구체적인 정보를 더 볼 수 있다는 거야
Top gear를 검색해보면
여기 있다
영화의 ID를 가져올 수 있으니까
결국 우리는 movie_details URL에서
그 영화의 디테일을 볼 수 있고
아마 유튜브 트레일러나 다른 많은 정보를 볼 수 있을 거야
뭘 더 볼 수 있을지 잘 모르겠네
비슷해 보인다
어쨌든 나는 우리가 어떻게 페이지를 전환할 수 있는지를 알려주고 싶어
5. Movie App (2)
- https://github.com/Daniel-Jeon/for-react/commit/f4e36a798c7d21e8e97388aabf63a3ec96c3244c
이번 영상에서 우리는 React.js 앱에서 페이지를 전환하는 방법을 배워볼거야
보다시피 지금은 모든 것이 같은 스크린에서 동작하고 있잖아
어딘가로 넘어갈 수 없지
그렇지만 여기를 누르면 어딘가로 갔으면 좋겠어
알겠지? 좋아
이걸 하기 전에 우선 코드를 조금 정리하고 싶은데
여기 아주 많은 div와 url 등의 것들이 모여 있잖아
난 여기서 React.js의 장점을 좀 활용해도 된다고 생각해
그게 뭐냐면, 바로 component를 사용할 수 있다는 거야
자 그럼 우리 Movie라는 첫번째 component를 만들어보자
이게 Movie component가 될거야
Movie component는 그냥 Movie라고 불리는 함수일 뿐이었어
그리고 우리는 export default Movie를 할거야
아주 똑똑하고 아주 짧지
Movie는 기본적으로 이 모든 것들이었잖아
그래서 나는 이걸 여기서 잘라서
여기에 붙여 넣을거야
물론 몇 가지 에러가 나타날 텐데 괜찮아
이 경우에는 key가 필요하지 않기 때문에 key를 지워줄거고
여기 아직 movie가 전혀 정의되지 않았기 때문에 물결이 쳐져있는데
그래서 movie. 이라고 적힌 모든 부분을 다 지워줄거야
그래도 몇몇 에러가 있는데
medium_cover_image, title, summary, genres가 정의되지 않았기 때문이야
이건 movie가 App.js로부터 받을 예정인 정보들이기 때문이지
그러니까 props object를 열자
오랫동안 prop에 대해 다루지 않았었으니까
여기에서 medium_cover_image를 하고
완벽해
그리고 title도 넣어주고
summary도 넣어주자
그리고 이것도 넣어줄게
Movie component가 이 정보들을 parent component로부터 받아온다고 말하고 있어
이게 우리가 하고 있는 거야
Movie component는 이 properties 를 다 부모 component로부터 받아와
그게 다야
자 그럼 이제 여기로 와서 movie를 render해줄게
Movie를 import하고, 좋아
이건 여기에 import되어야 하고
(위와 같이 작성)
자 그럼 이제 마무리를 해볼텐데
우린 아직 Movie component로 어떠한 property 도 보내지 않았어
그걸 보내야 해
우리가 보내줘야 할게 뭔지 기억하고 (medium_cover_image)
(위와 같이 작성)
하지만 이건 우리가 일반적인 자바스크립트에서 하는 방법은 아니야
일반적인 자바스크립트에선 이렇게 하지
이건 우리 component니까 우리가 부르고 싶은대로 불러도 돼
coverImg라고 불러도 돼
꼭 같을 필요는 없어
이 부분은 API에 있는 것과 같아야 하는데
이건 API에서 받는 data이기 때문이야
그렇지만 이 부분은 우리가 원하는 대로 지을 수 있어
그 말은 Movie에서도 이렇게 명명하지 않아도 된다는 거야
coverImg라고 해도 돼
우리가 원하는 대로 말야
나머지 다른 이름들은 내가 생각했을 땐 괜찮아서 그대로 둘 텐데
다시 말하지만 이건 우리의 prop이므로 우리가 원하는대로 이름 지을 수 있어
오케이? 아무튼 우리는 title, summary 그리고 genres 를 원해
그래서 여기에 title을 적고
이건 movie.title이 될거야
그리고 summary는 movie.summary가 될거고
마지막으로 genres는 movie.genres가 되겠지
됐다. 짜잔, 좋아
지금 우리는 이전에 썼던 것과 같은 형태로 movie 에서 정보들을 가져오고 있는데
지금은 props으로써 우리의 component로 넘겨서
component들이 이것들을 받아서 사용하게 하고 있어
보다시피 경고 같은게 뜨는데
모든 이미지 element들은 alt 속성을 가지기 때문이야
이건 그냥 alt 를 갖는게 더 좋아서 알려주는 거야
그러니 우린 그냥 여기에 title을 넣어주자
좋아, 됐어
이렇게 보다시피 우리 앱에는 딱히 코드가 깨진 건 없을 거야
로딩하고, 이미지 받고
그리고..음.. 모든게 잘 동작하네
여기 모든게 같은 형식으로 다 나타나야 해
우리가 한 건 그저 코드 몇 줄을 옮긴거 뿐이야
우리는 여기 있던 코드를 옮겨서
여기에 뒀어. 이 코드는 이제 여기 있어
그렇지만 여전히 우리는 여기 key값을 넣어줘야 해
movie.id
매우 중요해
key는 React.js 에서만, map안에서 component들을 render할 때 사용하는 거야
이해했지?
이제 우리는 props를 보내는 작업을 했고
나는 우리가 어떤 props를 가지고 있는지 알면 좋을 거 같아
이렇게 하기 위해서
(위와 같이 작성)
자 그럼 이제 우리는 Movie component의 PropTypes 를 설정해볼 거야
(위와 같이 작성)
그리고 coverImg를 복사해오고
이 coverImg는 string의 PropTypes 를 가져야하고 이건 필수(required)야
title과 summary도 PropTypes 는 string이어야 하고
둘 다 필수여야 해
(위와 같이 작성)
그리고 이 마지막 genres 는 string 을 가진 array 여야 해
(위와 같이 작성)
그리고 이것도 필수야
자 다했다
자 이제 우리는 React Router에 대해 배울거야
React Router가 하는 것은 내가 이전에 말한 것처럼 페이지를 전환하는 거야
여기 보이는 것처럼 우린 지금 home에 있어
여기 있다
예를 들어서 movies/movie.id가 붙은 페이지로 갈 수 있었으면 좋겠어
이게 내가 원하는 거야. 아주 쉽지만 우린 어떻게 해야할지 모르지
React Router를 사용해서 해볼거야
일단 npm install react-router-dom을 할건데
여기로 넘어와서 npm install react-router-dom을 해줘
아아주 쉽지
자 이제 우리의 코드를 바꾸거나 이동시켜야하는데
이제 우리는 스크린 단위로 생각해야하기 때문이야
우리는 route별로 생각해봐야해
예를 들어서 하나의 route는 home, 홈스크린, 홈페이지 등등
스크린이나 페이지나 route나 부르고 싶은대로 불러도 되는데
우리는 Route별로 생각해봐야해
알겠지?
우리는 home route를 두고 이 곳에서 모든 영화를 보여줄거고
Movie route를 두고
그 곳에서는 영화 하나만 보여줄 예정이야
이렇게 하기 위해서 여기에 새로운 폴더를 만들건데
이 폴더를 routes라고 할게
그리고 여기에 또 다른 components라는 새 폴더를 만들어도 좋을 것 같아
자 이제 우리는 components안에 Movie를 집어넣어야 해
완벽해
됐다 뭔가 오류가 났을거라
우리가 import한 것을 components/Movie 에서 불러온다고 수정해줘야해
됐다
이제 routes안에서 Home route를 만들어 줄거야
여기에는 home이라는 함수가 있을거고
이 Home route는 기본적으로 우리의 App component 전체를 가지고 있게 될 거야
왜냐면 이제 App component는 매우매우 달라지게 될거고
바로 곧 볼 수 있을거야
App component에서 null을 return하면
페이지에서 아무것도 보지 않는다는 것을 의미하기 때문에 안 보이는게 맞고
이렇게 하는건 이제 모든 App component 코드가 Home component로 옮겨오기 때문이야
Movie를 import해오긴 할테지만, 그게 다야
우리가 import 해야하는 건 다 import해야하고
그러고 나면 준비가 다 됐어
여기서 home을 export해야 하는거 잊지말고
알겠지?
(위와 같이 작성)
다 했다
나는 그저 App.js에서 코드를 복사해서, 아니 잘라서
routes 폴더의 Home.js로 그 코드를 옮겨온 것 뿐이야
코드는 그대로 똑같아
코드에서 바뀐 점은 없고
바뀐 것은 그저 component 이름과 위치 뿐이야
그게 다야
이제 나는 새로운 route를 만들고 싶은데
이걸 route라고 불러도 되고
screen이라고 불러도 되고
page라고 불러도 되고, 원하는대로 부르면 돼
이건 Detail.js 를 가지고 있게 될거야
그러니 여기에 Detail이라는 함수를 만들어주자
그리고 이렇게 Detail을 return하고 싶어
그러고 나서 export defult Detail;을 해주면 돼
끝이야. 매우 쉽고
무서워할게 하나도 없지
우린 이전에 이렇게 한 적은 없어
이건 그냥 h1을 return하는 component를 만드는 과정이었고
여기서 우린 우리가 뭐하는 지를 알 수 있는데
기본적으로 로딩하거나 영화 리스트 전체를 보여주는 스크린 전체를 만들었어
그게 다야
조금 다른 점은 여기 App.js에 있는데
App.js는 더 이상 영화들을 보여주지 않고
대신에 App.js는 router를 render해
router는 URL을 보고있는 component고
우리가 여기 있다면
router는 우리에게 Home component를 보여주게 될거야
그리고 만약 우리가 이걸 movies/123 이런 식으로 바꾼다면
router는 우리에게 Detail component를 보여주게 될거야
이게 다야
그래서 App.js는 이제 새로운 component를 render하게 될텐데 이건 다음 영상에서 소개할게
그리고 이 새로운 component는 URL을 보고 있는거고
URL에 따라서
우리는 Home을 보여주거나 Detail을 보여주거나 할거야
