2일차
react를 만드는 방식 = 페이지를 조립해서 퍼즐을 맞추는것과 같다.
react를 사용하면 큰프로젝트를 할때 새로운 스타일을 적용할 필요 없이 재사용이 가능하기에 자주쓰인다.
본격적인 내용 정리
1.why React?
React를 왜 배워야 하는가?
최근에는 각 부분을 컴포넌트로 나눠 부품처럼 사용하며 재사용성이 높아지게되어
이러한 방식을 사용하게되었습니다.
그 방식중 대표적인 프론트 엔드 도구로는 3가지가 있습니다.
바로 vue.js/react.js/angular.js인데요.
사실 이 3가지 기술은 큰 개념으로 보자고 하면 차이가 거의 없습니다.
그런데 왜 React를 배워야 할까요?
예를 들어보겠습니다
사진업로드 기능을 만들었다고 가정합시다.
A와 B를 사진업로드 기능을 사용해서 만들었습니다
그런데 B가 사용량 곧 다운로드 수가 많다고 해봅시다.
B는 많은사람이 쓰기떄문에 다양한 이슈가 생길것입니다.
그런데 B에 문제가 생긴다고 했을때,
그만큼 많은 사람이 사용하기 때문에 여러사람이 에러 처리를 도와줄 수 있을것입니다.
실제로 뷰,리액트,앵귤러 중 가장 많이 사용하는것이 리액트 입니다.
그렇다면 리엑트의 장점은
1.블로그등이 활성화가 잘 되어있다.
2.커뮤니티 활성화가 잘 되어있다.
3.물어보기 쉽고, 검색이 잘된다.
4.취업/이직이 잘된다.
등 이 있을것입니다.
그렇기에 많은 기술중 이러한 장점으로 인해서 리액트를 배운다고도 할수 있습니다.
뿐만 아니라,
리액트는 여러곳에서 사용가능합니다.
웹에서는 React.js를 사용해서 구현을 하고
앱에서는 React.js가 베이스로 있다고 했을때 40% 정도만 공부를 하게 되면React-Native를 사용해서 구현을 할 수 있습니다.
즉, 웹/앱 개발을 할 수 있다는 것이죠.
또한 pc앱또한도 만들수 있는데
React와 Electron을 사용해서 만들수있습니다
이토록 한개의 기술로 여러곳에서 쓸수있기 떄문에 유행을 하게 됬습니다.
특히 React-Native같은 경우에는 cross-platform에서 사용할수있는데
기존에 안드로이드 어플 개발을 위해 자바나 코틀린을 배워서 개발하고
IOS 개발을 위해서는 스위프트등 새로운 언어를 배워서 개발을 해야합니다.
그런데 React-Native를 사용하게 된다면 안드로이드와 IOS개발을 동시에 할 수 있게되었기에 더욱이 인기가 많아지게 됬습니다.
물론,다른 기술들도 이러한것을 따라오기위해 많은 기능들을 추가했지만, 한번 인기를 얻은것이 React이기에 그 인기가 현재까지도 가고있기에 저희는 React를 배워야합니다.
2.what is component?
이번엔 component에 대해서 볼 것인데요.
component란 무엇일까요?
component란 - UI또는 기능을 부품화 해서 재사용 가능하게 하는 것 입니다.
곧, 한번 만든것을 여러곳에서 재사용 한다는 것이죠.
이런 의문이 들 수도 있습니다.
복사 붙여넣기 하면 되는거 아닌가?
복사 붙여넣기를 하면 문제가 발생하게 됩니다.
어떤 문제일까요?
새롭게 수정을 하려면 어디에 복사 붙여넣기를 했는지 하나하나 다 찾아야 하게됩니다.
물론 짧은 코드나 간단한 페이지의 경우에는 이러한 문제를 인지하기 어려울 것입니다.
하지만 코드가 길고 큰 프로젝트를 하게된다면요?
그렇게 된다면 많은 시간이 낭비가 될 것입니다.
그렇기에 component라는 만들어 한곳에 몰아넣고 import를 해서 사용을 하게 되는 것 입니다.
이렇게 되면 원본을 수정한다고 하더라도 import 했던 모든 곳이 다 바뀐다는 것이죠.
그렇기에 component개발 방식이라는 것은 복사 붙여넣기가 아닌 import해서 원본이 통제하는 방식이라는 것이죠.
이번엔 component를 만드는 방법에 대해서 알아보겠습니다.
2가지를 소개해드리려고 합니다.
바로
class와 function 인데요
최근에는 class를 안사용 하고 function을 사용하는데요
그 이유는 function형 component를 사용하게 된다면 훨씬 간단하게 만들 수 있기 떄문입니다.
그렇다면 왜 함수형 컴포넌트가 만들어 졌을까요?
-기존에는 함수형 컴포넌트라는 것은 없었습니다.
하지만 복잡한 것을 떠나 조금더 간단히 보기위해서 만들어 졌다는거죠
함수형 컴포넌트가 만들어진 과정을 보게되면
클래스전용 기능을 함수에서도 사용할수 있게 React에서 지원하게 된 이후 본격적으로 함수형 컴포넌트가 만들어지기 시작했습니다.
이 기능들을 바로 Hooks라고 부릅니다.
앞에 use로 시작하게 이름이 붙여지게 되었는데, 이것들을 Hooks라고 부릅니다.
이것들을 통해서 함수를 컴포넌트로도 사용이 가능하게 되었습니다.
3.New item = State(what is State?)
useState란?
State를 만들어주는 도구
그럼 State가 무엇일까요??
State란
- 컴포넌트 전용 변수 입니다.
기존 javascript에서는 let과 const로 만들지만
컴포넌트에서는 State를 주로 사용하게됩니다.
물론 let과 const도 사용이 가능합니다.
선언 방식을 한번 봐 볼까요??
let과const선언 방식은 이렇습니다.
예를 들어
let aaa= 3
const bbb=10
라고 선언해 봅시다.
let은 재할당이 가능하고 const는 재할당이 불가능 했습니다.
State는 어떻게 선언할까요?
const[state,setState]=useState("철수")
이런식으로 선언합니다
단, 여기서 const는 저희가 알던 const가 아닙니다
조금 복잡하죠?
그런데 왜 State를 사용할까요??
이 구조를 분해해서 보게된다면
state는 변수명
setState는 변수 바꾸기
useState 변수 만들기
("철수")는 초기값
이 됩니다.
이것을 기존의 let방식으로 선언한다고 하면
예를들어
let aaa= 철수
aaa= 훈이
let aaa =철수
를
const[aaa,setAaa]=useState("철수")
aaa=훈이
setAaa(훈이)이런 식으로 선언해야합니다.
겉으로 보기에는 너무 복잡해보이는데 왜 State를 사용할까요?
그 이유는
State를 이해한다면 document.getElementById()...등등
을 사용하지 않아도 되기 떄문입니다.
선언할때 조금만 노력한다면 나중에 가서는 훨씬 편해지기 때문에 사용한다는 것이죠.
다시 말해,
js를 사용하여 제어를 할때는 항상 document로 시작한 긴 문장을 작성해야했는데 State를 사용하면 안 사용 해도 된다는거죠!
