React?
ReactJS는 대화형 웹 사이트를 개발하는 데 매우 적합한 UI 라이브러리이다. ReactJS의 가상 DOM 기술은 매우 빠른 렌더링 속도를 제공하며, 단방향 데이터 바인딩과 함께 개발자가 UI를 쉽게 구성할 수 있다는 장점이 있다. 이러한 특징은 사용자 경험을 향상시키는 데 큰 역할을 하며, ReactJS는 컴포넌트 기반으로 구현되어 있어서 코드를 재사용하기 쉽고 유지보수성도 높다. 이러한 이유로 ReactJS는 대화형 웹 사이트를 개발하는 데 매우 인기 있는 라이브러리 중 하나라고 한다.
ReactJS와 ValinaJS의 차이
ReactJS는 HTML 코드를 JS로 제어하는데, 이는 렌더링 엔진에 의해서 HTML 코드가 브라우저에서 파싱되고, DOM이 생성되는 것과는 다르다. ReactJS에서는 JavaScript로 HTML 코드를 작성하고, ReactDOM.render() 함수를 사용해서 브라우저의 DOM에 반영한다. 이렇게 하면 코드를 더욱 동적으로 관리할 수 있고, 조건부 렌더링 및 이벤트 처리 등을 보다 쉽게 구현할 수 있다.
💡아래 코드에서 Counter의 개수가 증가하지 않는 이유?
<script src="text/babel">
let counter = 10;
function countUp() {
counter += 1;
}
const Container = () => (
<div>
<h3>Total Click: {counter}</h3>
<button onClick={countUp}>Click me</button>
</div>
);
ReactDOM.render(<Container />, root);
</script>
⇒ 렌더링을 한 번만 해주기 때문. UI를 새로고침 해주지 않는다. countUp() 함수에ReactDOM.render(<Container />, root)코드를 추가해준다.
<script src="text/babel">
let counter = 10;
function countUp() {
counter += 1;
ReactDOM.render(<Container />, root)
}
const Container = () => (
<div>
<h3>Total Click: {counter}</h3>
<button onClick={countUp}>Click me</button>
</div>
);
ReactDOM.render(<Container />, root);
</script>
⇒ countUp 함수에서 ReactDOM.render(<Container />, root) 가 추가되면, Container 함수 전체를 재실행하기에 <div> 내부의 것들이 재생성될것이라 생각하지만, VanillaJS와 다르게 ReactJS는 이전에 렌더링 된 컴포넌트를 확인하고, 변경된 부분만 업데이트 시켜준다.
UseState를 사용한 가독성 상승
ReactJS에서 상태(state)를 관리하기 위해서는 클래스 컴포넌트에서 this.state를 사용하거나, 함수형 컴포넌트에서 useState를 사용한다.
React.useState는 ReactJS Hooks API 중 하나로, 함수형 컴포넌트에서 상태를 관리하기 위한 함수이다. useState를 사용하면 상태 값(state value)과 상태 변경 함수(state updater function)를 배열 형태로 반환한다.
const [state, setState] = React.useState(initialState);
위 코드에서 첫 번째 인자 값 initialState는 상태의 초기값을 설정하는 값이며, 두 번째 인자 값 setState는 상태 값을 변경하는 함수이다.
<script src="text/babel">
function App() {
let [counter, modifier] = React.useState(0);
function onClick() {
modifier(counter + 1);
}
return (
<div>
<h3>Total Click: {counter}</h3>
<button onClick={onClick}>Click me</button>
</div>
);
}
ReactDOM.render(<App/>, root);
</script>
위 코드에서 useState를 사용하여 counter라는 상태 값과 modifier라는 상태 변경 함수를 생성한다. onClick함수에서는 modifier를 사용하여 counter값을 1 증가시킨다.
onClick함수를 호출하면 ReactJS는 자동으로 컴포넌트를 다시 렌더링하며, 클릭한 횟수가 증가함에 따라 자동으로 화면이 업데이트된다.