React (2)

1. Understanding State

좋아 모두들, 이번 강의에서는 React.js의 state에 대해 배워볼 거야
state는 기본적으로 데이터가 저장되는 곳이야
우리가 지금 바닐라 JS로 진행중인 예제를 완성하려면
우린 지금 counter를 증가시키고, 그걸 UI에 디스플레이하고 있잖아
그걸 state로 만들 수 있어, counter 말이야
바뀌는 데이터들 말이야
지금부터 배워볼 부분이야
어떻게 하면 React.js 어플에 값이 바뀔 데이터를 담아줄수 있을까
지난 강의에서는 React Element를 생성하는 방법에 대해 배웠지
그리고 나서 좀더 쉬운방법과 JSX에 대해 배웠지
거의 HTML과 같지만 편리한 기능들 마저 가지고있는 녀석 말이야
또 만약에 React Element를 함수 내에 담으면
원하는 만큼 사용할수 있게 된다는 것도 배웠어
예를 들어서 여기 Button이 있는데, 이건 함수지
이 함수는 지금 button React Element를 반환하고 있지
이렇게 하면 우리가 원하는 만큼 사용할수 있게돼
여기로 와서 새로고침 해주면
Button을 네번 렌더링해준걸 볼수있지
함수의 형태이기 때문이고, 이게 동일한 코드를 재사용할 수 있는 방법이야
검사 탭으로 가보면 당연히 HTML button 태그 네개가 있겠지
그리고 이것들은 각각의 이벤트리스너를 가져
완벽해
좋아, 우린 이 녀석들에 대해 잘 알고 있지
만약 이해가 안된다면, 이전 강의를 다시한번 보고 질문이나 코멘트를 남겨줘
왜냐면 이제 이것들을 지워주고 state에 대해 이야기해볼거야
그리고 나서 우리가 지금까지 배웠던것들을 한번더 복습하고
컴포넌트, 즉 이 함수들에 state를 더해볼 거야
나중에 말이야
일단 지금은 Title 함수를 지워줄 거야
대신에 여기 이렇게 적어줄 거니까
바이 바이, Title 함수
그리고 Button도 지워줄거야, 마찬가지로 바이 바이
여기 적어주자
좋아, 그럼 전부 지워주고
이제는 필요 없는 요소들을 좀 지워줄게
예를들어 이 부분, 이제 Title은 "Hello, I'm a title"로 두고
Button은 따로 배경색이 필요 없어
완벽해
그리고 onClick도 필요없어, 아직은
이제 이 텍스트를 전에 적었던 텍스트로 바꿔줄거야
"Total clicks: 0" 말이야
여기 적어줄거야
Total clicks: 0
좋아, 그리고 여기로 와서 새로고침 해주면, 다 잘되야 하고, 생긴것도 같아야 돼
물론 이제 이벤트리스너는 없어졌지만 지금 이 부분이 어떤일을 하는지 다들 알고 있겠지?
우린 React Element를 생성하고 있는데
이 React Element가 곧 div 태그이고 h3 태그와 button 태그를 담고 있지
다시 얘기하는데 만약 이 코드가 변환된걸 찾아보면 굉장히 익숙한게 눈에 들어올거야
React Element를 만들고있는 Container가 있는데
이 React Element가 또다른 두개의 React Element, h3와 button을 만들고 있지
보다시피 여기저기 createElement 하고있어
하지만 우리가 보기엔 이 편이 훨씬 편하지
이제 이 React.js 코드 내에서 카운트를 셀 수 있게 만들어 보려 하는데
항상 그렇듯이, 뭔가를 하는데에는 여러가지 방법이 있잖아?
우리의 경우에는 두 가지 방식이 있어
한 가지는 그리 좋지않은 방식이고, 다른하나는 우리가 해야할 최고의 방식이야
그래서 먼저 별로 좋지않은 방식으로 해보고
우리한테 어떤게 필요하고, 어떤걸 해야되는지 이해하고 나서
프로페셔널한 React.js 방식을 보여줄게
그러면 여러분들이 왜 그런방식으로 하는건지 이해할수 있겠지
정확히 우리가 createElement를 했던것처럼 말이야
이제 이방식이 훨씬 낫다는걸 알고, 어떤역할을 하는지도 알고있지
똑같은 과정으로 카운터를 만들어볼 거야
좋아, 그럼 최고는 아닌 방식으로 먼저 진행하면서 어떤걸 해야하는지를 이해하고
그리고 최고의 방식으로 진행하면서 코드를 하나하나 이해하는 시간을 가질거야
그럼 먼저 let counter를 만들어주고 초기값으로 0을 줘볼게
이제 내가 여러분들께 보여주고 싶은건, 이런 변수들을 JSX에 전달하는 방법이야
바닐라 JS로 진행할 때는 이렇게 했었지
span.innerText를 이용해서 span의 텍스트를 바꿔줬었어
오케이
React.js에서는 이 방식을 사용하지 않아도 돼
단지 중괄호를 열어주고 변수 이름을 담아주면 끝이야
이제 임시로 counter를 10으로 바꿔주고
여기로 와서 새로고침 해주면
봐봐, counter가 10이 됐지
보다시피, 변수를 연결하는거야, 굉장히 유용하지
그럼 일단 다시 0으로 바꿔줄게
그리고 이제 카운트를 올려주는 함수를 만들려고 해
그래서 countUp이라는 함수를 만들어 주고
counter = counter + 1 입력
완벽해
오케이
우린 이미 React.js에서 이벤트리스너를 추가하는 방법을 알고있지
여기서 이렇게 이벤트리스너를 추가해줄 필요 없이
button으로 가서, 전에 써봤던 onClick prop을 만들어주면 돼
좋아, 이제 onClick에 countUp을 담아줄게
지금 이 부분에서 뭔가 새로운걸 하고있는게 아니야
전에 해봤었지, button에 이벤트리스너 연결하는거
이 이벤트리스너가 countUp 함수를 호출하고 countUp은 카운트를 바꿔줄 거야
이제 여기로 와서 클릭해보면
보다시피, 지금 작은문제가 하나 있긴 하지만
UI가 업데이트 되지 않아서 일어나는 문제야
하지만 확실한건 이렇게 클릭할때, 카운트는 증가하고 있다는거야
그럼 카운트를 console.log 해보자
봐봐, 지금 counter가 53이지
이 말인 즉, 이벤트리스너가 동작하고 있다는 거야
그저 UI가 업데이트되질 않는거지
사실 예상했던 일이야
왜냐면 지금 우리 프로그램이 동작하는 원리를 생각해보면
우리는 컴포넌트를 단 한번만 렌더링하고 있잖아
생각해보자
우리가 어플리케이션을 시작했을때 counter는 0이지
그리고 이 녀석은 함수라서 곧바로 실행되진 않아
이것도 함수라서 바로 실행되진 않고
이 줄에 있는 코드가 바로 실행되지
우리가 페이지를 로드했을때 바로 말이야
그래서 이 코드가 실행되면 Container 컴포넌트가 렌더링될텐데
그 말인 즉, 이 코드가 React Element가 될거란 뜻이야
이게 실행될때는 counter는 0이야
우리가 Container를 렌더링하고 root에 담는데
이렇게 렌더링한 Container는 counter 값으로 0을 가져
왜냐면 이제 막 페이지가 로드됐으니까 말이야
괜찮아
그리고 우린 이벤트리스너를 등록해줬지
그리고 나서 버튼을 클릭하면 counter를 업데이트시켜
여기까지도 괜찮아
보다시피, 여기있는 코드 어디에서도 UI를 새로고침해주고 있지않아
Container를 한번 렌더링해주는게 전부지
리렌더링하고 있지않아, 그게 우리가 원하는건데 말이야
Container를 리렌더링해서 다시 보여줘야지
새로운 버전의 Container를 말이야
한마디로 우리가 countUp을 호출할 때마다
여기 이 라인을 다시 호출하고 싶은 거야
여기서 이 라인을 호출한다면 counter가 1이 증가하고
그리고 나서 Container를 리렌더링해주면
이번에 그려질때는 counter는 1이겠지
좋아, 그럼 한번 시험해보자
여기로와서 새로고침 해주면
이제 클릭할 때마다, 보다시피 잘 작동하고 있지
어떻게보면 당연하지
마법같은게 아냐
먼저, 어플리케이션이 시작될 때 Container를 렌더링하지
우리가 Container를 렌더링할때, counter는 0이야
그건 괜찮아
이벤트리스너를 더해주고
클릭하면 counter를 증가시키지
그리고 뭘 해주고있어?
Container를 리렌더링하고있지
왜냐하면 Container를 다시 렌더링해주면, 함수가 다시 호출될 거고
counter는 더 이상 0이 아니라 1이 되겠지
그래서 내 생각엔 우리가 reRender 함수를 하나 만들어주면 좋을 거 같아
그리고 이걸 여기에 담아줄거야
그리고 여기서는 render를 호출할거야
그냥 render라고 하자
그렇다는건 여기서도 render를 호출해주면 되겠지
자, 그럼 다시 처음부터 해보자
어플리케이션이 시작하면 counter는 0이야
render 함수를 실행시키고
render 함수는 Container 컴포넌트를 root에 담아줄 거야
어플이 막 시작됐을 때의 Container는 Total click을 가지고 있고 counter와 연결돼있어
counter의 초기값은 0이야
사용자의 화면에 비춰지는 녀석이지
이벤트리스너를 여기 등록해주면
버튼을 클릭할 때, countUp 함수가 호출될 거야
countUp은 counter를 증가시키고 다시 render를 호출해줄거야
render 함수가 호출되면 똑같은 과정이 반복돼
Container를 root에 담아주겠지
하지만 이번에는, 우리가 Container를 사용하면
Container 컴포넌트는 업데이트된 counter를 가지고 있을거야
오케이
다시 말해주는데 이것들은 그냥 함수야
혹시 헷갈리면, 전부 앞에 function이라고 명시해줘도 괜찮아
여기서는 이 부분만 return 해주면 끝이야
이렇게 해도 똑같아
오케이
다시 말하는데, 이건 우리의 목표를 달성하는 최고의 방법은 아니야
그렇지 않지
더 쉬운 방법이 있어
왜냐면 여길보면 우리가 값을 바꿀때마다, 다시 렌더링하는걸 잊어서는 안되거든
그렇게 좋은방법은 아니야
이걸 어떻게 개선하는지는 다음 강의에서 다뤄볼 거야
그 전에 React가 가진 위력을 좀 보여줄게
왜냐면 리액트가 얼마나 좋은지 아직 안보여준거같아
아직 HTML이 어떤식으로 변하는지 본적이 없잖아?
이게 바로 진가가 발휘되는 부분이야
만약에 예를들어 VanilaJS 예시를 열어보면
vanila.html 입력
vanila에서 우리가 요소들을 검사해보면
클릭했을때 구글 Chrome이나 Brave가 요소들이 업데이트되고 있는걸 바로바로 보여줘
여길 클릭하면 body랑 span이 업데이트되고 있는걸 보여주지
오케이
이제 React.js 파일 검사 탭을 켜고, 버튼을 클릭해보면
여기있는 h3, button, div들은 업데이트되지 않는게 보일거야
봐봐
보다시피, React.js는 UI에서 바뀐부분만 업데이트해주고 있지
엄청나게 중요한 부분이야
보다시피 React.js는 이전에 렌더링된 컴포넌트는 어떤거였는지 확인하고 있어
그리고 다음에 렌더링될 컴포넌트는 어떤지를 보고
React.js는 다른 부분만 파악하지
우리가 바꾼 부분이야
다시 Total clicks를 생성할 필요 없고
button도 다시 생성할 필요도없고
오로지 바뀐 부분만 업데이트 해주면 돼
이건 엄청나게 좋은거야
그 말인 즉, 굉장히 인터랙티브한 어플을 만들수 있다는 뜻이니까
여러분이 여러가지 요소들을 리렌더링하려고 해도, 전부다 새로 생성되진 않을거야
오로지 바뀐부분만 생성될거야
이게 얼마나 좋은건지는 이후에 보게될거야
하지만 지금은 여기까지야
다 끝났어
어떤게 필요한지 알아봤고
우리가 해야되는건 데이터가 바뀔때마다, Container를 리렌더링해주는거야
오케이
하지만 지금 이 방식은 계속해서 render해주는걸 잊으면 안되기 때문에 최고의 방법은 아니야
여러분들이 폼이나 로그인 페이지, 알림 등이 있고 이걸 계속 호출해야 된다고 생각해봐
장난 아니지
그래서 다음 강의에서는 리렌더링을 발생x시킬 가장 좋은방법이 무엇인지 알아볼거야
왜냐면 지금 필요한게 바로 그거니까
데이터를 바꾸고 다시 렌더링해주는거지
다시 설명하는데 우리가 리렌더링하면, 이 컴포넌트도 바뀐 데이터를 가지고 재생성될 거야
하지만 React.js는 정말 멋진 녀석이기 때문에
이것들은 바꾸지 않을거야
유일하게 리렌더링하는건 오로지 이 숫자뿐일거야
이게 바로 우리가 React를 이용하는 이유지
인터랙티브한걸 만들기에 최적화되어 있거든
그럼 다음 강의에서 보자구
바이 바이

