본문 바로가기
프론트엔드 상식

React 유래와 장점, 개발 환경 종류

by Whiimsy 2021. 1. 7.

🧈 React

이제 리액트를 클래스형 기반의 객체지향 프로그래밍 스타일로 코드를 작성할 것이다. 

 

우리는 클래스를 만드는 것이 아니라 클래스를 사용하는 것이기 때문에 클래스가 무엇인지 몰라도 코드 작성이 가능하지만 객체지향(Object Oriented Programming)에서 클래스의 기본적인 정의를 알고 가자!

 

객체 지향과 클래스

객체란 객체의 속성을 이루는 데이터와 그 데이터의 조작 방법에 대한 내용을 말한다. 그리고 그것을 다루는 개념이 객체 지향이다. 즉 객체는 속성과 기능을 가지고 있는 것이 핵심이다.

 

객체지향 프로그래밍 언어는 기존의 절차 지향 프로그래밍 언어와 완전히 다른 개념이 아닌 좀 더 보완하고 발전시킨 것이다.

 

클래스란 데이터와 메소드가 결합된 사용자 정의 타입이다. 사용자 정의 타입이란 프로그래머가 서로 관련된 변수들을 묶어서 만든 데이터 타입을 뜻한다. 앞에서 객체는 속성과 기능을 가지는 것이라고 말했었다. 클래스는 이 객체를 생성하는 설계도, 틀과 같은 역할을 한다. 설계도에는 실제 제품의 속성과 기능에 대해 기술하고 있고 이를 만든 제품에는 설계도의 내용이 실제로 구현되어 있는 것이다.

 

클래스는 객체가 아니다. 클래스는 객체를 생성하는 정보를 담고 있을 뿐이다. 하지만 객체에 포함되는 정보를 모두 가지고 있다.

 

🧈 리액트의 유래

리액트는 페이스북에서 만든 Javascript UI Library다. 리액트가 만들어진 유래는 다음과 같다.

 

예를 들어, 내가 앞으로 클론 코딩하려는 카카오 웹페이지의 탑 메뉴 바의 HTML 코드를 복사했을 때,

