[react] 리액트 정리 - 1

1. 리액트

Angular, Backbone.js, Derby.js ... 등 많은 자바스크립트 프레임워크들은 주로 MVC(Model - View - Controller) 아키텍쳐, MVVM(Model - View - View Model) 아키텍처를 사용한다. 이런 구조의 공통점은 모델(Model)과 뷰(View)가 있다는 것이다!!

모델은 애플리케이션에서 사용하는 데이터를 관리하는 영역, 뷰는 사용자에게 보이는 부분이다. 프록램이 사용자에게 어떤 작업(ex 버튼 클릭, 텍스트 입력 등)을 받으면 컨트롤러는 모델 데이터를 조회하거나 수정하고, 변경된 사항을 뷰에 반영한다.

 

모델에 있는 값이 변한다 -> 뷰에서도 이를 변화시켜준다. 즉, 일단 첫 화면을 보여주고 변화에 따라 필요한 곳을 바꿔준다. 이 변화(Mutation)이라는게 상당히 복잡한 작업인데 변화를 일으킴에 따라 어떤 DOM을 가져와서 어떤 방식으로 뷰를 업데이트 해줄 지 로직을 정해줘야 한다. 그래서 페이스북에서는(여기서 리액트 만듦!!) 그냥 어떤 데이터가 변할 때마다 어떤 변화를 줄지 고민하는 게 아니라 변화가 생기면 그냥 기존 뷰를 날려버리고 새로 만들어버리자!! 라는 발상을 했다. 그런데 이렇게 그때 그때 새로 뷰를 만들어버리라고 하면 성능적으로 엄청난 문제가 있을것이다(CPU 점유율도 크게 증가하고!!). 그래서 이 방식을 사용하면서 최대한 성능을 아끼고 편안한 사용자 경험을 제공하면서 구현하고자 개발한 친구가 바로 리액트다!!!

 

리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는데 사용한다. 앞서 말한 구조가 MVC,MVW 등인 프레임워크와 달리 리액트는 오직 V(view)만 신경쓰는 라이브러리다.

 

리액트 프로젝트에서 특정 부붐니 어떻게 생길지 정하는 선언체를 컴포넌트라고 한다. 컴포넌트는 재사용이 가능한 API다!!

사용자 화면에 뷰를 보여주는 것을 렌더링이라고 한다. 

 

2. JSX

JSX는 자바스크립트의 확장 문법이며 XML과 비슷하게 생겼다!! 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 일반 자바스크립트 형태의 코드로 변환된다. 예를 들어

function App() {
    return (
        <div>
            Hello <b>react</b>
        </div>
    );
}

이렇게 JSX로 작성된 코드는 function 키워드를 사용하여 컴포넌트를 만들고 프로젝트에서 컴포넌트를 렌더링하면 함수에서 반환하고 있는 내용을 나타낸다. (HTML을 작성한거랑 비슷해 보이면서도 다르다!!) 이 코드는 아래의 코드로 변환된다.

function App() {
    return React.createElement("div", null, "Hello ", React.createElement("b", null, "react"));
}

만약 컴포넌트를 렌더링할 때마다 JSX 코드를 작성하는 것이 아니라 위 코드처럼 매번 React.createElement 함수를 사용해야 한다면 매우 불편할것이다!! JSX를 사용하면 편하게 UI를 렌더링 할 수 있다.

 

3. 컴포넌트

컴포넌트를 선언하는 방식은 두 가지 이다. 하나는 함수형 컴포넌트이고, 또 하나는 클래스형 컴포넌트이다

클래스형 컴포넌트와 함수형 컴포넌트의 차이점은 클래스형 컴포넌트의 경우 state 기능 및 라이프사이클 기능을 사용할 수 있다는 것과 임의 메서드를 정의할 수 있다는 것이다!!

 

클래스형 컴포넌트에서는 render 함수가 꼭 있어야 하고, 그 안에서 보여줘야할 JSX를 반환해야 한다.

 

props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다!! props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다. state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다. props를 바꾸려면 부모 컴포넌트에서 바꿔야한다. 

 

props와 state에 대한 자세한 설명은 다음 포스팅 참고!!!! https://guiyum.tistory.com/93

---

참고 자료

누구든지 하는 리액트 1편: 리액트는 무엇인가 | VELOPERT.LOG

「리액트를 다루는 기술 - 김민준」