2. State

좋아 모두들, 이번 강의에서는 React.js의 state에 대해 배워볼 거야
state는 기본적으로 데이터가 저장되는 곳이야
우리가 지금 바닐라 JS로 진행중인 예제를 완성하려면
우린 지금 counter를 증가시키고, 그걸 UI에 디스플레이하고 있잖아
그걸 state로 만들 수 있어, counter 말이야
바뀌는 데이터들 말이야
지금부터 배워볼 부분이야
어떻게 하면 React.js 어플에 값이 바뀔 데이터를 담아줄수 있을까
지난 강의에서는 React Element를 생성하는 방법에 대해 배웠지
그리고 나서 좀더 쉬운방법과 JSX에 대해 배웠지
거의 HTML과 같지만 편리한 기능들 마저 가지고있는 녀석 말이야
또 만약에 React Element를 함수 내에 담으면
원하는 만큼 사용할수 있게 된다는 것도 배웠어
예를 들어서 여기 Button이 있는데, 이건 함수지
이 함수는 지금 button React Element를 반환하고 있지
이렇게 하면 우리가 원하는 만큼 사용할수 있게돼
여기로 와서 새로고침 해주면
Button을 네번 렌더링해준걸 볼수있지
함수의 형태이기 때문이고, 이게 동일한 코드를 재사용할 수 있는 방법이야
검사 탭으로 가보면 당연히 HTML button 태그 네개가 있겠지
그리고 이것들은 각각의 이벤트리스너를 가져
완벽해
좋아, 우린 이 녀석들에 대해 잘 알고 있지
만약 이해가 안된다면, 이전 강의를 다시한번 보고 질문이나 코멘트를 남겨줘
왜냐면 이제 이것들을 지워주고 state에 대해 이야기해볼거야
그리고 나서 우리가 지금까지 배웠던것들을 한번더 복습하고
컴포넌트, 즉 이 함수들에 state를 더해볼 거야
나중에 말이야
일단 지금은 Title 함수를 지워줄 거야
대신에 여기 이렇게 적어줄 거니까
바이 바이, Title 함수
그리고 Button도 지워줄거야, 마찬가지로 바이 바이
여기 적어주자
좋아, 그럼 전부 지워주고
이제는 필요 없는 요소들을 좀 지워줄게
예를들어 이 부분, 이제 Title은 "Hello, I'm a title"로 두고
Button은 따로 배경색이 필요 없어
완벽해
그리고 onClick도 필요없어, 아직은
이제 이 텍스트를 전에 적었던 텍스트로 바꿔줄거야
"Total clicks: 0" 말이야
여기 적어줄거야
Total clicks: 0
좋아, 그리고 여기로 와서 새로고침 해주면, 다 잘되야 하고, 생긴것도 같아야 돼
물론 이제 이벤트리스너는 없어졌지만 지금 이 부분이 어떤일을 하는지 다들 알고 있겠지?
우린 React Element를 생성하고 있는데
이 React Element가 곧 div 태그이고 h3 태그와 button 태그를 담고 있지
다시 얘기하는데 만약 이 코드가 변환된걸 찾아보면 굉장히 익숙한게 눈에 들어올거야
React Element를 만들고있는 Container가 있는데
이 React Element가 또다른 두개의 React Element, h3와 button을 만들고 있지
보다시피 여기저기 createElement 하고있어
하지만 우리가 보기엔 이 편이 훨씬 편하지
이제 이 React.js 코드 내에서 카운트를 셀 수 있게 만들어 보려 하는데
항상 그렇듯이, 뭔가를 하는데에는 여러가지 방법이 있잖아?
우리의 경우에는 두 가지 방식이 있어
한 가지는 그리 좋지않은 방식이고, 다른하나는 우리가 해야할 최고의 방식이야
그래서 먼저 별로 좋지않은 방식으로 해보고
우리한테 어떤게 필요하고, 어떤걸 해야되는지 이해하고 나서
프로페셔널한 React.js 방식을 보여줄게
그러면 여러분들이 왜 그런방식으로 하는건지 이해할수 있겠지
정확히 우리가 createElement를 했던것처럼 말이야
이제 이방식이 훨씬 낫다는걸 알고, 어떤역할을 하는지도 알고있지
똑같은 과정으로 카운터를 만들어볼 거야
좋아, 그럼 최고는 아닌 방식으로 먼저 진행하면서 어떤걸 해야하는지를 이해하고
그리고 최고의 방식으로 진행하면서 코드를 하나하나 이해하는 시간을 가질거야
그럼 먼저 let counter를 만들어주고 초기값으로 0을 줘볼게
이제 내가 여러분들께 보여주고 싶은건, 이런 변수들을 JSX에 전달하는 방법이야
바닐라 JS로 진행할 때는 이렇게 했었지
span.innerText를 이용해서 span의 텍스트를 바꿔줬었어
오케이
React.js에서는 이 방식을 사용하지 않아도 돼
단지 중괄호를 열어주고 변수 이름을 담아주면 끝이야
이제 임시로 counter를 10으로 바꿔주고
여기로 와서 새로고침 해주면
봐봐, counter가 10이 됐지
보다시피, 변수를 연결하는거야, 굉장히 유용하지
그럼 일단 다시 0으로 바꿔줄게
그리고 이제 카운트를 올려주는 함수를 만들려고 해
그래서 countUp이라는 함수를 만들어 주고
counter = counter + 1 입력
완벽해
오케이
우린 이미 React.js에서 이벤트리스너를 추가하는 방법을 알고있지
여기서 이렇게 이벤트리스너를 추가해줄 필요 없이
button으로 가서, 전에 써봤던 onClick prop을 만들어주면 돼
좋아, 이제 onClick에 countUp을 담아줄게
지금 이 부분에서 뭔가 새로운걸 하고있는게 아니야
전에 해봤었지, button에 이벤트리스너 연결하는거
이 이벤트리스너가 countUp 함수를 호출하고 countUp은 카운트를 바꿔줄 거야
이제 여기로 와서 클릭해보면
보다시피, 지금 작은문제가 하나 있긴 하지만
UI가 업데이트 되지 않아서 일어나는 문제야
하지만 확실한건 이렇게 클릭할때, 카운트는 증가하고 있다는거야
그럼 카운트를 console.log 해보자
봐봐, 지금 counter가 53이지
이 말인 즉, 이벤트리스너가 동작하고 있다는 거야
그저 UI가 업데이트되질 않는거지
사실 예상했던 일이야
왜냐면 지금 우리 프로그램이 동작하는 원리를 생각해보면
우리는 컴포넌트를 단 한번만 렌더링하고 있잖아
생각해보자
우리가 어플리케이션을 시작했을때 counter는 0이지
그리고 이 녀석은 함수라서 곧바로 실행되진 않아
이것도 함수라서 바로 실행되진 않고
이 줄에 있는 코드가 바로 실행되지
우리가 페이지를 로드했을때 바로 말이야
그래서 이 코드가 실행되면 Container 컴포넌트가 렌더링될텐데
그 말인 즉, 이 코드가 React Element가 될거란 뜻이야
이게 실행될때는 counter는 0이야
우리가 Container를 렌더링하고 root에 담는데
이렇게 렌더링한 Container는 counter 값으로 0을 가져
왜냐면 이제 막 페이지가 로드됐으니까 말이야
괜찮아
그리고 우린 이벤트리스너를 등록해줬지
그리고 나서 버튼을 클릭하면 counter를 업데이트시켜
여기까지도 괜찮아
보다시피, 여기있는 코드 어디에서도 UI를 새로고침해주고 있지않아
Container를 한번 렌더링해주는게 전부지
리렌더링하고 있지않아, 그게 우리가 원하는건데 말이야
Container를 리렌더링해서 다시 보여줘야지
새로운 버전의 Container를 말이야
한마디로 우리가 countUp을 호출할 때마다
여기 이 라인을 다시 호출하고 싶은 거야
여기서 이 라인을 호출한다면 counter가 1이 증가하고
그리고 나서 Container를 리렌더링해주면
이번에 그려질때는 counter는 1이겠지
좋아, 그럼 한번 시험해보자
여기로와서 새로고침 해주면
이제 클릭할 때마다, 보다시피 잘 작동하고 있지
어떻게보면 당연하지
마법같은게 아냐
먼저, 어플리케이션이 시작될 때 Container를 렌더링하지
우리가 Container를 렌더링할때, counter는 0이야
그건 괜찮아
이벤트리스너를 더해주고
클릭하면 counter를 증가시키지
그리고 뭘 해주고있어?
Container를 리렌더링하고있지
왜냐하면 Container를 다시 렌더링해주면, 함수가 다시 호출될 거고
counter는 더 이상 0이 아니라 1이 되겠지
그래서 내 생각엔 우리가 reRender 함수를 하나 만들어주면 좋을 거 같아
그리고 이걸 여기에 담아줄거야
그리고 여기서는 render를 호출할거야
그냥 render라고 하자
그렇다는건 여기서도 render를 호출해주면 되겠지
자, 그럼 다시 처음부터 해보자
어플리케이션이 시작하면 counter는 0이야
render 함수를 실행시키고
render 함수는 Container 컴포넌트를 root에 담아줄 거야
어플이 막 시작됐을 때의 Container는 Total click을 가지고 있고 counter와 연결돼있어
counter의 초기값은 0이야
사용자의 화면에 비춰지는 녀석이지
이벤트리스너를 여기 등록해주면
버튼을 클릭할 때, countUp 함수가 호출될 거야
countUp은 counter를 증가시키고 다시 render를 호출해줄거야
render 함수가 호출되면 똑같은 과정이 반복돼
Container를 root에 담아주겠지
하지만 이번에는, 우리가 Container를 사용하면
Container 컴포넌트는 업데이트된 counter를 가지고 있을거야
오케이
다시 말해주는데 이것들은 그냥 함수야
혹시 헷갈리면, 전부 앞에 function이라고 명시해줘도 괜찮아
여기서는 이 부분만 return 해주면 끝이야
이렇게 해도 똑같아
오케이
다시 말하는데, 이건 우리의 목표를 달성하는 최고의 방법은 아니야
그렇지 않지
더 쉬운 방법이 있어
왜냐면 여길보면 우리가 값을 바꿀때마다, 다시 렌더링하는걸 잊어서는 안되거든
그렇게 좋은방법은 아니야
이걸 어떻게 개선하는지는 다음 강의에서 다뤄볼 거야
그 전에 React가 가진 위력을 좀 보여줄게
왜냐면 리액트가 얼마나 좋은지 아직 안보여준거같아
아직 HTML이 어떤식으로 변하는지 본적이 없잖아?
이게 바로 진가가 발휘되는 부분이야
만약에 예를들어 VanilaJS 예시를 열어보면
vanila.html 입력
vanila에서 우리가 요소들을 검사해보면
클릭했을때 구글 Chrome이나 Brave가 요소들이 업데이트되고 있는걸 바로바로 보여줘
여길 클릭하면 body랑 span이 업데이트되고 있는걸 보여주지
오케이
이제 React.js 파일 검사 탭을 켜고, 버튼을 클릭해보면
여기있는 h3, button, div들은 업데이트되지 않는게 보일거야
봐봐
보다시피, React.js는 UI에서 바뀐부분만 업데이트해주고 있지
엄청나게 중요한 부분이야
보다시피 React.js는 이전에 렌더링된 컴포넌트는 어떤거였는지 확인하고 있어
그리고 다음에 렌더링될 컴포넌트는 어떤지를 보고
React.js는 다른 부분만 파악하지
우리가 바꾼 부분이야
다시 Total clicks를 생성할 필요 없고
button도 다시 생성할 필요도없고
오로지 바뀐 부분만 업데이트 해주면 돼
이건 엄청나게 좋은거야
그 말인 즉, 굉장히 인터랙티브한 어플을 만들수 있다는 뜻이니까
여러분이 여러가지 요소들을 리렌더링하려고 해도, 전부다 새로 생성되진 않을거야
오로지 바뀐부분만 생성될거야
이게 얼마나 좋은건지는 이후에 보게될거야
하지만 지금은 여기까지야
다 끝났어
어떤게 필요한지 알아봤고
우리가 해야되는건 데이터가 바뀔때마다, Container를 리렌더링해주는거야
오케이
하지만 지금 이 방식은 계속해서 render해주는걸 잊으면 안되기 때문에 최고의 방법은 아니야
여러분들이 폼이나 로그인 페이지, 알림 등이 있고 이걸 계속 호출해야 된다고 생각해봐
장난 아니지
그래서 다음 강의에서는 리렌더링을 발생시킬 가장 좋은방법이 무엇인지 알아볼거야
왜냐면 지금 필요한게 바로 그거니까
데이터를 바꾸고 다시 렌더링해주는거지
다시 설명하는데 우리가 리렌더링하면, 이 컴포넌트도 바뀐 데이터를 가지고 재생성될 거야
하지만 React.js는 정말 멋진 녀석이기 때문에
이것들은 바꾸지 않을거야
유일하게 리렌더링하는건 오로지 이 숫자뿐일거야
이게 바로 우리가 React를 이용하는 이유지
인터랙티브한걸 만들기에 최적화되어 있거든
그럼 다음 강의에서 보자구
바이 바이

