내가 왜 쓰는지도 모르고 쓰고 있었던 이 React라는 친구에 대해 자세히 알고싶다...!

또 많은 사람들이 왜 사용하는지 모르고 사용할수도 있겠다 라는 생각을 하게되어 이 포스트를 작성하게 되었다.

리액트는 누가 만들었는가? 🧐

처음은 리액트의 기원부터 돌아가볼려고 한다. 리액트는 Facebook에서 2011년에 만든 라이브러리이다. 그전에는 jquery 또는 backbone, angular를 가장 많이 사용했으나 react의 등장으로 새로운 시대를 불러오게 되었다.

왜 만들어졌는가? 🧐

그전에 사용되었던 프레임워크는 MVC패턴 혹은 MVVM패턴을 이용한다. 이런 식으로 model에서 처리한 데이터를 view에서 실제 DOM에 계속 처리하는 방식은 웹의 규모가 크면 클수록 성능 저하의 원인이 될 수 있기에 React에서는 Virtual DOM이라는 가상의 돔에 새롭게 렌더링하여 현재의 DOM과 비교하여 기존의 view에 수정하는 방식으로 성능저하를 해결하기 위해 만들게 되었다.

리액트의 특징 👍

리액트의 공식문서에 명시되어있는 특징들을 소개 해보려고 한다. 왜냐 공식문서를 보면서 중요한 특징 부분을 항상 놓쳐왔기 때문이다.

1. JSX

JSX는 javascript + xml로 자바스크립트에 대한 확장 구문이다. 이 문법은 element(요소)를 리액트에서 제공해주기에 마크업 코드처럼 작성 할 수 있다. 바로 아래처럼 말이죠.

import React from "react";

const Hello = () => {
    return <div>Hello World!</div>;
};

export default Hello;

이런식으로 html 태그처럼 적을 수 있기에 굉장히 편할 수 있다.

2.Component

컴포넌트는 UI를 구성하는 개별적인 뷰의 단위이다. 마치 UI를 개발하는것이 건물을 짓는 것이라고 한다면 컴포넌트는 철근이나 콘크리트같은 건물을 짓는 재료의 역할을 하게 된다. 컴포넌트의 특징은 재사용성 이다. 예를 들어, 웹사이트에서 여러 페이지에 버튼을 사용해야 한다면 공통된 하나의 버튼의 컴포넌트를 만들고 그것을 그냥 가져다가 이용하기만 하면 된다.

리액트의 장점 😎

1. 리액트는 Virtual DOM을 이용한다.
   • 이러한 장점이 생기는 이유는 위에서도 설명 했듯이 기존의 View를 계속 바꾸는 형식으로 사용할 경우 성능 저하를 일으키기에 Virtual DOM을 이용하여 먼저 가상의 돔에서 새롭게 렌더링하여 기존의 view에 현재 돔과 비교하여 바뀐 부분만 적용하는 방식이다.
2. Component를 이용한 효율적인 재사용 및 유지보수에 용이하다.
   • component는 UI(User Interface)를 구성하는 뷰의 단위로 전체 앱은 component들이 모여서 만들어 지게 된다. 이렇게 각 UI마다의 단위이기에 다른 앱에서도 쉽게 재사용을 할 수있는 장점이 있다.
3. React는 JSX문법을 이용한다.
   • 결국 JSX문법을 HTML과 같은 마크업 언어의 형태를 띄고 있기때문에 비교적 쉽게 공부할 수 있는 부분도 있다.

     리액트의 단점 🤮

4. 리액트는 View Only 이다.
   • 결국 View만을 만들수 있기에 데이터 관련 처리나 Routing 같은 경우는 또 다른 라이브러리를 이용해야하는 불편함이 있다.
5. IE8 버전 이하에서는 지원을 하지 않는다.
   • 사실 이 경우는 단점이라 보기도 애매한게 22년 6월 부터는 MS에서 IE에 지원을 종료하겠다고 하였다. 그렇기 때문에 사실 이제는 이 단점은 없어질 단점이다.

     내가 생각하는 리액트 🤔

