본캠프 2일차
일단 깃허브 pull이라는 것을 배웠다. 추가 업데이트 본을 다운 받는 것인데 추가가 아닐경우에는 git clone으로 복사해 와야한다.
그런데.. git clone 할 주소가 없다고하여 자료실에 있는것을 사용했다.
오늘은 state를 배웠다.
state는 컴포넌트 전용 변수로 리엑트에서 사용한다.
그럼 기존 변수들은 못쓰는것일까?
No, 기존 변수들도 사용 가능한데, 얘는 좀 특별하다.
일단 컴포넌트 라는 개념을 알아야 한다.
아, 동시에 왜 리엑트를 사용하는지부터 알아보았다.
html과 css 를 따로 사용하게되면 어느덧 양도 많아지고, 큰 서비스이 경우에는 더 복잡해 진다.
그래서 부품들을 상자에 담아놨다가 필요한 부분만 꺼내서 조립하는 형식으로 사용하는데, 이것을 컴포넌트라고한다.
다시말해
Component는 UI 또는 기능을 부품화하여 재사용이 가능하게 하는것
을 말한다.
이러한 컴포넌트 도구들을 뷰, 리엑트, 앵귤러 라고하는데 이중에서 왜 리엑트를 사용할까?
셋다 기술적으로는 큰 차이가 없다. 따라서 이럴 경우에는 사용량을 보게된다.
강의에서 사용량을 나타내는 그래프를 보여주셨는데 리엑트가 압도적으로 많았다.
그럼 왜 사용량을 체크한다는 것인가?
간단하다. 사용량이 많으면 커뮤니티 활성화가 잘 되어있고, 그렇기에 질문하기가 쉽고, 검색이 잘 된다. 거기다가 블로그들이 잘 되어있다(이부분은 무슨 말인지 모르겠다. 블로그?? 아무튼 찾아보고 질문하기 쉽다는 말 같다.)
게다가 리엑트를 사용하는 현장이 많으니 그만큼 취업의 문도 열려있다고 할 수 있다.
그렇다면 왜 리엑트 다운로드 수가 많은가?
리엑트는 기본적으로 웹서비스를 만드는 도구인데 이것을 활용해 모바일 서비스도 만들고 pc앱 서비스도 만들 수 있다.
모바일서비스를 만들 경우, React-Native를 사용하는데 이것은 리엑트와 거의 60%가 유사하여 리엑트를 배우면 혼자 공부하기 어렵지 않다고 한다.
아직 그렇다고 여겨지지는 않지만 언젠가는 나도 혼자 언어를 배우는 날이 올까 라는 생각이 들었다.
React-Native의 장점:
모바일 앱은 두가지 형태가 있다.
IOS방식과 안드로이드 방식인데 두가지 다 사용 언어가 다르다.
따라서 만약 두군데 다 배포하고자 한다면 둘의 언어를 배워야하는데
React-Native는 리엑트 코드로 하나만 만들어 두군데다 배포가 가능하다.
따라서
리엑트 = All In One 이라고 할 수 있다.
일단 리엑트를 왜 사용하는지에 대해서 알아봤고 앞서 말했던 컴포넌트에 대해 정리해본다
컴포넌트는 일단 상자에 부품들을 모아두고 필요한 부품을 꺼내어 쓴다는 것이라고 했다.
이렇게 들었을때 처음에 '복사 붙여넣기 하는건가보다'라는 생각을 했다.
그런데 아니었다.
만약 복사 붙여넣기를했다면 수정시에 기존 만들었던 것 다 찾아서 하나하나씩 바꿔야 하는데,
만약 큰 서비스(홈페이지)같은 경우에는 하나하나 찾기가 힘들다.
그래서 사용하는것이 컴포넌트!!
컴포넌트를 사용할경우 원본은 상자에 들어가기에 원본만 바꾸면 적용한 모든것들이 바뀐다.
이렇게 되면 UI의 재사용이 가능해진다.
페이지도 하나의 큰 컴포넌트이다. 나중에 이모션 처럼 import하여 사용하면 된다.
그럼 버튼 하나만담고 여러군데에 사용해도 되나?
처음에 이 질문을 들었을때 너무 낭비가 아닌가 하였다.
하지만 멘토님께서 실제로 많이 이용하는 방법이라고 하셨다.
그럼 컴포넌트는 어떻게 만드나
function을 이용하여 컴포넌트를 만들 수 있는데,
function은 리엑트에서 두가지로 나뉜다.
1.기능을 위한 함수
2.컴포넌트를 위한 함수
여기서 컴포넌트를 만드는방법은 또 두가지로 나뉘게 된다.
class를 이용하거나, 앞서 말했듯 function을 이용하거나 하는 방법이다.
class를 가지고 만드는 방법은 많이 복잡하다. 그래서 현재는 간단하게 function을 사용하여 만드는데, 원래는 없던 방법이다. 함수만 존재하다가 클래스전용 기능들을 함수에 넣어 사용할 수 있게끔 리엑트에서 제공한 것이다.이것을 특별한 함수로 사용한다 라고한다.
이로인해 클래스와 같은 기능을 흉내내는 것이 가능해 졌는데, 이것이 바로 hooks이라고한다. 정확히 말해 이 기능들중 use로 시작하는 기능들이 바로 그것이다.
함수안에 hoock을 사용 함으로써 여러 기능을 활용 가능하게 되었다.
클래스형 방법도 알아야하는 이유
1.이미 만들어놓은 거대한 서비스들의 경우 코드가 class형일 가능성이 높다. 따라서 코드해석이 가능해야한다
2.부분부분 함수 형으로 갈아 엎고 있기도 하니 둘이 적절히 섞일 수 있다. 따라서 둘을 바꾸는 방법도 알아야 한다.
오늘은 class방법까지는 자세히 다루지 않았고 function을 사용한 방법중에 useState라는 hooks을 알아보았다.
이것은 state를 만들어주는 컴포넌트 전용 변수 인데 let과 const도 사용 가능하기는 하지만 기본적으로 컴포넌트 에서는 state를 사용한다고 알고 있으면 될 것 같다.
const [state,setState] = useState("철수")다음은 use로 시작하는 hooks로 만든 state 사용예시이다.let 으로 바꿔보면
let aaa = "철수"로 state는 변수명 소괄호 안에는 초기값이 들어간다. 따라서 여기서는 초기값이 "철수"인 것이다.
setState 는 변수를 바꿔주는 함수로 만약
aaa = "훈이"처럼 철수를 훈이로 변경하고 싶다면
setState("훈이")이런식으로 작성하면 된다.
참고로 변수명 및 set뒤에는 원하는 것으로 적어도 무관하다.
훨씬 복잡해보이는데 왜 State를 사용하는가?
State만 이해하고 사용할 줄 알게되면
document.getElementById()를 사용하지 않아도 되기 때문이다.
이것을 이용하여 여러 퀴즈들을 풀고 새로운 사실을 알게되었다.
어제는 안알려 주신 프레그먼트라는 아이이다.
<></> 이렇게 빈테그 또는 import {Fregment} from 'react'를 쓰고 <Fregment></Fregment>라고도 쓸 수 있는 것인데 react로부터 import하는 것은 리엑트에서 제공하는 프레그 먼트이다.
언제 사용하는가?
:리엑트 전용 html에서는 하나 이상의 태그가 따로 떨어져서는 안되고 묶어놓아야 하는데 보통 div태그를사용하지만 대신에 이 프래그먼트를 사용하는것도 가능하다.
실습하기:
state 실습을 위해서는 실습파일 상단에 import{useState} from 'react'를 해주어야한다. 리에트에서 기본 제공하는 것이니 노드모듈에 자동으로 설치 되어있는것을 가져오는 것이다.
여기서 또하나 알게된것
화면과 연결된 변수를 사용하기 위해 state를 사용하는 것이다.
onChange={}는 변화를 감지하는 함수로 이중괄호 안에 함수이름을 넣어주면 이 함수가 실행되는데 여기서 함수를 넣어주는 것을 함수를 연결한다 =바인딩 한다라고 한다.
게시물 등록 페이지는 어제오늘 만들었다.. 그래도 오늘은 조금 빨리끝난것같아 홀가분하다.
기존 내용작성부분에서 placeholder를 사용하니 고정된 글이 세로기준으로 가운데에 위치한다.
text-aline을 사용해도 적용이 안되길래 멘토님께 질문할까하다가 구글링으로 textarea라는 것을 사용하면된다고 하는것을 보게되에 적용해보았다.
String(Math.floor(Math.random()*1000000)).padStart(6, "0") 랜덤 으로 숫자 만들기.. 공식을 잊어버려 구글링해 보았다.