3. setState (1)

좋아 모두들, 지난 강의에서 우린 여러가지를 배웠어
첫째로 컴포넌트나 JSX에 변수를 추가하고 싶을땐
그냥 이렇게 사용하면 끝이야, 정말 간단하지
둘째로 만약 UI를 업데이트하고 싶으면
사용자에게 무언가 변화된 부분을 보여주고 싶다면
render 함수를 다시 호출하면 된다는걸 배웠지
오케이
그래서 우리는 render 라는 함수를 만들어서 어플리케이션이 처음 실행될때 호출해줬지
render가 최초로 호출될 때, 이 함수는 Container 컴포넌트를 root div에 담아줄 거야
그리고 이 함수가 최초로 호출되면 Container 함수가 호출되고
Container 함수가 호출되면 React Element가 반환될 거야
그리고 이 React 요소는 Total click과 우리가 추가해준 변수를 가지고 있지
하지만 이 함수를 처음 호출했기 때문에 counter는 0일 거야
그리고 나서 여기 이렇게 이벤트리스너를 등록해줬지
우리가 이 버튼을 클릭할 때마다 counter가 증가돼
그리고 사용자에게 바뀐 데이터를 보여주기 위해서는 render 함수를 다시 한 번 호출해줘야돼
그리고 다시 이 render 함수는 Container 컴포넌트를 root에 담아주겠지
하지만 이번에 countUp에서 render 함수를 호출할 때에는
Container 컴포넌트가 바뀐 counter 값을 가지고 업데이트될 거야
좋아, 그리고 우린 React.js가 갖고있는 굉장히 멋진 기능도 알아봤어
우리가 버튼을 클릭할 때, 물론 Container 컴포넌트 전체를 리렌더링하는 거지만
사실은 HTML 코드에서는 오로지 숫자만 바뀌는 거야
우리는 초심자니까 render 함수를 다시 호출해주면 새 Container 컴포넌트를 생성할 거라 생각하잖아
전체를 다 생성할 거라고 말이야
교체하기 앞서서 100퍼센트 다시 생성한 후 교체할 거라고 생각하겠지
하지만 React.js는 굉장히 똑똑해서 우리가 새로 렌더링하더라도
전체를 전부 재생성할 필요없이 바뀐부분만 새로 생성할수있게 도와줘
굉장히 유용하지
좋아, 하지만 또 문제가 하나 생겼어
그건 그렇고 Container를 App으로 좀 바꿔줄게
문제가 생겼는데 어떤 거냐면
데이터가 바뀔때마다 이 함수를 호출하는걸 잊어서는 안된다는 거야
별로 즐거운 작업은 아니지
리렌더링을 일으키는데 좀더 나은 방식이 있을거야
앞으로 설명하려는게 바로그거야
우리는 counter가 0인 시점에서 최초로 렌더링을 할 거야
그리고 나서 counter 값을 증가시킬때 리렌더링하려고 해
이번에 counter 값은 1, 2, 3, 4 등이 되겠지
오케이
우린 지금 리렌더링을 하려는 거잖아
즉, 한번더 렌더링하고 싶은거야
초기 컴포넌트가 초기 데이터를 가지고 렌더링되고
우리가 버튼을 클릭하면 다시 렌더링하고 싶은거야
리렌더링을 일으키는거지
하지만 이 방식은 최고의 방식은 아니야
그래서 우리가 하려는건 지금까지 진행한 부분을 전부 삭제하고
React.js 어플 내에서 데이터를 보관하고
자동으로 리렌더링을 일으킬수 있는 최고의 방법을 배워보려해
이렇게 함수를 계속 불러줄 필요 없이 말이야
좋아, 여러분들이 이번 강의를 통해 배워볼 것은
React.js가 여러분이 원하는 리렌더링을 어떻게 도와주는지 알아볼거야
그 이유는 우리가 만약 사용자에게 업데이트된걸 보여주고싶으면
새로운 정보를 가지고 컴포넌트를 리렌더링해줘야 하기 때문이야
오케이
그래서 이번 강의에서 우리가 하려는건, 전에 시작했던 부분으로 돌아가서
리렌더링을 유발시키기 위해서 React.js 가진 기능을 배워볼거야
오케이
지금은 임시로 이 값이 0이라고 해볼게
그리고 여기 이 함수를 지워줄 거야
좋아, 다시 아무것도 없던 때로 돌아가보자구
자, 이제 여기로 와보면 이벤트리스너가 사라져서 아무것도 바뀌지 않아
굉장히 노잼 컴포넌트가 돼버렸지
이제 여러분에게 React 어플리케이션을 다룰때, 어디에 데이터를 담으면 되는지 알려주고 싶어
왜냐면 그 전에는 counter 같은 변수에 담았었잖아
이렇게 하면 안된다는건 아니야
하지만 React.js는 여러분들을 도와줄 기능들을 가지고 있지
만약 그런 기능들을 사용하고 싶으면 React.js가 제시하는 룰을 따라야겠지
그래서 우리가 하려는건, 일단 여기로 와서
data라는 녀석을 하나 만들어주고
함수 내에서 return문 전에 상수를 하나 만들어 주는 거야
그리고 React.useState()를 사용할 거야
끝이야
지금은 생긴 게 좀 이상하지, 나도 알아
일단 지금은 data를 console.log해보고 뭐가 보이는지 볼거야
새로고침해주면 아직 변한건 없지
근데 여기 console.log한게 보이는데, Array를 하나 받았지
봐봐, undefined 값과 함수를 지닌 배열을 받았어
흥미롭지
지금 무슨일이 일어나고 있냐면
React.js가 이 라인의 코드를 가지고
우리가 이전 강의에서 했던 많은것들을 제공해주고있어
그래서 이 라인의 코드를 통해 우리가 얻게 되는 건
보다시피 undefined와 함수 하나야
여러분들이 알아야 되는건 이 녀석이 바로 data고
여기 이 함수는 data를 바꿀때 사용하는 함수인거야
React.useState() 함수는 초기값을 설정할 수도 있어
초기값으로 0을 줘볼게
이제 새로고침하면 어떻게 변하는 지 봐보자
이제 여기보면
초기값인 0과 이 data의 값을 바꿀수있는 함수가 들어있는 배열을 얻었어
여기 이 두 요소가 만나서 우리가 전에 만들었던 함수의 역할을 대신하고 있어
바로 countUp 함수야
data 값을 바꿔주는 녀석이었고
data였던 counter 역시 0이었지
코드가 이 안에 이렇게 있었고
이 부분을 보고 겁먹을 필요 없어
이게 어떤역할을 하는지만 생각하면 돼
우리한테 counter라는 data를 주고, 그 counter 값을 바꿀수있는 함수를 주고있지
이게 다야
이 라인의 코드가 여기 이 부분이랑 똑같은 역할을 해
배열의 첫 번째 값은 초기값이고
두 번째 요소는 그 값을 바꾸는 함수야
멋지지 않아?
하지만 배열상태 그대로 사용하는건 보기 불편하잖아
왜냐면 내가 만약 h3에서 첫번째 요소를 사용하려고 한다면
그러면 data[0] 같은 방식으로 접근해야겠지
이렇게 해도 상관은 없어
보다시피, 잘 작동하지
default 값을 이렇게 주면
여길 이렇게 해주자
default 값을 이렇게 바꿔주면 보다시피 잘 작동하지
연결됐고 잘 작동하지만 보기좋지는 않아
그래서 JavaScript가 가진 정말멋진 문법이 있는데 아주짧은 코드야, 그걸 배워보려해
어떻게 하면 배열에서 요소들을 꺼내서 이름을 부여할 수 있을까?
오케이
food라는 녀석을 만드는데 tomato랑 potato가 들어있다고 가정해볼게
여기서 만약 내가 food 외부에서 tomato라는 값을 받으려면 food[0]를 사용하면 되잖아
근데 만약 이걸 사용하고 싶으면 이렇게 tomate같은 변수에 담아줘야 돼
potato도 똑같은 과정이 필요해
food[1]을 통해 접근해야 하지
이렇게 해도 괜찮아
여러분들이 원한다면 이 방식으로 진행해도 돼
여거로 와서 상수 counter에 data[0]를 할당해주자
그리고 modifier를 만들어 줄 건데
말 그대로 값을 modify해줄 녀석이라 이렇게 이름붙이는거야
이 녀석은 data[1]이 되겠지
이건...
으으으으...
구려(질색)
여기 이렇게 counter를 써주면 되겠지만
근데, 다시 말하지만
우린 게으르잖아
동의?
더 나은 방식이 이미 존재하고 있어
그래서 지금 이 방식 대신에 우리가 하려는 건
아주 짧은 코드를 이용해서 배열의 첫 번째, 두 번째 요소를 꺼내보려고 해
이렇게 빈 배열을 먼저 열어주고
[] = food 입력
자, 이제 여기에 배열의 첫번째 요소에 이름을 할당해 줄건데
myFavFood라 붙여줄게
그리고 여기 배열의 두 번째 요소한테는 potato나 여러분들이 원하는 아무 이름이나 붙여주면 돼
아니면 mySecondFavFood도 괜찮구
끝
이제 myFavFood는 tomato가 될거고
mySecondFavFood는 potato가 될거야
훨씬 손쉬운 방법이지
이렇게 하는건 const myFavFood = food[0] 이렇게 하는거랑 똑같아
근데 우린 이렇게 하고싶지 않단 말이지
그래서 여기에 방금 이 방식을 적용해줄 거야
첫 번째 아이템은 counter가 될거고
이 이름은 변경가능해
정해진건 없어
아무 이름이나 괜찮아
두번째 녀석은 modifier야
말했지만 마찬가지로 어떤 이름이든 괜찮아
이제 새로고침해주면 문제없이 잘 작동할 거야
좋아, 한번더 복습해보자
배열이 하나 있고
저 안에 있는 요소를 꺼내려면 이런식으로 할수 있겠지?
B는 이렇게 하면 될거고
오케이
이것도 괜찮아
근데 시간이 좀 오래 걸리지
하지만 배열을 만들고 나서 이렇게도 할수있어
우리가 하려는 건, 여기다가 첫 번째 요소를 꺼내서 a라는 변수 안에 담아줄 거야
남은 녀석들 b, c도 이렇게 해주면돼
이제 a, b, c 이렇게 해주면, 보다시피 잘 작동하지
이게 state의 첫 번째 부분이야
이제 우리가 배워볼건 어떻게 modifier를 이용해서 counter의 값을 바꿔줄지
그리고 왜 modifier가 필요한지 배워볼거야
왜냐면 여러분 무슨생각하는지 알거든
왜냐면 그냥 counter에다가 직접 이렇게 하면 되잖아
그래서 왜 이렇게 하면 안되고 modifier가 필요한지 배워볼거야
그럼 다음 강의에서 보자구
바이 바이

