리액트의 개념과 특징

React

리액트는 현재(2021년1월)기준 현업에서 가장 인기있는 Web/App의 View단을 개발 할 수 있도록
도와주는 가장 인기 있는 라이브러리다

왜 리액트가 라이브러리이고 프레임 워크가 아닐까?
이 부분에서는 라이브러리와 프레임 워크의 차이를 알고 나가야 한다.

---

'토비의 스프링' 이라는 책에는 이렇게 적혀있다.
프레임워크는 단지 미리 만들어 둔 반제품이나,
확장해서 사용할 수 있도록 준비된 추상 라이브러리의 집합이 아니다.
프레임워크가 어떤 것인지 이해하려면 라이브러리와 프레임워크가 어떻게 다른지 알아야 한다.
라이브러리를 사용하는 애플리케이션 코드는 애플리케이션 흐름을 직접 제어한다.
단지 동작하는 중에 필요한 기능이 있을 때 능동적으로 라이브러리를 사용할 뿐이다.
반면에 프레임워크는 거꾸로 애플리케이션 코드가 프레임워크에 의해 사용된다.
프레임워크에는 분명한 제어의 역전 개념이 적용되어 있어야 합니다.
애플리케이션 코드는 프레임워크가 짜놓은 틀에서 수동적으로 동작해야 합니다.

즉 무슨말이냐 어플리케이션의 flow를 누가 제어하고 있느냐에 프레임워크인지 라이브러리 인지
구분할 수 있다는 것이다. 그런 의미로 React는 어플리케이션의 흐름을 강제화 하고 있지 않고

단순히 ui를 렌더링하기 위한 라이브러리 인 것이다 !!

---

리액트를 공부 시작하면서 프레임워크와 라이브러리의 개념까지 알고가게 되다니 .. !! 👍

어쨋든 나는 프론트엔드 개발을 공부하기로 마음 먹은때 부터 가장 관심이 있었던 것이 리액트였으며
그러했던 이유가 우리가 알고있는 어플리케이션을 만들기 위해서는
사용자가 조작하기 위한 UI개발 / 그 UI개발을 컨트롤하는 개발 / 데이터를 처리하는 개발등

총 3가지로 나눌 수 있는데 그것이 MVC패턴,MVVM패턴이다 그 중 React는 사용자가 조작하기 위한
UI를 만드는것을 도와주는 라이브러리라는게 매력을 느꼈으며
또한 생태계가 굉장히 활성화 되어 있어 문제 해결에도 수월하고 많은 지식들이 담겨있어 관심이 생겼다 😎

어쨋든 리액트의 특징으로는 총 4가지로 나눠볼 수가 있다.

1. React는 선언형이다
2. React는 컴포넌트 기반으로써 가독성이 뛰어나며 재사용성이 뛰어나다
3. React는 Virtual DOM 기반으로 가볍다
4. React 컴포넌트는 state와 props를 가진다

아래에서 한개 씩 개념을 짚어보자

---

1. React는 선언형이다

리액트를 선언형의 성격에 알맞게 컴포넌트를 얻기 위해 태그와 jsx문법을 통해 구현된다
즉 jsx를 얻기 위해서 알고리즘에 대한 구현을 따로 하지 않는다.
(예를 들어, document.createElement나 혹은 해당 컴포넌트의 변경사항을 체크하는 알고리즘, 리-렌더링 여부에 대한 알고리즘을 구현하지 않는다.)

이와 같이 선언형의 특성은 화면 설계 라는 초점에만 맞추어서 개발할 수 있도록 도와주며
다른 부분에 대한 스트레스는 최소화 시켜 높은 생산성을 보장한다



2. React는 컴포넌트 기반으로써 가독성이 뛰어나며 재사용성이 뛰어나다

리액트는 컴포넌트라는 개념을 통하여 우리가 반복적으로 작성한 HTML CSS등의 문법들을
간편하게 컴포넌트로 쓸 수가 있다 또한 그 컴포넌트는 더욱 대단한것이 하나의 부품이 되어
만들어만 놓으면 다른 프로젝트나 화면에서도 쓸 수 있어 높은 재사용성을 가지며
반복적이고 복잡한 태그들의 향연을 간단하게 정리해 가독성 또한 보장한다

예)

class Goodboy extends Component {
    render(){
        return(
            <Content>
                <h1>안녕하세요</h1>
            </Content>
        );
    }
}

위와 같이 Goodboy Content라는 컴포넌트를 만들었다.
저 컴포넌트를 우리가 원하는 본문에다가 라고 박아주면 그 안에 설정했던
수많은 태그들의 향연을 저 태그 하나로 줄일 수가 있다 ... 굿..👍



3. React는 Virtual DOM 기반으로 가볍다

웹브라우저와 자바스크립트를 동작이 실행되면 메모리가 할당이 된다
하지만 가상돔은 이 메모리 단에서 컴포넌트에 대한 정보를 생성하고 비교하여 전체 DOM 트리가
업데이트가 필요한 경우 이를 반영하는 방식을 말한다.
만약 실제 DOM에서 하나의 동작마다 바로바로 반영이 된다면 전체 DOM트리가 변경되어
굉장히 많은 리소스가 들어가게 된다 이를 방지해 주는 것이 가상 돔이다.



4. React 컴포넌트는 state와 props를 가진다

State와 Props를 가지는 이유는 UI가 사용자의 동작에 따라 다른 UI나 Action이 필요하기 때문이다.
리액트로 개발을 할 때에는 이 개념을 잘 이해해 놓자
❗어떤 컴포넌트를 만들 때 내부 안의 컴포넌트에는 어떤 State가 있는지 ❗
❗페이지 전체에는 어떤 State가 있는지 파악하고 개발하자❗

---

리액트의 특징과 개념에 대해 정리를 해보았다

개념에 대해서 어느정도 가닥을 잡고 있으면 실제 공부를 진행할 때 더욱 편한거 같다