진짜 편하다라는 말이 먼저 떠오른다. 웹을 입문하게된 HTML과도 유사하고 많은 사람들이 이용하기에 많은 커뮤니티 즉 많은 정보들이 있다. 그렇기에 빠르게 많은 정보를 쉽게 검색할 수 있기에 매우 편하다. 그리고 컴포넌트를 이용하기에 버튼 하나를 만들어 놓으면 이곳 저곳 쉽게 가져다쓰는게 편하다. 하지만 결국 view를 만지는 것을 제외한 나머지는 모두 라이브러리를 이용해야 한다는 것이다. 라이브러리를 이용함으로써 초기 세팅하는 것이 조금 복잡해질 수 있다. 하지만 Facebook이라는 거대한 기업에서 만들고 사용중인 기술 이기 때문에 많은 기술적 지원을 해줘서 빠른 업데이트를 통해 사용자들의 불편한점을 빠르게 고쳐준다.

마무리

앞으로도 왜 배우는지 왜 쓰는지에 대한 고민은 꽤나 필요하다고 생각한다. 왜냐 이런 고민들이 결국 내가 라이브러리나 프레임워크를 고를 때 어떤 장점이 있고 어디에서 적용하면 좋은지 쉽게 이해할 수 있기 때문이다. 그리고 공부하다 질릴 때 이런거 생각하고 정리 해보면 다시 리프레쉬되서 쉽게 공부할 수 있으리라 생각한다.

처음은 어떻게 가게 되었는가부터 설명해볼려고 한다. 그저 게임하고 유튜브 보는것만 좋아하던 중학교 1학년때 단순히 컴퓨터를 좋아한다는 이유로 진로 쌤에게 추천을 받았다. 근데 그때 내가 좋아했던거는 컴퓨터의 부품을 좋아했던건데... 그래서 1학년때부터 많은 고민을 하기 시작했다. 내가 가던 개발이란 새로운 공부를 잘 할수 있을까란 고민을 주로 했던거 같다. 여러 고민과 부모님과의 대화를 통해서 결국 가야겠다 하고 맘을 먹고 내 성적을 보니... 절망에 빠지게 되었다.. 하지만 학원을 다니기 시작하고 공부를 시작함으로써 성적을 맞추는데 성공을 했다

부모님의 반대 👨‍👩‍👦

부모님의 반대는 이야기를 꼭 해야한다고 생각했다. 처음 1학년때 말씀을 드렸을때는 두분 다 의아했었다.

*"너라면 충분히 인문계가서 열심히 공부해서 대학을 갈 수 있지 않을까?*

이런 말을 하셨던 이유는 우리 부모님은 경험을 매우 중요시하게 생각하신다. 그렇기에 대학을 가는것도 경험이고 이를 경험을 했냐 안했냐는 많은 차이가 있기 때문이다. 그렇지만 저는 이런일을 하는게 너무 행복할거 같고 앞으로도 유망한 직업이 아닐까요? 라고 설득하기 시작한다. 처음엔 너가 컴퓨터 좋아하니까 일시적인게 아닐까라고 생각하신 부모님도 내가 진심이란걸 알고 서서히 학교에 대해 알아보며 결국 천천히 나를 믿고 도와주시기 시작했다.

입학 후! 🏫

그렇게 입학을 하게 되었지만 코로나라는 거대한 벽이 나를 가로막았다. 그래서 또 5월까지는 게임만 한거 같다... 그렇게 1학년을 6월 3일에 등교하게 되었다.

나의 전공 🖥

처음부터 어딘가에 이끌려 생활코딩을 보게 되었다. 처음 html와 css를 공부하면서 바로 chrome에 뜨게 되니까 내가 막 엄청 잘하는 개발자가 되어버린것만 같았다. (사실은 그렇지 않은데 하하ㅏ...) 그렇게 너무나도 매력적으로 느껴져서 프론트 엔드로 전공으로 정하게 된다.

전공을 정한 후 😭