4. setState (2)

좋아 모두들, 지난 강의에서는
React.js가 data를 담는것과 업데이트하는걸 어떻게 도와주는지 배워봤어
우리가 배운건 useState를 사용했을때
useState는 우리한테 배열 하나를 주는데
그 배열의 첫번째 요소는 우리가 담으려는 data 값이고
두번째 요소는 이 data 값을 바꿀때 사용할 modifier야
이제 왜 modifier가 필요한지 배워볼 거야
그럼 이제 onClick이라는 함수를 하나 만들어줄건데
onClick은 우리가 전에 했던거랑 똑같은 역할을 할거야
이 부분에서 한거랑 똑같이 말이야
counter에 counter + 1을 할당해주는거지
어떻게 동작하는지 보려는데
지금 counter가 상수로 되어있으니까 잠시 let으로 바꿔주자
이제 여기로 와서 counter = counter + 1을 적어주면 돼
console.log(counter) 해서 현재 값을 알아보자
여기로 와서 새로고침 해주고
클릭해주면? 작동하지 않지, 왜냐면 아직 이벤트 등록을 안해줬거든
(위와 같이 입력)
자, 이제 클릭하면 보다시피 잘 작동하지
counter가 올라가고 있어
보다시피 data를 바꿀 수 있지
근데 이걸 이제 리렌더링해줘야돼
전에도 똑같은 상황이 일어났잖아?
값을 바꿨는데 컴포넌트는 리렌더링되지 않는 상황 말이야
이런일 있었잖아, 그때 어떻게 했지?
그때는 이 함수를 한번더 호출해서 해결했지
근데 말했다시피 여기 저기서 이 함수를 호출하는건 상당히 귀찮지
예를들어 파일이 많거나 폼, 로그인, 알림, 비디오 플레이어 등등을 다룰때
이 함수를 계속 호출해야 되는건 너무 힘들잖아
왜냐면 그 말인 즉, 모든 곳에서
getElementByID하고, React DOM을 import하고, 최상위 컴포넌트를 import하고
좋지 않아
아무튼 여기서 문제는 동일해
리렌더링을 일으켜야 한다는 거야
여기 이 컴포넌트를 한번더 렌더링해줘야 하는거지
하지만 이번에는 새로운 값을 가지고 렌더링해주고 싶어
말했지만 이미 겪었던 부분이야, 지난 강의로 가서 한번 봐봐
만약 전에 했던게 기억이 안나면, 한번 이전 강의를 봐봐
그리고 말했다시피 React.js가 우릴 도와줄 거야
modifier 함수가 존재하는 이유가 바로 이거지
일단 여기 부분을 다시 const로 바꿔주고
counter를 업데이트하는데 modifier 함수를 쓰려고해
modifier 함수는 값을 하나 받아
어떤 값을 부여하던 modifier 함수는 그 값으로 업데이트하고 리렌더링을 일으킬 거야
우리가 전전 강의에서 다뤘던 부분이지
전전 강의에서는 우리가 직접 리렌더링 해줬지
값을 직접 바꿔주고 리렌더링도 직접 해줬어
지금 우린 modifier 함수를 가지고 있고, 이걸로 값을 바꿔줄 거야
이 modifier 함수 안에서 counter = 987987987987 을 하고
리렌더링을 일으켜줄 거야
이 모든게 modifier 함수 내에서 일어날거야
이게 우리가 useState 함수의 값을 console.log 했을때
값과 그 값을 바꿔줄 함수가 반환됐던 이유야
내가 말한대로 되는지 확인해보자
여기로 와서 새로고침해주고 클릭하면
보다시피, 업데이트됐지
전에 업데이트했던 방식과 동일하게 말이야
하지만 여러분들도 봤다시피, 리렌더링이 자동으로 이루어졌지
React.js가 여러분들을 도와줄거라 했지?
반복하는데, 전전 강의에서는 우리가 직접 리렌더링해줬어
우리가 직접 이것들을 호출해줬지
이제는 그럴 필요가 없어
이젠 단순히 이 한줄 코드로
React.useState 함수는 counter 같은 데이터를 숫자형 데이터로 건네줄거고
그 데이터 값을 바꿀 함수도 함께 줄거야
그리고 그 함수를 이용해서 데이터를 바꿨을때, 데이터 값이 바뀌고
컴포넌트도 동시에 리렌더링될 거야
업데이트가 완료되는 거지
굉장히 멋진 기능이야
그래서 보통 사람들이 하는 방식은, 데이터를 이름 붙일때 counter처럼 원하는대로 붙이고
modifier는 modifier가 아니라, set 뒤에 데이터이름을 붙여주는거야
이 경우에는 setCounter가 되겠지
이제 여기도 setCounter로 고쳐주고
이렇게 하는 대신, counter 값을 가지고 와서 1을 더해줄게
오케이
이 부분을 정리하자면
우리는 counter라는 데이터를 받아서
return()에 그 데이터를 담고 있지
그 말인 즉, 이게 사용자가 보게될 컴포넌트라는 거야
그리고 버튼이 클릭되면, counter 값을 바꿔줄 함수를 호출할건데
counter의 새로운 값을 가지고 해당 함수를 호출해줄거야
그 새로운 값은 현재 counter값 + 1이 될거고 말이지
좋아, 그럼 여기로 와서 새로고침 해주고
클릭해주면 보다시피, 굉장히 잘 작동하지
그리고 물론 React.js는 오로지 바뀐 부분만을 업데이트해주고있어
React가 가진 마법이지
React는 업데이트 사이사이마다, 정확히 어떤것이 업데이트됐는지 파악해서
HTML에서 그 부분만 고치는거야
다음 강의에서는 지금 우리 코드가 진행되는 과정을 복습해볼거야
여러분들이 이번 강의도 둘러보고 이 코드를 복습한다음, 전전 강의를 봤으면 좋겠어
결론적으로 결과는 같아
변수를 컴포넌트에 연결해서
변수에 데이터를 담은 다음, 해당 변수에 담긴값을 바꾸는거지
하지만 지금 우리는 React 기능을 알고 그 도움을 받고 있어서, 전보다 훨씬 쉬워졌지
예전에 우리가 적은 코드랑 지금 이 코드를 비교해봐
지금이 훨씬 쉬워졌다는걸 알수 있을거야
그럼 다음 복습 강의에서 보자구
정식 방법으로 React.js를 통해 전에 했던걸 다시해봤어
단순히 여기 이 함수 하나와 한줄의 코드로
이거랑 이거, 이벤트리스너 추가하는 거랑 handleClick을 완전히 대체했지
완벽하게 대체했어
여러분들도 나처럼 이게 훨씬 편하다고 느꼈다면 좋겠어
그럼 다음 강의에서 보자구
바이 바이