더보기 
<html>
  <body>
    <div class="box_gnb" style="display: block;"> <!--메뉴 에니메이션을 위해 class="box_gnb" 추가-->
      <h1 class="tit_logo">
        <a href="/" id="kakaoServiceLogo" class="link_kakao">
          <span class="tit_service">kakao</span>
        </a>
      </h1>
      <nav id="kakaoGnb">
        <h2 class="screen_out">kakao 메인 메뉴</h2>
        <ul class="list_gnb" role="menu">
          <li class="fst">
            <!-- 1뎁스 메뉴 선택시 aria-expanded="false" true 값으로 변경필요 -->
            <a href="/kakao/introduce/vision" class="link_gnb" aria-haspopup="false" aria-expanded="false">
              카카오<span class="line"></span>
            </a>
            <div class="box_sub sub_type1">
              <ul class="list_sub" role="menu">
                <li>
                  <strong class="tit_sub">
                    <a href="/kakao/introduce/vision" class="link_sub" role="menuitem">
                      <span class="txt_g">카카오 소개</span>
                    </a>
                  </strong>
                  <a href="/kakao/introduce/kakaoCulture" class="link_sub">
                    <span class="txt_g">카카오 문화</span>
                  </a>
                  <a href="/kakao/introduce/history" class="link_sub">
                    <span class="txt_g">걸어온 길</span>
                  </a>
                  <a href="/kakao/introduce/ci" class="link_sub">
                    <span class="txt_g">CI</span>
                  </a>
                  <a href="/kakao/introduce/codeOfBusinessEthics" class="link_sub">
                    <span class="txt_g">윤리규정</span>
                  </a>
                  <a href="/kakao/introduce/businessAndHumanRights" class="link_sub">
                    <span class="txt_g">인권경영</span>
                  </a>
                </li>
                <li>
                  <strong class="tit_sub">
                    <a href="/kakao/ai" class="link_sub" role="menuitem">
                      <span class="txt_g">카카오 AI</span>
                    </a>
                  </strong>
                  <a href="/kakao/ai" class="link_sub">
                    <span class="txt_g">소개</span>
                  </a>
                  <a href="/kakao/ai/algorithm" class="link_sub">
                    <span class="txt_g">알고리즘 윤리</span>
                  </a>
                </li>
                <li>
                  <strong class="tit_sub">
                    <a href="/kakao/subsidiaryCompany" class="link_sub" role="menuitem">
                      <span class="txt_g">자회사</span>
                    </a>
                  </strong>
                </li>
                <li>
                  <strong class="tit_sub">
                    <a href="/kakao/advertisingAndAffiliation/advertisement" class="link_sub" role="menuitem">
                        <span class="txt_g">비즈니스</span>
                      </a>
                    </strong>
                  <a href="/kakao/advertisingAndAffiliation/advertisement" class="link_sub">
                      <span class="txt_g">광고 안내</span>
                    </a>
                  <a href="/kakao/advertisingAndAffiliation/affiliationGuide" class="link_sub">
                    <span class="txt_g">제휴 안내</span>
                  </a>
                  <a href="https://business.kakao.com" target="_blank" class="link_sub">
                    <span class="txt_g">Kakao for Business<span class="ico_corp ico_arr"></span></span>
                  </a>
                </li>
                <li>
                  <strong class="tit_sub">
                    <a href="/kakao/prChannel/pressReleases" class="link_sub" role="menuitem">
                      <span class="txt_g">홍보채널</span>
                    </a>
                  </strong>
                  <a href="/kakao/prChannel/pressReleases" class="link_sub">
                    <span class="txt_g">보도자료</span>
                  </a>
                  <a href="/kakao/prChannel/brandVideo" class="link_sub">
                    <span class="txt_g">브랜드 영상</span>
                  </a>
                  <a href="/kakao/prChannel/mediaEvent" class="link_sub">
                      <span class="txt_g">미디어 행사</span>
                    </a>
                  <a href="/kakao/travelDay" class="link_sub">
                    <span class="txt_g">Kakao Travel Day</span>
                  </a>
                </li>
                <li>
                  <strong class="tit_sub">
                    <a href="/kakao/wayToCome" class="link_sub" role="menuitem">
                      <span class="txt_g">오시는 길</span>
                    </a>
                  </strong>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <a href="/ir/managementInformation/shareholderComposition" class="link_gnb" aria-haspopup="false" aria-expanded="false">
              투자정보<span class="line"></span>
            </a>
            <div class="box_sub sub_type2">
              <ul class="list_sub" role="menu">
                <li>
                  <strong class="tit_sub">
                    <a href="/ir/managementInformation/shareholderComposition" class="link_sub" role="menuitem">
                      <span class="txt_g">경영정보</span>
                    </a>
                  </strong>
                  <a href="/ir/managementInformation/shareholderComposition" class="link_sub">
                    <span class="txt_g">주주구성</span>
                  </a>
                  <a href="/ir/managementInformation/boardOfDirectors/configuration" class="link_sub">
                    <span class="txt_g">이사회</span>
                  </a>
                  <a href="/ir/managementInformation/constitution" class="link_sub">
                    <span class="txt_g">정관</span>
                  </a>
                  <a href="/ir/managementInformation/bestPractice" class="link_sub">
                    <span class="txt_g">기업지배구조</span>
                  </a>
                </li>
                <li>
                  <strong class="tit_sub">
                    <a href="/ir/disclosureInformation" class="link_sub" role="menuitem">
                      <span class="txt_g">공시정보</span>
                    </a>
                  </strong>
                </li>
                <li>
                  <strong class="tit_sub">
                    <a href="/ir/stockInformation" class="link_sub" role="menuitem">
                      <span class="txt_g">주가정보</span>
                    </a>
                  </strong>
                </li>
                <li>
                  <strong class="tit_sub">
                    <a href="/ir/financialInformation/consolidatedFinancialStatements" class="link_sub" role="menuitem">
                      <span class="txt_g">재무정보</span>
                    </a>
                  </strong>
                  <a href="/ir/financialInformation/consolidatedFinancialStatements" class="link_sub">
                    <span class="txt_g">연결재무제표</span>
                  </a>
                  <a href="/ir/financialInformation/separateFinancialStatements" class="link_sub">
                    <span class="txt_g">별도재무제표</span>
                  </a>
                  <a href="/ir/financialInformation/creditRating" class="link_sub">
                    <span class="txt_g">신용등급</span>
                  </a>
                </li>
                <li>
                  <strong class="tit_sub">
                    <a href="/ir/calendar/event" class="link_sub" role="menuitem">
                      <span class="txt_g">IR 일정</span>
                    </a>
                  </strong>
                  <a href="/ir/calendar/event" class="link_sub">
                    <span class="txt_g">IR 행사</span>
                  </a>
                  <a href="/ir/calendar/shareholdersMeeting" class="link_sub">
                    <span class="txt_g">주주총회</span>
                  </a>
                  <a href="/ir/calendar/scheduleMeeting" class="link_sub">
                      <span class="txt_g">IR 미팅예약</span>
                    </a>
                  </li>
                <li>
                  <strong class="tit_sub">
                    <a href="/ir/referenceRoom/earningsAnnouncement" class="link_sub" role="menuitem">
                      <span class="txt_g">IR 자료실</span>
                    </a>
                  </strong>
                  <a href="/ir/referenceRoom/earningsAnnouncement" class="link_sub">
                    <span class="txt_g">실적발표</span>
                  </a>
                  <a href="/ir/referenceRoom/regularReports" class="link_sub">
                    <span class="txt_g">정기보고서</span>
                  </a>
                  <a href="/ir/referenceRoom/faq" class="link_sub">
                    <span class="txt_g">IR FAQ</span>
                  </a>
                </li>

                <li>
                  <strong class="tit_sub">
                    <a href="/ir/securitiesCompanyCoverage" class="link_sub" role="menuitem">
                      <span class="txt_g">증권사커버리지</span>
                    </a>
                  </strong>
                </li>
                <li>
                  <strong class="tit_sub">
                    <a href="/ir/dividendInformation" class="link_sub" role="menuitem">
                      <span class="txt_g">공고</span>
                    </a>
                  </strong>
                  <a href="/ir/dividendInformation" class="link_sub">
                    <span class="txt_g">배당정보</span>
                  </a>
                  <a href="/ir/noticeList" class="link_sub">
                    <span class="txt_g">공고사항</span>
                  </a>
                  <a href="/ir/shareholderProposal" class="link_sub">
                    <span class="txt_g">주주제안권</span>
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <a href="/service" class="link_gnb" aria-haspopup="false" aria-expanded="false">
              서비스<span class="line"></span>
            </a>
            <div class="box_sub sub_type3">
              <ul class="list_sub" role="menu">
                <li>
                        <strong class="tit_sub">
                          <a class="link_sub" role="menuitem"><span class="txt_g">포털</span></a>
                        </strong>
                        <a href="/service/Daum" class="link_sub ">
                              <span>Daum</span>
                              </a>
                          <a href="/service/DaumNews" class="link_sub ">
                              <span>Daum 뉴스</span>
                              </a>
                          <a href="/service/DaumSearch" class="link_sub ">
                              <span>Daum 검색</span>
                              </a>
                          </li>
                    <li>
                        <strong class="tit_sub">
                          <a class="link_sub" role="menuitem"><span class="txt_g">커뮤니케이션</span></a>
                        </strong>
                        <a href="/service/KakaoTalk" class="link_sub ">
                              <span>카카오톡</span>
                              </a>
                          <a href="/service/KakaoStory" class="link_sub ">
                              <span>카카오스토리</span>
                              </a>
                          <a href="/service/DaumMail" class="link_sub ">
                              <span>Daum 메일</span>
                              </a>
                          <a href="/service/DaumCafe" class="link_sub ">
                              <span>Daum 카페</span>
                              </a>
                          <a href="/service/Agit" class="link_sub ">
                              <span>아지트</span>
                              </a>
                          <a href="/service/Tistory" class="link_sub ">
                              <span>티스토리</span>
                              </a>
                          <a href="/service/Brunch" class="link_sub ">
                              <span>브런치</span>
                              </a>
                          <a href="/service/MelonAztalk" class="link_sub ">
                              <span>멜론 아지톡</span>
                              </a>
                          <a href="/service/Kakaomail" class="link_sub ">
                              <span>카카오메일</span>
                              </a>
                          </li>
                    <li>
                        <strong class="tit_sub">
                          <a class="link_sub" role="menuitem"><span class="txt_g">콘텐츠</span></a>
                        </strong>
                        <a href="/service/KakaoPage" class="link_sub ">
                              <span>카카오페이지</span>
                              </a>
                          <a href="/service/KakaoTV" class="link_sub ">
                              <span>카카오TV</span>
                              </a>
                          <a href="/service/KakaoMusic" class="link_sub ">
                              <span>카카오뮤직</span>
                              </a>
                          <a href="/service/KakaoFriends" class="link_sub ">
                              <span>카카오프렌즈</span>
                              </a>
                          <a href="/service/DaumWebtoon" class="link_sub ">
                              <span>Daum 웹툰</span>
                              </a>
                          <a href="/service/1boon" class="link_sub ">
                              <span>1boon</span>
                              </a>
                          <a href="/service/Melon" class="link_sub ">
                              <span>멜론</span>
                              </a>
                          <a href="/service/MelonTicket" class="link_sub ">
                              <span>멜론티켓</span>
                              </a>
                          </li>
                    <li>
                        <strong class="tit_sub">
                          <a class="link_sub" role="menuitem"><span class="txt_g">커머스</span></a>
                        </strong>
                        <a href="/service/KakaoTalkGift" class="link_sub ">
                              <span>카카오톡 선물하기</span>
                              </a>
                          <a href="/service/KakaoStyle" class="link_sub ">
                              <span>카카오스타일</span>
                              </a>
                          <a href="/service/KakaoTalkShopping" class="link_sub ">
                              <span>카카오톡 쇼핑하기</span>
                              </a>
                          <a href="/service/ShoppingHow" class="link_sub ">
                              <span>쇼핑하우</span>
                              </a>
                          </li>
                    <li>
                        <strong class="tit_sub">
                          <a class="link_sub" role="menuitem"><span class="txt_g">게임</span></a>
                        </strong>
                        <a href="/service/KakaoGames" class="link_sub ">
                              <span>카카오게임즈</span>
                              </a>
                          </li>
                    <li>
                        <strong class="tit_sub">
                          <a class="link_sub" role="menuitem"><span class="txt_g">핀테크</span></a>
                        </strong>
                        <a href="/service/Kakaopay" class="link_sub ">
                              <span>카카오페이</span>
                              </a>
                          </li>
                    <li>
                        <strong class="tit_sub">
                          <a class="link_sub" role="menuitem"><span class="txt_g">모빌리티&amp;라이프</span></a>
                        </strong>
                        <a href="/service/KakaoT" class="link_sub ">
                              <span>카카오 T</span>
                              </a>
                          <a href="/service/kakaoTdriver" class="link_sub ">
                              <span>카카오 T 대리</span>
                              </a>
                          <a href="/service/KakaoNavi" class="link_sub ">
                              <span>카카오내비</span>
                              </a>
                          <a href="/service/KakaoMap" class="link_sub ">
                              <span>카카오맵</span>
                              </a>
                          <a href="/service/KakaoBus" class="link_sub ">
                              <span>카카오버스</span>
                              </a>
                          <a href="/service/KakaoMetro" class="link_sub ">
                              <span>카카오지하철</span>
                              </a>
                          <a href="/service/KakaoHairshop" class="link_sub ">
                              <span>카카오헤어샵</span>
                              </a>
                          </li>
                    <li>
                        <strong class="tit_sub">
                          <a class="link_sub" role="menuitem"><span class="txt_g">소셜임팩트</span></a>
                        </strong>
                        <a href="/service/Together" class="link_sub ">
                              <span>카카오같이가치</span>
                              </a>
                          </li>
                    </ul>
            </div>
          </li>
          <li>
            <a href="/socialImpact/socialImpactService" class="link_gnb" aria-haspopup="false" aria-expanded="false">
              소셜임팩트<span class="line"></span>
            </a>
            <div class="box_sub sub_type4">
              <ul class="list_sub" role="menu">
                <li>
                  <strong class="tit_sub">
                    <a href="/socialImpact/socialImpactService" class="link_sub" role="menuitem">
                      <span class="txt_g">소셜임팩트 서비스</span>
                    </a>
                  </strong>
                  <a href="/socialImpact/withKakao/socialImpactService/Together" class="link_sub">
                    <span class="txt_g">카카오같이가치</span>
                  </a>
                  <a href="/socialImpact/withKakao/socialImpactService/kakaoMakers" class="link_sub">
                    <span class="txt_g">카카오메이커스</span>
                  </a>
                </li>
                <li>
                  <strong class="tit_sub">
                    <a href="/socialImpact/withKakao" class="link_sub" role="menuitem">
                      <span class="txt_g">사회공헌</span>
                    </a>
                  </strong>
                  <a href="/socialImpact/withKakao/next" class="link_sub">
                    <span class="txt_g">Next</span>
                  </a>
                  <a href="/socialImpact/withKakao/connect" class="link_sub">
                    <span class="txt_g">Connect</span>
                  </a>
                  <a href="/socialImpact/withKakao/krew" class="link_sub">
                    <span class="txt_g">Kakao Krew</span>
                  </a>
                </li>
                <li>
                  <strong class="tit_sub">
                    <a href="/socialImpact/withPartners" class="link_sub" role="menuitem">
                      <span class="txt_g">상생</span>
                    </a>
                  </strong>
                  <a href="/socialImpact/withPartners/winWinCenter" class="link_sub">
                    <span class="txt_g">상생센터</span>
                  </a>
                  <a href="/socialImpact/withPartners/winWinSupporters" class="link_sub">
                    <span class="txt_g">상생서포터즈</span>
                  </a>
                  <a href="/socialImpact/withPartners/kakaoClass" class="link_sub">
                    <span class="txt_g">Kakao 클래스</span>
                  </a>
                </li>
                <li>
                  <strong class="tit_sub">
                    <a href="/socialImpact/withJeju" class="link_sub" role="menuitem">
                      <span class="txt_g">제주지역협력</span>
                    </a>
                  </strong>
                  <a href="/socialImpact/withJeju/youthItEducation" class="link_sub">
                    <span class="txt_g">교육 산학</span>
                  </a>
                  <a href="/socialImpact/withJeju/communityCooperation" class="link_sub">
                    <span class="txt_g">지역 상생</span>
                  </a>
                  <a href="/socialImpact/withJeju/cultureAndExchange" class="link_sub">
                    <span class="txt_g">문화 교류</span>
                  </a>
                  <a href="/socialImpact/withPartners/jejuCreationEconomicInnovationCenter" class="link_sub">
                    <span class="txt_g">제주창조경제혁신센터</span>
                  </a>
                </li>
                <li>
                  <strong class="tit_sub">
                    <a href="/socialImpact/partnersWithKakao" class="link_sub" role="menuitem">
                      <span class="txt_g">Partners with Kakao</span>
                    </a>
                  </strong>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <a href="/customerSupport/" class="link_gnb" aria-haspopup="false" aria-expanded="false">
              고객지원<span class="line"></span>
            </a>
          </li>
          <li>
            <a href="https://careers.kakao.com" target="_blank" class="link_gnb link_talent" role="menuitem">
              인재영입<span class="ico_corp ico_arr"></span>
                <span class="line"></span>
              </a>
          </li>
        </ul>
      </nav>

      <strong class="screen_out">언어지원 메뉴</strong>

      <ul class="list_lang">
        <!-- 선택시 on클래스 및  aria-selected="false" true 값으로 변경필요 -->
        <li class="on">
          <a href="#" class="link_lang">
            <span class="screen_out">선택됨</span>
            KOR
            <span class="screen_out">한국어로 보기</span>
          </a>
        </li>
        <li>
          <a href="?lang=en" class="link_lang">

            ENG
            <span class="screen_out">영어로 보기</span>
          </a>
        </li>
      </ul>
    </div>
  </body>
