개발자의 개발 블로그

리액트(React)는 프론트엔드 라이브러리이다.

간단 웹페이지는 프론트엔드 라이브러리를 쓸 필요없이 

HTML과 CSS 그리고 Javascript만 사용하면 만들 수 있다.

하지만, 요즘은 웹 페이지가 아니라 웹 애플리케이션이라고 부른다.

즉, 단순하고 정적인 웹 페이지로 정보만을 읽는 것이 아니라, 

빈번한 사용자와의 상호 작용과 다양하고 웹 서비스를 제공하게 되었다. 

그만큼 관리해줘야 할 것들이 많아졌다. 

프로젝트 규모가 커져서 사용자와의 인터렉션을 많이 하게되면서,

순수 자바스크립트로 DOM을 포함한 어플리케이션 구조를 직접 관리하는 것은 어려워졌다.

그래서, DOM 관리와 상태값 업데이트 관리 등을 최소화하고, 기능적인 개발, 

그리고 사용자 인터페이스(UI)를 구현하는 것에 집중할 수 있도록 하기위해 라이브러리들 혹은 

프레임워크들이 생성되었다.

이렇게 탄생한 보통의 프레임워크는 MVC, MVVM 등의 아키텍처 구조를 지니고 있다.

M = 모델(Model) - 어플리케이션에서 사용하는 데이터를 관리하는 영역

V = 뷰(View) - 유저에게 보여주는 부분.

[React]

하지만, 다른 프레임워크와 다르게 리액트는 오직 뷰만 중점적으로 보여주는 라이브러리이다.

특정 부분이 어떻게 생길지 정하는 선언체를 컴포넌트(Component)라 부른다.

사용자에게 화면에 뷰를 보여주는 것을 렌더링.

리액트를 설치하면, 기본 파일이 생성된다.

App.js가 루트 컴포넌트이다.

이 파일에는 다음과 같이 작성되어 있다.

여기서, render 함수 안에 return 안ㅔ html로 생긴 이것이 바로 JSX 코드이다.

JSX 코드는 리액트 컴포넌트를 만들때 사용하는 언어이다.

.js로 파일을 생성하면, render() 에서 태그가 자동완성 되지 않아 고생이 많았다.

알고봤더니, React에서는 .jsx로 작성해야한다.

이렇게 하면, HTML 자동 완성이 된다.

하지만, 반전이 있다.

HTML 문법이지만, HTML이 아니다. 이것은 자바스크립트이다. 

리액트에서 빌드시, 고쳐준다고 한다. 고맙다.

JSX파일

다만, jsx보다는 js로  주로 사용된다.