5.State Function

케이, 에블바디.
이제 우린 state에 대해 배웠어. 이걸 계속 연습할거야.
그리고 사용자들의 input을 어떻게 얻는지, form 을 만들었을때 state는 어떤식으로 작용하는지에 대해 배울거야.
왜냐하면 이제껏 배운것들로 작은 프로젝트들을 처리하는 연습을 할거니까,
자, 그런걸 하기전에, 먼저 앱의 state를 바꾸는 법에 대해서 배울거야.
우리가 알다시피,
counter의 현재 값을 갖고있어.
그리고 counter 를 수정하기 위한 함수도 불러오고 있지.
알다시피 여기 onClick 함수에서 counter +1로 수정해주고 있어.
즉, 여기 counter라고 설정한 현재 state 를 이용해서,
다음 state를 위한 계산을 해주고 있는거야.
봐봐... 만약 우리가 coutner = 1로 설정했다 치자.
그럼 이 부분은 2 가 될거고,
결과적으로 setCounter에는 2가 들어갈거야.
그럼 counter는 2가 되는거지. 맞지?
자 다시 한번 정리하면,
우린 여기서 현재 counter state를 이용해서
새로운 counter state를 계산해내고 있어.
좋아, 우리가 하는건 별로 좋은 방법은 아냐.
왜냐하면 counter는 다른 곳에서 update 될 수 있거든.
알겠지? 어쩌면 counter가(다른 곳에서 변경되어서) 우리가 생각했던 값이 아닐수 있다구.
그런데 이런 버그를 지금은 설명하긴 어려워.
하지만 이런 일이 여러분에게 생길수도 있는거야.
이전 단계의 state를 이용해서 현재 state를 바꾸려했지만, 결과가 예상과 다르게 나오는거지.
자 이 부분은 명심해야해.
이런 현상들은 흔치 않고 자주 쓰이진 않겠지만, state를 바꾸는 2가지 방법들이 있어.
하나는... setCounter를 이용해서 우리가 원하는 값을 넣어주는 거야.
이게 첫 번째 방법이야.
내가 여길 누르면, 뿜, 내가 넣은 값으로 변경됐어.
하지만 다시 클릭하면, 변하진 않지.
좋아, 이게 state를 설정하는 하나의 방법이야.
setCounter를 설정해서 새 값으로 변경해주는 것.
문자로 바꿔줄수도 있어.
0으로 시작했지만 문자("lalalal")가 뜨지.
알겠지?
또 하나는 이전 값을 이용해서 현재 값을 계산해 내는 건데,
바로 지금 우리가 여기서 하고 있는 게 이 방법이야.
하지만 이것보다 더 나은 방법이 있어.
알겠지?
만약 여러분이 이전 값을 바탕으로 현재 값을 설정하고 싶다면,
이 부분을 좀 다르게 해줄 수 있어.
좋아, 왜냐하면 우린 여기서 현재의 counter값을 가지고 계산해주고 있어.
오케이?
만약 여러분이 현재 값을 가지고 계산을 해야한다면,
이렇게 하지말고
setCounter를 쓰긴 할건데, setCounter에는 함수를 넣을수도 있어
이 함수의 첫 번째 argument는 현재 값이야.
그리고 이 함수의 return값이 새로운 state가 되는거지.
좋아, 이 경우엔 current+1 이라고 해줄게.
좋아.
자, 이제 이 함수가 뭘 return하던지
그게 새로운 state가 돼.
사실 이 두 줄은 똑같은 작업을 하는거야
둘 다 현재의 state을 가지고 새로운 값을 계산해내지. 하지만 아래쪽이 더 안전해.
왜냐하면 여러분이 이런식으로 함수를 사용했을때
리액트가 이 current가 확실히 현재 값이라는걸 보장하고있어
우리가 정확히 원하는 값으로 계산할 수 있도록.
좋아, 이것들은 알아뒀으면 해.
이렇게 수정해준 상태로 둘게. 이 쪽이 더 바른 방법이니까.
여러분이 현재 state를 기반으로 계산을하고 싶다면, 함수를 이용하는 거야.
그래서 다음 state의 값이 현재 값을 바탕으로 나올수 있도록. 알겠지?
다시 한 번 정리할게.
만약 여러분이 현재 state를 바탕으로 다음 state를 계산해내고 싶다면,
이렇게 함수를 사용해야되
이게 여러분에게 현재 state인 현재 counter 값을 줄거고,
예상치 못한 업데이트가 어디선가 일어났다고 해도, 그게 혼동을 주는걸 방지해줄거야.
좋아, 이게 다야.
state를 세팅해주는 데에는 2가지 방법이 있다
1. 이렇게 직접 값을 설정해주는 것.
예를 들면 이렇게 원하는 숫자 입력해주기.
2. 함수를 전달하기.
알겠지? 이 함수가 언제나 현재 state를 얻도록 해줄거야.
여러분이 다음 state값을 얻도록 말이지.
별로 어려운 건 없었어.
만약 여러분이 지금은 이게 별로 중요하지 않다고 느끼더라도,
맞아, 동의해.
여기선 이게 그닥 유용하지 않지. 하지만 언젠가 이걸 기억해두면 좋은 순간이 올거야.
좋아.
그럼 다음 강의에서 보자. 다음 강의에선 2가지를 만들거야.
unit의 converter (단위 변환기)을 만들거고,
알겠지?
unit converter이란,
예를 들면 여러분이 분 단위(minute)를 넣으면 그걸 시간 단위(hour)로 값을 출력해 주는 거야.
알겠지? 굉장히 많은걸 변환해줄거야.
좋아, state를 연습할 수 있는 좋은 시간이 될 것 같아.
그러니까...예를 들어, 55 km를 입력하면 이게 몇 mile인지 얻어내는 거지.
알겠지? 이런 식이야.
아니면...또 예를 들어,
1시간을 넣으면 이게 몇 초인지를 알려준다던가.
좋아, 이런걸 어떻게 하는지 배우게 될거야.
또 money converter도 배우게 될거야.
예를 들어 10달러를 입력하면 이게 원화로 얼마인지를 알려주는 거지.
좋아.
그럼 다음 강의에서 보자.
안녕~

