React란?
React는 UI들을 독립적이고 재사용항 수 있는 부분으로 나누고 각 부분을 분리하여 개발할 수 있는 컴포넌트로 만들 때 도움을 주는 "라이브러리" 입니다.
리액트는 재사용이 가능한 컴포넌트를 만들고, 이 컴포넌트들이 모여 웹사이트를 구성하게 됩니다. 이 컴포넌트들은 결국 자바스크르비트함수(또는 객체)입니다.
"state"를 세팅하고, 이를 기반으로 화면에 어떻게 보여지기 원하는지를 작성하여 하나의 컴포넌트로 구성합니다.
이후 리액트의 내장된 Component 라이브러리의 기능을 불러온 후, 여기에 내장된 "render" 메소드를 통해 ReactDOM라이브러이에게 rendering될 컴포넌트를 전달합니다. 최종적으로 ReactDOM 라이브러리가 현재 DOM과 전달받은 컴포넌트를 비교하여 변경이 필요한 부분만 변화를 주어 화면에 보여주게 됩니다.
ReactDOM
react-dom은 React에서 DOM에 특화된 메서드를 사용할 수 있도록 API를 제공합니다.
// JSX를 React.createElement가 컴파일 할 수 있도록, React를 직접 사용하지 않더라도 임포트 해줘야 됩니다.
import React from 'react';
import ReactDOM from 'react-dom';
function App() {
return (
<div>
<p>Hello, world!</p>
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('app'),
);React Hooks
Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다. Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는 것입니다.
import React, { useState } from 'react';
function Example() {
// "count"라는 새로운 상태 값을 정의합니다.
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}useState
React는 useState 같은 내장 Hook을 몇 가지 제공합니다. 컴포넌트 간에 상태 관련 로직을 재사용하기 위해 Hook을 직접 만드는 것도 가능합니다. 일단 내장 Hook을 먼저 보겠습니다.
useState를 호출하는 것은 무엇을 하는 걸까요? “state 변수”를 선언할 수 있습니다. 위에 선언한 변수는 count라고 부르지만 banana처럼 아무 이름으로 지어도 됩니다. useState는 클래스 컴포넌트의 this.state가 제공하는 기능과 똑같습니다. 일반적으로 일반 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 사라지지 않습니다.
useState의 인자로 무엇을 넘겨주어야 할까요? useState() Hook의 인자로 넘겨주는 값은 state의 초기 값입니다. 함수 컴포넌트의 state는 클래스와 달리 객체일 필요는 없고, 숫자 타입과 문자 타입을 가질 수 있습니다. 위의 예시는 사용자가 버튼을 얼마나 많이 클릭했는지 알기를 원하므로 0을 해당 state의 초기 값으로 선언했습니다. (2개의 다른 변수를 저장하기를 원한다면 useState()를 두 번 호출해야 합니다.)
useState는 무엇을 반환할까요? state 변수, 해당 변수를 갱신할 수 있는 함수 이 두 가지 쌍을 반환합니다. 이것이 바로 const [count, setCount] = useState()라고 쓰는 이유입니다. 클래스 컴포넌트의 this.state.count와 this.setState와 유사합니다.
선언형 프로그래밍
프로그래밍 패러다임 중 하나입니다.
선선형 프로그래밍은 정확하게 어떤 명령 혹은 단계들이 실행될지 묘사하지 않고, 프로그램에서 원하는 것 목표만을 기술합니다. 즉 목표만 있을 뿐 어떻게 목표를 달성하는지 기술하지 않는 것입니다.
선언형 프로그래밍의 예로는 데이터베이스 Query language(SQL), Regular expression, 설정 파일, 함수형 프로그래밍 등이 있습니다.
관심사의 분리
컴퓨터 프로그램을 구별된 부분으로 분리시키는 디자인 원칙으로, 각 부문은 개개의 관심사를 해결합니다. 각 부문의 관심사를 분리하면 코드를 이해하고 보수 하기 훨씬 더 쉬워집니다. 기존의 웹 개발 방식은 관심사의 분리보단 마크업, 디자인, 로직을 분리하는 기술의 분리에 가까웠습니다. 반면 리액트는 컴포넌트별로 관심사를 분리하여 재사용성과 확장성을 높여서 개발을 더 쉽게 해줍니다.
