[React] React 1️⃣

React 1️⃣

리액트는 선언형, 컴포넌트 기반의 JavaScript 라이브러리로 UI를 만들기 위해 사용된다.

JSX라는 문법을 사용해 SPA를 개발할 수 있고, CSR로 작동한다.

리액트는 선언형 프로그래밍이다. 그래서 선언형이 뭔데..?! 🤔

선언형은 무엇을 할 것인지에 포커스를 둔 프로그래밍 방법이다.

반면에 선언형의 반대인 명령형은 어떻게 할 것인지에 중점을 두고 있다.

선언형의 무엇을과 명령형의 어떻게를 실생활에서 빗대어 이야기 해보자면,

맛있는 라면 🍜을 먹는다고 가정할 때 아래와 같은 차이를 보인다고 할 수 있겠다..

선언형 (무엇을 🤔)	컵라면을 먹을래!
명령형 (어떻게 🙄)	뚜껑 형태의 용기를 가진 라면의 뚜껑을 제거한 뒤, 끓인 물을 붓고, 4분간 기다린 뒤 먹을래!

선언형도 컵라면을 먹기 위해서는 명령형의 과정을 거쳐야 하지만, 어떻게를 하기 위한 일련의 과정을 추상화하면 된다.

어떤 컵라면이든 뚜껑 열고, 끓인 물 붓고, 4분 기다리고 먹는 과정은 다 똑같으니까 말이다..ㅎㅎ

이걸 코드로 옮겨보자.

나는 슈피치라는 텍스트를 가진 h1 태그를 화면에 출력하고 싶다.

선언형 (무엇을 🤔)

const shoupeach = () => {
    return (
        <h1>슈피치</h1>
    )
}

JSX 문법으로 슈피치라는 텍스트를 가진 h1 태그를 표현해보았다.

<h1>슈피치</h1>를 통해 선언형 프로그래밍임을 확인할 수 있다!

명령형 (어떻게 🙄)

const h1 = document.createElement('h1');
const text = document.createTextNode('슈피치');
h1.appendChild(text);

JavaScript 문법으로 슈피치라는 텍스트를 가진 h1 태그를 표현해보았다.

h1인 요소를 생성하고, 슈피치라는 요소를 생성한 뒤, h1에 슈피치를 추가해주었다.

이렇게 절차를 따르는 것을 통해 명령형 프로그래밍임을 확인할 수 있다!

확실히 명령형 프로그래밍보다 선언형 프로그래밍이 더 직관적이고 간결함을 알 수 있다. 😉

리액트는 컴포넌트 기반의 프로그래밍이다.

컴포넌트란, 재사용이 가능한 각각의 독립된 모듈을 뜻한다.

중요한 것은 재사용을 할 때 값을 재사용하는 것이 아니라 컴포넌트 내부의 로직을 재사용한다는 것이다!

현재 내 블로그의 스킨을 기준으로 생각한다면,

블로그의 메인에서 다음과 같은 목록이 출력된다.

각 포스트의 목록들은 똑같은 구조를 가지고 있다.

이렇게 재사용이 가능한 단위로 묶어둔 것을 컴포넌트라고 한다.

위의 예시에서 부가정보에도 카테고리, 작성일자, 댓글수도 동일한 정보를 담고있기 때문에 컴포넌트화 시킬 수 있을 것이다. 😉

정리
1. 리액트는 JavaScript 라이브러리다.
2. 리액트는 무엇을 표현할 것인지 작성하는 선언형 프로그래밍이다.
3. 리액트는 재사용이 가능한 단위 구조로 묶는 컴포넌트 기반이다.