</html>

매우 복잡하기 때문에 개발자들은 이를 정리 정돈하려는 욕심이 생긴다.

 

그래서 위의 복잡한 코드들을 하나의 태그로 만들 수 있게 했고 그 태그에 사용자 정의 이름을 붙여주었을 때, main에선 그 사용자 정의 이름을 가진 태그만 작성했을 경우, 위 복잡한 코드들과 같은 기능을 하는 것으로 이해한다.

 

이렇게 리액트가 탄생했으며 위에 설명한 사용자 정의 태그를 컴포넌트(Component)라고 한다! 

 

컴포넌트의 장점은

  • 가독성을 획기적으로 높일 수 있다.
  • 태그를 정의했을 때 그 태그를 다른 페이지에서 재사용할 수 있다
  • 버그를 해결하거나 코드를 개선했을 경우 실시간으로 변경된 내용이 업데이트되기 때문에 유지보수가 편리하다.

 

🧈 개발 환경 세팅

리액트 공식 홈페이지에서 Get Started 버튼을 누르면 리액트를 체험해볼 수 있다. Online Playgrounds - CodeSandbox의 경우 온라인으로 리액트 애플리케이션을 구현해볼 수 있다.

 

Add React to a Website의 경우, 기존의 웹사이트에 리액트 기능을 추가하고 싶을 때 사용할 수 있다. 

 

