가장 핫한 FE 라이브러리🔥, React 가지고 놀아보기
    • 01
      React 개념 및 개발 환경 설정
    • React는 왜 만들어졌는가?
      React의 특징 및 장점
      React 개발 환경 설정
    • 02
      React 개발 준비 및 기초 문법
    • React Project Setting
      React Project 구조
      전화번호부 따라 쳐보기
      React 기초 문법
    • 03
      React Components
    • Class Component
      Functional Component
    • 04
      Split Component & Styling
    • Split Component
      Split Component - InputBox
      Split Component - PhoneList
      Split Component - PhoneItem
      Component Styling - CSS
      Component Styling - Sass
      Component Styling - styled-components
    • 05
      State & Props
    • State 정의 방법
      State 활용 방법
      Props를 받을 컴포넌트 만들기
      Props 활용 방법
    • 06
      State & Props 전화번호부에 적용하기
    • 전화번호부 데이터 화면에 출력하기
      Input 값 State로 관리하기
      dummyData.js 파일 변경하기
      전화번호부 데이터 추가 함수 만들기
      전화번호부 데이터 삭제 함수 만들기
    • 07
      LifeCycle API
    • LifeCycle API란?
      Component Mount LifeCycle API
      Component Update LifeCycle API
      Component Unmount LifeCycle API
      Counter 프로젝트에 만들어보기
    • 08
      React Hooks
    • useState
      useEffect
    • 09
      React Hooks 전화번호부에 적용하기
    • Custom Hooks으로 Input 값 관리하기
      전화번호부 목록 관리 함수 수정하기
    • 10
      React Redux
    • Redux를 왜 사용할까?
      Redux 용어 정리
      Redux의 3가지 원칙
      Counter에 Redux 적용하기 (1)
      Counter에 Redux 적용하기 (2)
      Counter에 Redux 적용하기 (3)
    • 11
      React Redux 전화번호부에 적용하기
    • 전화번호부에 Redux 적용하기 (1)
      전화번호부에 Redux 적용하기 (2)
      전화번호부에 Redux 적용하기 (3)
    • 12
      Django Server 환경 설정
    • Django Server 환경 설정
    • 13
      Counter 프로젝트 기능 추가 및 Backend와 연결하기
    • 라이브러리 설치 및 디렉토리 구조 변경하기
      CountInput 컴포넌트 만들기 및 Hooks 적용하기
      Axios로 API 연결 및 Redux 코드 변경하기
      App 컴포넌트 변경하기
    • 14
      전화번호부 프로젝트 Backend와 연결하기
    • 라이브러리 설치 및 디렉토리 구조 변경하기
      useInput Custom Hooks 만들기
      Axios로 API 연결 및 Redux 코드 변경하기
      App 컴포넌트 변경하기
    React의 특징 및 장점
    01 React 개념 및 개발 환경 설정
    React의 특징 및 장점

    그렇다면 React를 왜 사용해야 하는지 그 특징과 장점에 대해 알아보겠습니다.



    React의 특징 : Virtual DOM


    앞장에서도 서술했듯이 Virtual DOM을 사용하게 되면 기존의 방식보다 더 높은 성능을 낼 수 있다고 했습니다. 그럼 Virtual DOM은 무엇이고 어떤 역할을 하는지 알아봅시다. 우선 Virtual DOM은 이름 그대로 가상의 DOM입니다. React에서는 인터렉션이 발생하게 되면 바로 브라우저의 DOM에 접근하여 변화를 반영하는 것이 아니라 Virtual DOM에 한 번 렌더링하고, 이를 기존의 DOM과 비교를 하여 변화가 필요한 곳만 렌더링합니다. 쉽게 말해서 바뀐 데이터로 전체 그림을 그려주고 비교를 한 다음, 바뀐 부분만 찾아서 바꿔주는 것입니다. 이런 작업을 통해 실제 브라우저에서 DOM의 조작을 최소화해줄 수 있습니다. DOM의 조작을 최소화하는 것은 곧 성능 문제로 직결되는 것이라 아주 중요한 이슈일 수밖에 없는 것이죠.



    React의 장점 1 : 엄청나게 큰 생태계


    React는 페이스북에서 제작한 웹 애플리케이션입니다. 글로벌 IT 공룡 기업인 페이스북이 만든 것인데 유지보수가 소홀히 될 리가 없는 것이죠. 그에 따라 여러 개발자는 리액트를 활용한 다양한 라이브러리를 개발하여 배포했습니다. 지금 npm 페이지에 들어가서 React를 활용한 라이브러리를 검색하면 엄청나게 많은 결과가 뜰 것입니다. 또, 페이스북 리액트 개발팀도 계속해서 신기능을 업데이트 하고 있습니다. 이전에 비해서 리액트를 활용하여 웹 개발하기가 더 수월해졌고, 그만큼 인기도 더 상승하고 있습니다.



    React의 장점 2 : 글로벌 IT 기업을 포함한 여러 기업에서 사용되는 라이브러리


    쉽게 들어봤을 만한 유명한 회사에서 React를 사용한 웹 애플리케이션을 찾아보는 것은 그리 어려운 문제가 아닙니다. 예로 Airbnb, Twitch, Khan Academy, Facebook, Kakao, Naver 등 여러 기업에서 React를 활발하게 사용하고 있다. 이러한 추세에 맞게 요즘 여러 기업 또는 스타트업에서는 React를 활용하여 웹 애플리케이션을 만들어본 경험이 있는 사람을 많이 뽑습니다. 이제 웹 프론트엔드 개발자로 취업을 하려면 React는 필수겠죠?

    질문하기