[React.js] React의 기초 및 핵심개념

리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는데 사용된다. 

전통적인 웹사이트는 사용자가 링크나 버튼을 클릭하면 그 요청이 서버에 보내지고 새로운 html페이지가 브라우저로 보내지면서 화면에 보여졌다. 그래서 전통적으로 웹사이트는 약간 무겁고 불편하게 느껴지는 요소들이 있었다. 자바스크립트는 프로그래밍 언어로 개발자들이 브라우저에서 어떤 로직을 실행할 수 있게 해준다. 그리고 이 브라우저의 장점은 사용자들이 보는 것을 조작할 수 있다는 점에 있다.

브라우저에서 자바스크립트는 DOM을 조작할 수 있는데 이 DOM이라는 것을 통해 html의 요소들이 화면에 렌더링된다. 자바스크립트는 그러한 DOM을 조작할 수 있고 새로운 html페이지를 불러오지 않고도 사용자들이 보는 것들을 변경할 수 있다.

리액트는 클라이언트 사이드의 자바스크립트 라이브러리이고 웹사이트를 위한 최신의 반응형 사용자 인터페이스를 구축가능하다. 

리액트로 html의 부분적인 요소를 변경할 수도 있지만 리액트는 보통 그렇게 사용하지는 않는다. 리액트는 웹 어플리케이션의 전체적인 프론트단을 컨트롤하기 위해 사용된다. 예를들어 넷플릭스를 보면 거의 동시에 화면전환이 이루어지고 로딩에 있어 그리 긴 시간이 걸리지 않는다. 넷플릭스에서 nav바의 my list 를 눌러서 이동한다고 가정해보자. 그럴경우 마치 사용자에게는 페이지를 전환한 것처럼 보이지만 리액트에서는 전통적인 웹사이트처럼  실제로 서버로부터 새로운 html을 요청하지 않았다.

대신 화면에 보이는 것들을 변경하기 위해 React.js를 통해 자바스크립트를 사용했을 뿐이다. 그리고 그것은 좀 더 매끄러운 UI와 더 나은 사용자경험을 제공하도록 돕는다. 컴포넌트들이 변경되면서 새롭게 바뀌는 것처럼 보이는 것이다. 리액트는 컴포넌트 기반의 UI 라이브러리이고 "컴포넌트"에 초점을 맞추고 있다. 

컴포넌트는 HTML, CSS, JavaScript가 결합되어 구성 된다.  리액트는 전체 사용자 인터페이스를 구축하기 위해 컴포넌트들을 결합한다. 즉 리액트의 핵심은 컴포넌트이고 이 컴포넌트들을 잘 결합해서 구축하는 것이 중요하다. 컴포넌트들을 만들기 위해서 리액트는 선언적 접근방식을 사용한다. 

리액트는 DOM을 조작하는 방식대로 진행되지 않는다. 그저 어떤 상황에서 어떤 상태(State)가 사용되면 되는지 정의하면 된다.