우리가 사용할 개발 환경은 Create a New React App이다. toolchain이란 리액트로 앱을 개발할 때 목표를 달성하기 위해 필요한 여러 가지 개발 환경 드을 모아 한 번에 제공해주는 편리한 도구를 말한다.

 

toolchain이 제공해주는 기능

  • Scaling to many files and components.
  • Using third-party libraries from npm.
  • Detecting common mistakes early.
  • Live-editing CSS and JS in development.
  • Optimizing the output for production.

 

우리가 사용할 toolchain은 create-react-app이며 이 자체가 앱 이름이다. 이 앱의 소스코드는 해당 깃허브에서 확인할 수 있다. 이 깃허브의 리드미에서 create-react-app을 사용할 수 있는 방법을 설명해주는데 우린 npm 방식을 선택할 것이다. npm이란 Node.js를 이용해 만들어진 여러 앱들을 명령어 환경에서 손쉽게 설치할 수 있도록 도와주는 로그를 말한다. 쉽게 말해 Node.js 계의 앱스토어인 것이다!

 

 

저작자표시

'프론트엔드 상식' 카테고리의 다른 글

React Event - React 컴포넌트 이벤트 만들기  (0) 2021.01.12
React State 의 소개와 사용법  (0) 2021.01.11
React Refactoring 및 components 파일로 분리하기  (0) 2021.01.11
HTML 코드를 React 코드로 변환해보기  (0) 2021.01.08
Node.js,npm,create-react-app 설치, React 실행·배포  (0) 2021.01.08

관련글

티스토리툴바