REACT란 무엇인가?(REACT 기초)

들어가며

무엇을 공부하거나 알아볼 때 가장 중요한 것은 자신이 배우는 것에 대한 개괄적인 그림을 그리고 들어가는 것이다.

 

React는 뭐라고 정의할 수 있을까? 라이브러리? 인터페이스를 위한 도구?

둘 다 맞는 말이지만 정확하게 표현하면 아래와 같다.

 

사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리
- 리액트 Tutorial 중

 

처음 컴퓨터를 공부하는 사람들을 위해서 조금 풀어서 해석하면 아래와 같다.

 

사용자 인터페이스 (UI, UserInterface 즉, 당신이 보고 있는 이 웹브라우저 환경)을 구축하기 위한

선언적이고 (React는 어떻게가 아니라 무엇을 정의하는 프로그래밍이다)

효율적이고 유연한 JS 라이브러리이다! (그걸 위해 미리 만들어 놓은 JS에서 쓰는 레고블럭들이다!)

라이브러리 : 단순 활용 가능한 도구들의 집합(레고 블록)
프레임워크 : 뼈대와 기반구조를 가지고 있는 기술, 프레임워크는 라이브러리를 포함한다

---

리액트의 특징

리액트는 3가지 특징을 가지고 있는데 각각을 이렇게 부른다.

선언형, 컴포넌트 기반, 재사용성

출처 : https://ko.reactjs.org/tutorial/tutorial.html

이제 이 친구들을 하나하나 간단하게 찍어먹어 보자

---

선언형 프로그래밍

선언형 프로그래밍이 있으면 다른 프로그래밍도 있는가? 있다! 명령형 프로그램이 이 선언형과 비교 가능한 개념이다.

그렇다면, 이 둘이 어떻게 차이점이 있기에 React 친구를 선언형으로 만들었는가?

 

선언형 vs 명령형

 

선언형은 내가 무엇을 할 것인가를 기술하고

명령형 프로그램은 내가 어떤 일을 어떻게 할 것인지를 기술한다.

 

물론 이렇게만 말하면 잘 이해가 가지 않을 수 있다. 그래서 한번 예를 들어보자

[음식점에 가서 자리에 앉아야 되는 상황]
선언형 인간 : 저희 일행(6명) 자리 주세요
명령형 인간 : 저기 주방 앞에 자리 빈 것 같은데 저희 저기로 걸어가서 테이블에 앉을게요;

 

느낌이 조금 오는가?

 

선언형 방식은 내가 지금 원하는 것이 무엇인지만 관심이 있다. 여기에서는 일행이 앉을자리가 필요하다고 외치고 있다.

반면에, 명령형은 내가 어떻게 앉을 것인지에 집중한다. 그러다 보니 그 과정(절차)에 집중한다. 

 

C나 C++, JAVA에 익숙한 사람이라면 늘 절차적으로 프로그래밍을 하게 된다. 

그런 사람들은 당연하게 하나의 의문이 생기는데, '아니 저렇게 "주세요!"만 하면 그 안의 과정은 도대체 어떻게 처리하라고!'라는 의문이 생길 수 있다.

 

당연한 의문이다. 왜냐하면 컴퓨터는 '알아서 해주는 것'이 없으니까

 

이 물음에 대해 나는 선언적 방식의 기저에는 명령형 방식으로 작성된 How가 기술되어있기 때문이다.라고 대답하겠다.

'자리 주세요'라는 것은 매우 추상화되어있는 물음일 뿐이다.

그 예하에는 '내가 저기를 보고', '저 자리 쪽으로 걸어갈 것이며', '너는 지금 빈자리를 확인해서 내게 알려주고' 등등과 같은 문제 해결을 위한 절차가 다 포함되어 있다.

 

즉, 선언적 접근방식 아래에는 명령적 추상화가 존재한다.

이미 다 구성되어있기에 우리는 원하는 것만 말하면 되는 것이다.

---

선언형 프로그래밍 예시

function double (arr) {
  let results = []
  for (let i = 0; i < arr.length; i++){
    results.push(arr[i] * 42)
  }
  return results
}
// 절차형 프로그래밍