처음에는 너무 재미있어 나 혼자 이것 저것 만들어보기도 하면서 되게 재미있게 한거 같다. 하지만 그것도 어느새 한계가 있었고 javascript로 넘어가게 되자 난 또 다시 멘붕이 왔다. 그리고는 아 이건 진짜 아닌가? 라는 생각도 하고 이렇게 아니면 백엔드로 전향을 해볼까? 라는 고민도 하지만 결국은 다시 열심히 해보자 라는 마인드로 공부를 해보지만 너무나도 잡히지 않았던 공부는 결국 안하게 된다. 그러더니 너무 축구에 빠져버려 흐지부지 1학년이 지나가게 된다.

내 인생에서 축구란 ⚽︎

갑자기 왠 축구? 라는 말이 나올 수 있지만 내가 전공공부를 못하게 된 핑계 아닌 핑계에는 축구가 상당 부분을 차지 한다. 나는 중학교때부터 축구를 해왔고 너무나도 좋아했다. 실제로 대회도 나가서 서울로 가는 본선을 진출한적도 있다. (우리 팀원들이 잘해서지만 ㅋㅋㅋ) 현재 개발이 좋아진것처럼 한 두번 해보니 축구라는 운동이 너무나도 좋았다. 그러다보니 나의 유튜브나 모든 인생은 축구와 밀접해져갔고 결국 그것이 나의 공부를 망치게 된 계기가 되었다. 한 영상만 더 한 영상만 더를 외치던 나는 결국 야자시간은 모두 축구로 빠지게 되었고 공부를 안하게 된것이다. (이것의 해결책으로 현재는 그냥 유튜브라는 도메인 자체를 막아버렸다ㅋㅋㅋ)

2학년이 된 후 🤮

2학년이 되고 나의 위치는 너무나도 밑이였다. 다른 친구들보다 먼저 정하게 된 전공이였지만 공부를 하지 않아 한참 밑의 실력을 가졌기 때문이다.

이렇게 된 나는 공부를 더 잘하고 더 열심히 해야한다는 부담감을 가지게 된다.

결국 공부를 할려고 열심히 노력해봐도 어디서 부터 어떻게 해야할까? 라는 생각이 들게 되었다.

전공동아리 &mpersand 🥰

그러던 어느날 전공동아리를 또 들어가거나 개설해야 한다기에 어떻게 해야하나 하고 막막하던 찰나에 좋은 기회가 나에게 왔다. 1학년때 같은 전공동아리를 했던 대훈이형이

전공동아리 할래? 말래?

라는 좋은 제안을 해주신다. 대훈이형은 나보다 더 많은 경험을 해봤고 이런 제안은 좋은 기회라 생각되어 같이 하겠다고 하여 &mpersand라는 동아리를 개설하게 된다. 그렇게 이 동아리는 나의 공부에 터닝포인트라고 할 정도로 너무 좋았다. 그 중에서도 이렇게 나에게 동기부여 해줄 수 있는 말을 많이 해주신 대훈이형이 너무나도 감사하다 👏 이 동아리는 나중에 다시 설명 해보도록 하겠다.

진짜 GSM에 다니는 기분! 🏫

진짜 글의 주제로 어떤 기분인가 궁금해 하실거 같아 말한다. 새로운 공부를 다시 한다는게 너무나도 부담스럽지만 그게 어쩔때는 또 행복하게 만들어 주기도 한다. 그리고 다른 친구들 보다 빠른 취업으로 인한 이득 또한 나를 기분좋게 만들어주는 동시에 두려움도 만든다. 과연 내가 진짜 고등학생 신분으로 취업을 할 수 있을까? 이렇게 사회에 나가서 어떻게 되는거 아닌가? 라는 생각도 들지만 이런것들은 내가 열심히 한다면 해쳐 나갈수 있는 문제기에 상관이 없다. 😝

이렇게 현재의 상황 😎

현재는 다시 열심히 공부하려는 의지를 가지고 React에 대해서 공부하고 있고 나의 생활을 점차 진짜 개발자처럼 바꿔 나갈려고 노력하고 있다. 언제 다시 나태해질지 모르겠지만 그때는 내가 또 잘 해쳐나갔으면 좋겠다 ✌️

부족한 나 이지만 앞으로의 변하는 모습을 벨로그를 통해 포스트 할 예정이다. 👍