6. Input and state

오케이, 에블바디.
이번 강의에서는 unit conversion (단위 변환) 앱을 만들어볼거야.
분에서 시간으로, 반대로 시간에서 분으로
킬로미터에서 마일로, 킬로그램에서 파운드로. 알겠지?
좋아, 먼저 다 지우고 시작하자. 버튼도 지워 주고. 안녕~
이건 h1 으로 바꿔줄게.
이건 Super Converter라고 하자.
super converter... 좋아. 이제 시작해보자.
여러분이 변환하고 싶은 단위들이 있겠지만,
그 전에 일단은, 먼저 분을 시간 단위로 바꾸는 것부터 시작해보자.
알겠지?
좋아, 그럼 input 2개를 일단 만들어주자.
하나는 먼저... placeholder="Minutes"
Minutes 적어주고...
좋아, 다른 하나는 시간용이야.
Hours
좋아, 이게 다야.
Minutes라고 되어있는 placeholder 부분에 분을 쓰면, 시 단위가 갱신될거고,
Hours라고 되어있는 placeholder 부분에 시간을 쓰면, 분 단위가 갱신될거야
알겠지? 이게 다야.
아주, 아주 쉽지.
type은 number로 지정해줄게.
좋아.
이제 Chrome 을 열고..
이게 그 결과야. 완벽해.
완~벽해.
좋아, 이제 JSX 에 대해 새로운 걸 알려줄게.
우리가 알다시피 JSX는 HTML과 매우 유사하지.
이건 그냥 평범하게 HTML로 쓸 수도 있어.
보다시피, 이것들 전부 HTML로 써도 전혀 문제 없단 말이야.
예를 들어, label 태그를 예로 들어보자.
label은 알다시피 input 옆에 써주는 글씨야.
만약 누가 이 글씨를 누르면 그 옆 input이 선택되지.
여기에 Minutes 라고 한 번 써볼게.
label, 닫아줘야지
좋아, 이번엔 Hours도 똑같이 처리해줄게.
label 을 input 에 연결해주기 위해서
input은 id 가 있어야해.
이건 minutes고
이건 hours로 하자
좋아, 이제 label을 input에 연결시기키 위해
HTML은 for 속성을 이용해. 이렇게.
input 의 id 와 같게 설정해줄게.
hours도 마찬가지로 해주자
좋아, 다 됐어.
이제 브라우저에 가서 확인해보면 잘 작동하는 걸 볼 수 있을 거야.
여기 minutes에 와서 보면.. 보다시피 잘 작동하고 있어.
완벽해. 잘 작동하고 있어.
자,
근데 지금 우리가 하고 있는 거 있잖아.
이거 사실 틀렸어.
React JS의 세계에서는 말이지.
JSX에서는 다르게 표현해줘야 해.
기억해, 우린 지금 HTML을 사용하는 게 아니야.
우린 JSX를 사용하고 있지. 좀 달라.
하지만 보다시피 에러가 뜨진 않지. 왜냐하면 production.min.js를 사용중이거든.
만약 우리가 이걸 development로 바꿔준다면...
잠깐만...
좋아, 여러분은 굳이 안바꿔도 돼.
걱정 말라구.
이제 새로고침을 해보면, 보다시피 유효하지 않은 DOM property 'for' 이 있다고 하지?
"너 혹시 'htmlFor'을 의미하는 거니?" 라고 묻고 있네.
왜 우리가 for같은 몇가지 용어들을 사용을 할 수 없냐면...
일단 for는 JavaScript 용어이기 때문이야.
for 은 JavaScript 용어라구.
마치 class가 JavaScript 용어이기도 한 것처럼.
이미 선점된 단어야
알겠어?
예를들어, 우리가 여기 class를 hi라고 지정해준다 치자. 그래도 똑같은 에러가 날거야.
보다시피 2가지 문제가 있어.
문제1. class 를 사용한 것. 우린 class 를 사용하면 안돼.
문제2. for 을 사용한 것. for 도 사용하면 안돼.
지금은 큰 문제 없지만 나중에 분명 에러가 생길거야.
좋아, 그럼 이제 우리가 알아야 하는 건,
맞아, 우린 jsx를 쓰고 있고,
맞아, 그리고 jsx는 HTML과 비슷하지만 다른 점 몇 가지 기억할 게 있단 거야.
예를들면, class를 사용하면 안된다는 거.
className이라고 써줘야 해.
for도 쓰면 안돼.
htmlFor이라고 써줘야 해.
자, 이제 새로고침을 하면 별 문제 없이 돌아갈거야.
이상 무.
console에 에러 잡히는 것도 없고.
그리고 모든 게 정상적인 HTML로 변환되고 있어.
class를 class라 부를 수 있고, for를 for라고 부를 수 있는 HMTL로.
이젠 console에 경고문 뜨지 않지
좋아.
이걸 우린 알아둬야 해.
이제,
이제부터 중요한 거야. miniutes에 필요한 state를 만들거거든.
react code로 miniutes에 어떤 숫자를 적었는지 추척할 수 있어.
자, 그런데 보다시피 문제가 있어. 이 적힌 숫자의 value가 뭔지 모른다는 거지.
좋아.
아직 React JS로 하는 법은 배우지 않았어.
좋아, React JS 세계에서는,
이 input은 uncontrolled이라고 알려져있어.
그 말인 즉, 여기 input의 value는 우리가 통제할 수 없단 거지.
알겠지?
그래서 이제 state를 만들어 줄거야.
useState라고 써주고...
State.
React.useState
그리고 default 값을 적어줄 건데,
default 값은 없어.
그냥 비워둘 수 도 있고,
숫자 0을 적어도 돼.
그냥 빈 " " 만 찍어줘도 되고.
여러분이 원하는 걸 적어주면 돼. 이번엔 그냥 아무것도 안 적어줄게.
기억해. useState는 array를 제공해. 그리고 그 첫 번째 element가 현재의 값이 되지
minutes라고 하자
두 번째 element엔 minutes를 수정해주는 modifier 함수가 들어가.
setMinutes 라고 적어줄게.
그리고 이제 value를 input에게 줄 수 있어.
value는 minutes
괜찮지? 이게 끝이야.
자 이제 minute의 값을 넣어주는 input이 있고,
그리고 그 값은 minutes가 될거야. 그리고 minutes은 state에 있지.
좋아, 이제 내가 하고 싶은 건... 사용자가 다른 값을 입력할 때마다 이 value를 업뎃시키는거야.
여기 value를 업데이트 하고 싶어.
사용자가 Input에 새로운 값을 입력할 때마다 이 state를 업데이트 하고싶어.
우리가 찾고있는 그 이벤트는 바로 "change"야
onChange를 써주고..
여기에서 value를 얻게될거야.
onChange라는 함수도 만들도록 하자.
좋아, 여기다 넣어주고..
뿜.
괜찮지?
좋아 이제 console.log로
(위와 같이 작성)
자, 여기서 우린 react에서 가져온 state를 사용하고 있어.
여기서 우린 데이터도 얻고, 업데이트도 진행하고 있지
array의 첫 번째 item은 value야.
두 번째는 value를 수정하고, component를 새로고침 할 때 쓰는 함수야.
여기 state로써 minutes라는 값을 가지고 있는데,
우리가 할 건 여기 있는 값을 input의 value로 넣어주는 거야.
그럼 input의 value는 state의 value와 같아지는 셈이지.
좋아, 이제 input에 변화가 생길때마다 그 변화를 리스닝 하고싶어
여기서 변화란, 사용자가 input에 뭔가를 입력하는 걸 말해.
좋아, 이제 onChange라는 event를 리스닝할거야.
전에 버튼에서 onClick을 리스닝한것처럼
이제 우린 onChange를 리스닝하고있어.
이제 input에 변화가 생기면, onChange 함수를 실행해줄거야.
이 함수인데 그냥 console.log을 실행시켜주는 거지.
그게 다여.
자 이제 inspect 해줄게.
console
됐다.
이제 뭔가를 써볼게...보다시피 "sombody wrote" 이라고 뜨네. 완벽해.
이제, 난 이 input의 입력값을 알고 싶어.
왜냐하면 우린 입력값이 필요하잖아.
시간 단위로 변환하려면 이 입력값이 필요하다고.
우린 이게 필요해.
알겠지?
하나 좋은 소식은,
이건 JavaScript란 말야?
React JS의 아주 멋진 점 중 하나는
거의 일반적인 JavaScript랑 같다는 거야.
여기 event, 이거 우리 바닐라 JS 할 때 하곤 했잖아?
그니까 여기서도 event 해줄거야.
이제 console.log(event)해주면 되는겨.
여기 event 처리 해주고.
알겠지?
이제 적어주면, 보다시피 Synthetic Event(합성 이벤트) 라는게 떠.
이런 게 왜 뜨냐하면... React JS가 뭐랄까...가짜 event 를 발생시켜.
왜냐하면 얘네는 event를 최적화 시키거든.
하지만 여러분이 원래의 event(native event)를 얻고 싶다면, 여기 있어.
알겠지? 이게 native JavaScript event야.
걱정하지 마.
요지는 우리가 event에 접근할 수 있단 거니까.
좀 어렵게 느껴지는건 저 synthetic(합성)이라는 말이 붙어서야. 근데 별거 아냐.
중요한 건...여기 보여? 우리가 target을 가지고 있단 거야.
그리고 target 안에는...뭐가 엄청 많지.
target이란 방금 바뀐 input을 말해.
자, 스크롤바를 쭉쭉 내리면..
드디어 value에 도달하지
그게 다야.
알겠지?
우리가 해야하는 건 어떤 변화가 일어났나 쫓아가는 거야.
event.target.value 순서로 적어주면 되겠다.
좋아, 일단 event.taret 까지 적어주고.
새로고침.
맞지? 여기 있네.
내 input 이야.
완벽해.
그러니까 document.getelement 어쩌구 저쩌구 해 줄 필요 없단 말이지.
우리 input 이 요렇게 뜬단 말씀.
봐봐.
input 을 불러왔어. 뷰티풀.
이제 value만 추가해주면 돼.
좋아.
이제 input 입력하면...value가 뜨네. 뿜!
이게 바로 React JS에서 form을 다루는 방법이야.
아주 쉽고 간단해.
좋아, 이제 value를 가지고 있으니 이걸 minutes에 넣어줄거야.
기억하지? 데이터를 업데이트하는 방법은 setState 함수를 사용하는 거야.
setMinutes(event.target.value)
다 됐다.
좋아.
좋아, 잘 작동하는지 확인하기 위해서 여기 작은 title을 만들어줄건데,
(위와 같이 작성)
그리고 여기다가 minutes를 넣어줄게.
minutes 넣어주기...
잘 작동하나 봅시다.
새로고침 해주고.
그럼 보다시피, 우리가 입력한 Input의 value를 바탕으로 component를 업데이트해주고 있어.
다음 강의에서 보자.
배운거 복습하고 계속 진도 나갈거야. 안녕~