function double (arr) {
  return arr.map((item) => item * 42)
}
// 명령형 프로그래밍

내가 다니고 있는 42를 기념하여, 모든 수에 42를 곱한다고 생각해보자

이때 C와 같은 절차형 프로그래밍을 한 사람들은 대부분 위와 같이 함수를 선언할 것이다.

 

하지만, 선언형은 아래처럼 짧게 작성할 수 있다.

저 코드에서도 볼 수 있듯, 위의 배열 선언 그리고 for문 모두가 이미 map을 통해서 구현되어있다고 생각한다.

프로그래머는 그냥 원하는 것만 말하면 원하는 것을 쟁취해낼 수 있는 것이다.

 

그렇다면 왜 이렇게 선언적으로 쓰는 것일까?

누군가에게는 컴퓨터의 작동을 모델로 삼아서 절차를 따라가는 것이 익숙할 텐데, 선언형 프로그래밍을 하는 이유는 매우 간단하다.

이 방법은 프로그램을 기계를 중심으로 하는 것이 아닌 개발자의 두뇌를 중심으로 개발할 수 있게 하기 때문이다.

 

물론 이렇게까지 당신이 이해하려 하지 않아도 당신은 선언형을 이미 쓰고 있다(아마도)

정규표현식이 바로 이 선언형 프로그램이다

(안에서 어떻게 돌아가는지는 모르지만, 내가 원하는 바를 표현식에 맞게 쓰면 알아서 처리해주는 착한 친구)

 

---

컴포넌트란 무엇인가?

컴포넌트는 리액트에서 만든 앱을 이루는 최소한의 단위를 이야기한다.

 

젠가가 잘 작동하기 위해서는(게임을 하기 위해서는) 젠가의 블록들을 하나하나 쌓아서 하나의 탑을 만들어내야 된다. 똑같이 리액트에서도 하나의 앱 혹은 페이지를 만들기 위해서는 이 컴포넌트들을 쌓아 올려야 한다.

 

젠가의 블록들처럼 이 컴포넌트들은 다른 젠가 탑에서도 재사용이 가능하다.

또, 이 젠가 친구들은 props라는 입력을 통해서 각각 다른 색깔 들고 가질 수 있는데, 더 깊은 내용은 다른 페이지에서 깊이 있게 다루겠다.

 

---

재사용성이란 무엇인가?

리액트의 컴포넌트는 젠가의 블록 같다고 이야기했다.

이 젠가의 블록들은 아주 작은 단위로도 만들 수 있고, 또 6개 9개 단위로 작은 탑을 만들어볼 수도 있다.

 

이렇게 젠가를 쪼개고 모으고 집합을 만들면서, 우리는 계속 다양한 곳에서 쓸 수 있다.

이름 목록을 만드는 과정을 한번 살펴보자

 

이름 목록 : 이름 + 사진 + 아바타 + 기본정보 

이런 식으로 하나의 컴포넌트들을 다른 이미 만들어진 컴포넌트들로 묶어서 만들 수 있다.

 

즉, 컴포넌트 한번 잘 만들면 같은 필요가 있는 곳에서 쭉 다시 쓸 수 있다는 것이다.

---

왜 REACT를 공부하는가?

The Most Popular Front-end Frameworks in 2022

위의 이유 때문에, 리액트는 5년 연속 가장 각광받는 Front-end 라이브러리가 되었다.

 

많이 쓰인다는 것은 에러Case에 대한 결과도 많고, 또 지속적으로 관리된다는 뜻이다.

또, 리액트는 Meta(구 페이스북)이라는 든든한 지원군도 있다.

즉, 지금도 유지관리가 좋은데 앞으로도 어느 정도 이 정도의 관리유지가 보장된다는 뜻이다.

 

혹자는 남들이 다 쓰니까 나는 안 쓸래!라고 말할 수 있다. 나는 그럴 수 있다 생각한다.

하지만, 그런 사람은 프로그래밍하면서 가장 중요한 구글이라는 도구 사용에 제한적이고 수많은 에러를 혼자 헤쳐나가는 역경은 스스로 감내해야 될 것이다.

 

많이 쓰는 것에는 다 이유가 있다.

내가 생각하는 라이브러리 사용 요건 1순위이다.