이번에 React를 처음 접하게 되었는데 이론을 배우는 과정에서 용어적인 부분에서 많은 부족함을 느꼈다. 용어의 해석이 되지 않으니 내가 코드를 쳐도 무엇을 하고 있는지 정확히 알 수가 없어서 이번 글을 통해 개념 및 용어 정리를 해보며 복습을 해보았다.
React란..
React란, 공식 문서에 의하면 "A Javascript library for building user interfaces" 이다. 이 문장을 직역하면 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리이다.
그렇다면 UI와 라이브러리란 무엇일까?
UI
UI는 유저 인터페이스 (user interface)의 줄임말로 사용자와 컴퓨터 프로그램이 서로 상호작용을 하기 위해 중간에서 서로 간에 입력과 출력을 제어해주는 것을 의미한다. 즉, 사용자가 버튼을 누름으로써 웹에서는 이에 걸맞는 반응을 출력하고 웹사이트에서 특정 페이지를 보여줌으로써 또다시 사용자가 반응을 하는 것이다.
Library & Framework
프로그래밍 언어에서 Library란 도서관이 아니라 자주 사용되는 기능을 정리해 모아놓은 것이라고 생각하면 된다. 우리가 도서관에 가면 책장에 수많은 책이 정해진 기준에 따라서 잘 정리되어서 꽂혀 있듯이 프로그래밍 언어에서도 특정 프로그래밍 언어에서 자주 사용되는 기능을 잘 모아놓은 책장 같은 모음집이라고 보면 된다. 
그렇다면 Framework 프레임워크란 무엇일까? 개발을 효율적으로, 편리하게 하기 위해 다른 개발자들이 만들어 둔 코드라는 점에서는 라이브러리와 일맥상통한다. 하지만 이 두가지에는 결정적인 큰 차이점을 가지고 있다.
바로 흐름에 대한 제어 권한이다.
프레임워크는 흐름의 제어 권한을 개발자가 아닌 프레임워크가 갖고 있는 반면에, 라이브러리는 흐름에 대한 제어를 하지 않고 개발자가 필요한 부분만 필요할 때 가져다 사용할 수 있다. 결국 라이브러리는 제어 권한이 개발자에게 있고 프레임워크는 제어권한이 프레임워크 자신에게 있다.
이러한 프레임워크와 라이브러리 중 프론트엔드에서 가장 많이 쓰이는 세 가지가 바로 Angular(앵귤러), Vue(뷰), React(리액트) 이다. 앵귤러와 뷰는 프레임워크이며, 리액트는 라이브러리지만 프레임워크적인 특징을 일부 가지고 있다.
SPA
리액트는 SPA를 쉽고 빠르게 만들 수 있도록 해주는 도구이다. 그렇다면 SPA란 무엇일까? SPA는 Single Page Application의 약자로 하나의 페이지만 존재하는 웹 사이트를 의미한다. 여러개의 페이지가 존재하는 웹사이트 경우, 각 페이지마다 HTML을 구성하고 만들기도 하는데 이는 굉장히 비효율적이고 관리하기도 힘들다. 그러므로 하나의 HTML 틀을 만들어 놓고, 사용자가 특정 페이지를 요청할 때 그 안에 해당 페이지의 내용을 호출해주는 것이 바로 SPA이다.
JSX
A syntax extension to Javascript 공식 문서에 의하면 JSX는 자바스크립트의 확장 문법이라고 명시되어 있다.
이처럼 JSX는 Javascript와 XML/HTML을 합친 것으로 두가지의 특징을 모두 가지고 있다.
const element = <h1>Hello, world!</h1>여기에서 자바스크립트 문법인 대입 연산자 =의 왼쪽에 나오는 자료형 const와 변수명 element를 확인할 수 있다. 또한 HTML의 <h1>의 태그를 사용하여 Hello World!라는 문자열을 값으로 가져왔다.
Component
리액트의 가장 큰 장점 중 하나는 바로 컴포넌트 기반 구조를 가지고 있다는 점이다. 컴포넌트는 리액트의 핵심 개념으로, 리액트에서는 모든 페이지가 컴포넌트로 구성되어 있고, 하나의 컴포넌트는 또 다른 여러개의 컴포넌트의 조합으로 구성될 수 있다.
마치 작은 레고 블록들이 모여서 하나의 완성된 모형이 되는 것과 비슷하다. 따라서 리액트로 개발을 하다 보면 레고 블록을 조립하는 것처럼 컴포넌트를 조합해서 웹사이트를 개발하게 되는 것이다.
다시 말해, 여러 컴포넌트들이 모여서 전체 페이지를 구성하고, 전체 페이지 또한 하나의 컴포넌트가 된다.
Element
Elements are the smallest building blocks of React apps
위 공식 문서의 문장을 번역하면 엘리먼트는 리액트의 앱의 가장 작은 빌딩 블록들이라는 의미이다.
리액트 엘리먼트는 DOM 엘리먼트의 가상 표현으로 화면에서 보이는 것을 기술한다. 리액트 엘리먼트는 자바스크립트 객체 형태로 존재하며 마음대로 변경할 수 없는 불변성을 띈다.
모든 컴포넌트는 createElement() 함수를 통해 엘리먼트로 변환된다.
컴포넌트는 일종의 붕어빵 틀이라면 완성된 붕어빵은 엘리먼트라고 비유할 수 있다.
Props
리액트 컴포넌트의 입력으로 들어가는 props는 속성, 특성이라는 뜻을 가진 property의 준말로 리액트 컴포넌트의 속성을 의미한다.
props는 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체이다.
앞서 말했던 컴포넌트가 붕어빵의 틀, 엘리먼트가 붕어빵이라면, props는 붕어빵의 속재료인 팥, 슈크림이 된다.
이처럼 props는 같은 리액트 컴포넌트에서 눈에 보이는 글자나 색갈 등의 속성을 바꾸고 싶을 때 사용하는 컴포넌트의 속 재료이다.
위의 예시는 에어비앤비 웹사이트의 일부이다. 모양과 글씨체, 아이콘 형식만 보면 모두 같은 것을 알 수 있다. 하지만 사진과 세부 내용, 가격이 전부 다르다.
이것을 리액트 컴포넌트의 관점에서 보면 네 가지 모두 다 같은 컴포넌트에서 생성된 엘리먼트이다. 하지만 왜 각기 다른 이미지와 텍스트 내용을 함유하고 있는 것일까?
이것이 바로 props의 기능이라고 볼 수 있다.
컴포넌트에 어떤 데이터를 전달하고 전달된 데이터에 따라 다른 모습의 엘리먼트를 화면에 렌더링하고 싶을 때, 해당 데이터를 props에 넣어 전달하는 것이다.
State
일반적으로 영단어 state는 상태라는 뜻을 가지고 있다. 리액트에서의 state는 바로 컴포넌트의 상태를 나타낸다. 다시말해, 리액트 컴포넌트의 변경 가능한 데이터를 state라고 부른다. 이 state는 사전에 미리 정해진 것이 아니라 리액트 컴포넌트를 개발하는 각 개발자가 직접 정의해서 사용하게 된다.
state는 변경될 때마다 컴포넌트가 재렌더링 되기 때문에 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다.
//state를 직접 수정(권장하지 않음)
this.state = {
name: 'mikio'
};
//setState 함수를 통한 수정 (권장)
this.setState({
name: 'mikio'
});state 또한 하나의 자바스크립트 객체이다. state의 특징으로는 state는 직접 수정할 수는 있지만 리액트가 수정된 것을 제대로 인지하지 못할 수 있기에 state는 마음대로 수정하게 되면 개발자가 의도한 대로 작동하지 않을 가능성이 있다. 따라서 state를 변경하고자 할 때에는 꼭 setState()라는 함수를 이용해야 한다.
Hook
hook은 갈고리라는 뜻을 갖고 있는데, 보통 프로그래밍에서는 원래 존재하는 어떤 기능에 마치 갈고리를 거는 것처럼 끼어 들어가 같이 수행되는 것을 의미한다. 리액트의 hook도 리액트의 state의 생명주기 기능에 갈고리를 걸어 원하는 시점에 정해진 함수를 실행되도록 만든 것이다.
훅의 이름은 모두 use로 시작되며 개발자가 직접 커스텀 훅을 만들어서 사용할 수도 있다.
useState
가장 대표적인 훅으로 useState()가 있다. 이는 state를 사용하기 위한 훅으로 함수 컴포넌트에서는 기본적으로 state라는 것을 제공하지 않기 때문에 클래스 컴포넌트를 state처럼 사용하고 싶으면 useState()훅을 사용해야 한다.
[변수명, set 함수명] = useState(초깃값);useState()를 호출할 때에는 파라미터로 선언할 state의 초깃값이 들어간다. 이렇게 초깃값을 넣어 useState()를 호출하면 리턴 값으로 배열이 나오는데, 첫번째 항목은 state로 선언된 변수이고 두번째 항목은 해당 state의 set 함수이다.