7. State Practice (1)

좋아, 여러분.
이번 강의에서는 배운걸 복습하고 마무리하는 시간을 가지도록 할게.
좋아.
이제 setState default 값을 0로 둘 건데,
여러분의 default 값은 여기 이 부분이 될거야. 이 경우에는 0인거지.
지금까지 한 걸 전부 복습해봅시다.
좋아요.
첫 번째로,
우린 이 state 를 만들었어.
알다시피 setState의 결과는 array 야.
첫 번째 요소는 데이터이고,
두 번째 요소는 데이터를 수정하기 위한 함수야.
그 다음으로, 우린 input의 value를 state로 연결해줬지.
이렇게 해주는 건 아주 유용해.
왜냐하면 어디서든 input의 value를 수정해줄 수 있거든.
좋아, 그 다음으로 우리는 onChange 함수를 만들어줬어.
이 onChange 함수는 데이터를 업데이트 해주는 역할을 해.
알겠지? input에서 리스닝하는 데이터 말이야.
보다시피 input은 스스로 업데이트를 해.
change 이벤트가 일어났을 때, 즉, 사용자가 input에 뭔가를 써넣을 때,
onChange 함수가 실행돼.
event.target.value를 얻게 되는데 바로 input value 이지.
그 말은 여기 이 데이터가 업데이트 된다는 얘기야.
그 말은 input이 업데이트된단 얘기고.
알겠지?
Input의 value를 연결시켜주는 이유는,
다시 한 번 말하지만,
input값을 외부에서도 수정해주기 위해서야.
예를 들어, reset 버튼을 누른다고 해보자.
그럼 input 내용을 다 지울 수 있어.
좋아, onChange 함수의 주요 포인트는 데이터를 업데이트 해주는 거였어.
예를 들어, 우리가 onChange를 삭제한다고 해도,
여전히 state에 연결된 input값은 남겨져 있어.
이제 어떻게 되나 봐봐.
자 무슨 일이 일어나냐면... 여기에 뭘 쓰려고 하지만...
쓸 수 가 없어.
그 이유는, 다시 한 번 말하지만,
Input의 value가 state이고, 이 state의 default값이 0이기 때문이야.
그리고 방금 onChange 함수를 지웠기 때문에,
이 input이 키보드 이벤트를 감지한다고 해도
업데이트가 이루어지지 않는거지.
좋아, 방금 봤듯이 이게 이 두 개 모두가 필요한 이유야.
event를 들어주는 것 하나,
그리고 event가 발생했을 때, 값을 업데이트해주고, UI에 보여주는 것 하나.
이제 다시 해보면, 잘 작동하지.
좋아, 완벽해.
좋아, 이 부분은 지워줄게. 이제 value가 뭔지 다 아니까.
통제되는(controlled) input을 가지고 있고, event도 리스닝하고 있어.
이제 Hours도 컨트롤 해줄건데, 여기
여기에도 똑같은 value를 줄게.
좋아, 이제 div 안에 전부 넣는 거야.
잠깐 정리 좀 하자.
좋아, reset 버튼도 곧 만들거야.
하지만 그 전에, 어떻게 보이는지 한 번 보자.
좋아, 이제 state인 minutes를 값으로 리스닝하는 input이 두 개가 있어.
알겠지?
이제 여기 와서, 새로고침 해주고,
보다시피, 내가 Minutes부분을 고쳐줄 때마다 Hours도 똑같이 고쳐지고 있어.
하지만!
만약 내가 Hours를 고치려고 하잖아?
Hours를 고칠 수 없어. 왜냐? 아직 onChange event설정을 안해줬거든.
오케?
좋아, 이제 얼추 다 끝났어.
이제 분을 시단위로 고쳐주는 공식만 알아보면 돼.
그리고 그 공식이란 60으로 나누는 거지.
그게 끝이여.
그래서 이제 뭐라고 해주냐면...
Hours input의 value는 state에 있는 minutes값이지만
나누기 60을 하는거지
뿜.
자 이제 새로고침해주고, Minutes에 4856 이라고 적어줄게.
그럼 변환 결과는...
80 시간.
참 쉽죠?
좋아, 정리하면,
이 state를 60으로 나눠서 보여주는거지
그리고 state를 여기서 바꿔주고 있기 때문에
보다시피, 새로 업데이트 된 값을 가지고, 이 모든 코드가 다시 한 번 rendered 되는 거야.
알겠지? 너무 멋있지 않니.
자, 이제 이걸 해주잖아? 완벽해.
보다시피 아주 완벽하게 돌아가고 있다고.
그리고 다시 한 번 말하지만, 이제 우리는 JS의 마법을 사용하고 있기 때문에,
전부 다 새로 그려지는게 아냐.
싹다 리렌더링 되는게 아니라고
여기를 보면,
여기 딱 하나의 value만 리렌더링 되고있지
바로 이 부분.
좋아.
오케이, 완벽해.
이게 끝입니다~
우리가 해냈어.
봐봐. 아, 아름답다.
만약 원한다면 이렇게 고쳐줄 수 도 있어.
Math.round로
좋아, 끝이야.
얘가 알아서 반올림 해줄거야.
좋아, 이제 분을 입력해주면...이렇게 시 단위로 알려주지.
끝! 우리가 해냈어.
완벽해.
다시 이 부분을 보면,
알다시피, 이 input은 onChange event가 없기 때문에
여기선 아무것도 할수 없어
아주 좋아. 이제 버튼을 만들어 보자.
이 버튼을 누르면 다 reset하게 만들거야.
onClick처리 해주고...
reset이란 함수를 만들어주자.
이 함수는 아직 존재하지 않으니까... 여기다 만들어주자.
좋아, 이제 setMinutes...
그리고 값을 0으로 돌려줍니다~
끝.
이제 새로고침을 해보면..좋아..
그리고 Reset
보다시피, state를 리스닝 하거나, 연결한 모든 것들은 전부 0으로 돌려졌어.
끝.
완벽합니다 여러분.
근데 아직 끝난 게 아니야. 이제 hours도 minutes단위로 변환해 주고 싶어.
그러니까 말하자면 flip(뒤집어주는 것)잖아?
분에서 시로로 변환해주는게 끝이 아니라
반대로도 하고싶단말이지, 시에서 분으로
알겠지?
좋아, 다음 강의에서 다룰 건
Hours input 에 속성 하나를 더할 거야.
바로 이 disabled 속성이지.
이제 새로고침 해주면,
이렇게 보이는거지.
좋아, minutes 부분에만 뭔가를 쓸 수 있고,
Hours는 클릭이 안되서 아무것도 못써. 잘돼지.
좋아, 다음 강의에선
또 다른 버튼을 하나 만들건데
flip 이라고 하는 거야.
이 flip 버튼을 누르면 반대로 minutes를 쓸 수 없게되고 hours에 값을 입력할 수 있어.
알겠지? 좋아.
그럼 다음 강의에서 보자.
안녕~