이 글은 제가 React라는 존재를 처음 접하면서 겪고, 느꼈던 점을 적은 글 입니다 :)
아직도 배우고 있기 때문에 부족하고 다른점이 있을 수 있다는 점을 기억해주세요!
🤔 리액트의 첫인상?
아이
슈팔리액트가 꼴받게 하잖아~
후,,, 사실 처음 리액트를 향한 저의 시선은 그다지 곱지 않았습니다
사실 리액트를 시작하게된 계기도 제가 원해서가 아닌 프로젝트 진행때문에 반강제로 배우게 되었는데요
처음으로 접했던 자바스크립트 라이브러리가 Vue 였는데, 리액트는 이상하게도
Vue와는 다르게 어렵고 딱딱하고, 정말 싫게 느껴졌습니다.
너가 실력이 없어서 리액트도 못다루는 거면서 왜 싫어해 라고 말할수도 있습니다
맞습니다! 제가 실력이 없어서 싫어하는거 같기도 합니다... 😟
배우기가 싫었어서 그랬는지 인터넷에서 강좌를 찾아봐도 머리가 돌이 되어
받아드리기를 거부했고, 그런 자신에게 너무 화가 나고 슬펐습니다
사실, 실력도 부족한데 이 글을 쓰는 이유는 스스로 개념을 정리하고, 조금더 쉽게 다가기 위해서입니다
왜냐하면, 차근 차근 인내심을 갖고 배워나가다 보니까 조금씩 React란 친구에게
매력있다는 사실을 알게되었거든요 :>
이 글은 제 눈높이 맞춘 아주 쉬운 글일 겁니다!
스스로가 이해할 수 있어야 하거든요😅
서론이 길었네요!
스스로를 위한 리액트 정리를 시작해보도록 하겠습니다!
🚀 가볼까요?
.
.
.
.
#1 리액트... 너는 누구냐❓
리액트(React)... 어디서 많이 들어봤는데...?
맞습니다! 이런 분야에 관심이 있으신 분이라면 한번쯤은 들어보셨을 겁니다.
리액트는 여러가지 특성을 가지는데요,
- React는 SPA(Single Page Application) 이다.
- React는 선언형(declarative) 이다.
- React에는 컴포넌트(Components)가 있다.
- React는 가상 돔(Virtual DOM)를 사용한다.
- React는 State, Props가 존재한다.
음, 좋아요... 그래서 이게 뭔 뜻인데요..?
하나 하나 분석해봅시다!
#1-1 🌐 SPA?
SPA, 즉 싱글 페이지 애플리케이션 (Single Page Applicatoin) 은
말 그대로 페이지가 하나인 애플리케이션을 말합니다.
조금더 자세히 설명하자면, 여러분이 브라우저에서 웹사이트들을 들어간다고 가정하고,
www.blablabla.com 라는 사이트에 접속했다고 가정해 봅시다!
그럼 브라우저는 💻 : 서버님 페이지좀 보내주셈 라고 요청을 합니다
그러면 서버는 💽 : 오키 보내드림 하고 페이지 하나를 보내줍니다.
또 새로운 클릭을 했습니다.
그럼 브라우저는 또 새로운 요청을 합니다
💻 : 이번에는 다른 페이지 보내주셈
💽 : ㄱㄷ 너가 클릭한 새로운 페이지 보내드림
서버는 또 다른 페이지를 브라우저에게 보내줍니다
이런식으로 원래의 멀티 페이지 애플리케이션은 하나 하나 페이지가 따로 있기 때문에
늘 보내고 받고를 반복하면서 페이지를 보여주게 됩니다.
특히나 오래된 웹사이트를 보면 페이지간에 로딩을 많이 볼 수 있죠
하지만 싱글 페이지 애플리케이션(SPA) 는 그렇지 않습니다😎
싱글 페이지 애플리케이션은 웹사이트가 로딩될 때 필요한 모든 리소소를 최초에 한번에 모두 다운로드 받아서 실행 시킵니다
그래서 한번 로딩을 하고 나면 페이지간에 로딩이 없습니다.
React에서도 SPA 방식을 사용하는데, 실제로 기본 프로젝트 파일 구성을 보면
HTML페이지는 Index.html 파일하나 밖에 없는 것을 볼 수 있을겁니다..!
.
#1-2 💢 React는 선언형(declarative) 이다
바로 게임으로 예시를 들어서 이해를 해봅시다..
누군가 어몽어스에서 임포스터에 대해서 물었습니다
여기서 내가 임포스터 라고 가정하고 게임을 한다면
- 명령형
당신은 임포스터입니다 🩸
- 맵의 왼쪽 끝으로 가세요.
- 밴트를 타세요.
- 오른쪽 위 구역에 있는 밴트로 나오세요
- 조용히 사람을 죽이세요.
- 다시 밴트를 타서 빠져나오세요
- 선언형
당신은 임포스터입니다 🩸
- 임포스터는 사람을 죽입니다
- 사람을 모두 속이고 죽여버리면 이깁니다.
조금 달라보이는군요?
명령형은 하나 하나 무엇을 어떻게 (How) 해야할지 구체적입니다. 반면에
선언형은 추상적으로 하고 무엇 (What)을 해야 할지에 집중합니다.
.
.
.
.
#1-3 🧱 React에는 컴포넌트(Components)가 있다.
컴포넌트 (Components) ??
컴포넌트는 단위적인 모듈을 말합니다.
즉 부품들이라고도 말할 수 있겠습니다!
재사용이 가능한 가장 작은 단위로써 컴포넌트 안에 내용(세부사항)들은
밖으로 드러나지 않습니다!!
컴포넌트들은 재사용이 가능하다는 미친 장점이 있는데
컴포넌트들을 가져와 사용한다면 하드코딩하는거 보다 훨씬 시간이 절약됩니다
.
.
.
.
#1-4 ✨ React는 가상 돔(Virtual DOM)를 사용한다.
가상 돔(DOM) 이라니???
도미처럼 먹는건가?
DOM (Document Object Model)은 구지 번역해보자면 문서 객체 모델 이라는 뜻 입니다.
사실 이렇게 말하면 잘 안 와닿는게 정상인데요 😅
돔(DOM)은 트리구조로 되어있는 하나의 객체로써,
상위 요소아래 또 다른 하위요소가 있고, 그 밑에 또 다른 요소가 있는 마치 나무 처럼 생긴 구조를 말합니다.
트리구조는 알아보기 쉽다는 장점을 가진대신,
- 점점 DOM이 커질수록 속도가 느려졌습니다.
- 또한 계속해서 DOM이 업데이트되면서 오류가 생기기도 하고,
- DOM의 요소들을 하나하나 찾기 힘들었습니다
🥳 그래서 나왔습니다!! 가상 돔 (Virtual DOM)
유튜브에 치니까 첫번째에 아주 쉬운 영상이 나오더라구요
By Purely Function TV
아주 쉽게 봅시다,
돔은 생각했습니다
📦: 헉헉... 요소들이 바뀌는데 하나 하나 노드들을 다 찾아서 업데이트 시켜야하니까 힘들어 죽겠다 ㅠㅠ
그때, 어디선가 가상 돔이 튀어나왔습니다!
앗 야생의 가상돔이 출연했다!
✨: 와다시가 키타! 내가 너를 도와주겠다, 나한테 정보들을 넘겨라! 나는 바뀐거 찾는거 졸라 빠르거든!!
돔은 하나하나 찾는 대신 가상돔에게 그것들을 넘겼습니다
그리고 가상돔은 매우 이런 것들을 잘했기에, 어떤것들이 업데이트 되었는지 빠르게 파악했죠.
돔은 모든것을 어떻게 그려야 할지 알았지만, 하나하나의 노드들 기억하는 일 들을 잘 하지 못했습니다
그래서 이러한 일 들을 가상 돔에게 넘겨서 빠르게 어떤것이 바뀌었는지 보고 바꿀 수 있는 가상 돔이 이를 처리한 것입니다..!
.
.
.
#1-5 ⛓️ React는 State, Props가 존재한다.
그게 왜 필요한데???
리액트는 State와 Props라는것을 사용합니다.
뜻을 해석해서 보자면, State는 상태, Props는 특성 이라고 할 수 있습니다.
둘은 언뜻보면 비슷하지만, 다른점이 존재하는데요
이를 사용하는 이유는 사용자가 취하는 행동에 따라 여러가지 액션이 필요하기 때문입니다
우리는 State와 Props를 이용하여 여러가지 용도로 사용이 가능합니다!
하지만 이는 리액트의 주요 개념 중 하나이므로, 나중에 더 자세히 알아보도록 합시다.🙂
마치며...
자, 요악을 해봅시다!
우리가 리액트를 쓰는 이유는
- 가상 돔 덕분에 빠르다
- 규모가 커도 관리하기 쉽다
- 리액트는 MIT 라이센스이고 오픈소스이며 무료이다
- Facebook이 관리하여 유지보슈 업데이트가 용이하다
가 되시겠습니다!
React는 여러가지 개념이 더 있지만 너무 많은것을 하려하면 서운하니까
이번 시간에는 왜 사용하는지를 알아보았습니다!
다음시간에 봅시다 !👋 :)
이미지: https://alleyful.github.io/2019/09/01/log/react-challenge/react-challenge-day3/
참고한 블로그/웹사이트/글 입니다
- 참고
SPA) https://www.youtube.com/watch?v=xfGciVdbktI
선언형) https://codechaser.tistory.com/81
선언형) https://medium.com/@hongseongho/%EC%84%A0%EC%96%B8%ED%98%95-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-1d8247342f17
컴포넌트) https://velog.io/@tjnoh/%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8
돔) https://noogoonaa.tistory.com/53
돔) http://52.78.22.201/tutorials/translate/virtual-dom/
state, props) https://medium.com/react-native-seoul/react-%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%A5%BC-%EC%B2%98%EC%9D%8C%EB%B6%80%ED%84%B0-%EB%B0%B0%EC%9B%8C%EB%B3%B4%EC%9E%90-01-react-js%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-ad8ba252ee28
