[React] 시작하기

리액트란?

 

리액트를 사용하는 이유는 무엇일까?

리액트는 웹 및 네이티브 사용자 인터페이스를 위한 라이브러리이다.

 

쉽게 말해 사용자 인터페이스 구축을 위한 인터페이스이다. 더 나아가 사용자 인터페이스를 위한 자바스크립트 라이브러리 이다.

 

브라우저의 자바스크립트를 이용해 웹페이지와 페이지에 표시되는 사용자 인터페이스를 재로딩 없이 업데이트 할 수 있는 이유는 자바스크립트가 웹사이트의 백그라운드에서 실행되며 읽고 조작하는 것이 가능하기 때문이다.

예를들어, 넷플릭스 페이지에서 영화 탭을 클릭하면 자바스크립트는 페이지를 재로딩하거나 나가지 않고도 백그라운드에서 영화 데이터를 가져와 화면을 영화 데이터로 업데이트하고 부드럽게 전환되도록 해준다.

 

 

 

그러나

모두 자바스크립트 덕분이라면 리액트 라이브러리는 왜 필요한걸까?

 

 

자바스크립트만 사용하면

1. 번거롭고 손이 많이 간다.

2. 오류가 발생하기 쉽다. (특히, 복잡한 애플리케이션을 만들 때는 더더욱)

3. 유지나 편집이 힘들다.

는 문제점이 존재한다.

 

따라서 리액트 라이브러리가 더 단순한 심상 모델을 제공하고 복잡한 웹앱과 웹 사용자 인터페이스를 더 쉽게 구축하도록 해주기 때문에 리액트 라이브러리를 사용하는 것이 더 효율적이다.

예를들어, 자바스크립트에서 필요한 명령어들이 리액트에서는 사용할 필요가 없다.
HTML코드 안에 동적 코드가 포함되기 때문이다. 따라서 리액트에서는 HTML코드와 자바스크립트 코드가 석여서 하나의 파일에 작성된다.

 

 

 

리액트로 작업할 때는 코드를 선언형으로 작성한다.

이는 목표로 하는 UI 상태를 정의할 뿐 거쳐야할 단계는 정의하지 않고, 리액트가 과정을 알아서 파악해 필요한 단계를 수정하기 때문이다.

 

이것이 리액트의 작동원리라고 할 수 있다.

 

반면,

자바스크립트는 선언형이 아닌 명령형으로 작성한다. 다시말해 목표가 아니라 거쳐야할 단계를 정의하는 것이다.

단계를 정의하는 것은 훨씬 번거롭고 어렵다. 도중에 단계를 빼먹거나 오류가 끼어들기도 쉽기 때문이다.

 

 

따라서 리액트는 군더더기 없고 작성 코드가 비교적 짧을 뿐만 아니라 UI 업데이트도 알아서 해주기 때문에 자바스크립트 보다는 리액트를 사용하는 것이 좋다.

 

 

728x90

 

 

과제 1

 

리액트를 본격적으로 배우기에 앞서 간단한 과제가 주어졌다.

주어진 코드를 사용하여 4번째 버튼을 만들고 버튼을 눌렀을 때 원하는 배열의 내용이 화면에 보이게 작동하도록 코드를 수정하는 것이다.

 

주어진 코드에서 버튼에 대한 코드를 하나 더 작성해주었고.

className={activeContentIndex === 3 ? "active" : ""} 코드를 이용하여 content배열에서 3번째 배열의 내용만 가져오도록 해주고, onClick을 이용해 새롭게 만든 네번째 버튼을 누르면 3번째 배열의 내용만 화면에 보여지도록 코드를 추가해주었다.

 

아래는 추가한 코드 내용이다.

 

<button

            className={activeContentIndex === 3 ? "active" : ""}

            onClick={() => setActiveContentIndex(3)}

          >

            React vs JS

</button>

 

 

이렇게 코드를 추가해주니 간단하게 버튼과 내용을 추가로 만들 수 있었다.

아래는 새로운 버튼이 추가된 페이지 화면이며 'React vs JS' 버튼이 추가로 만들어진 것을 확인할 수 있다.