React study/React JS로 영화 웹 서비스 만들기
[React] 2-0. State 이해하기
카누가 좋아요
2023. 5. 31. 00:10
React에서의 State
이번 시간에는 React.js 어플에 값이 바뀔 데이터를 담는 법을 알아볼 것이다.
우선, 이전의 코드를 모두 초기화시키고 다음과 같이 기본 세팅만 해 둔다.
<script type="text/babel">
const root = document.getElementById("root");
const Container = () => {
return (
<div>
<h3>Total clicks: 0</h3>
<button>Click me</button>
</div>
);
};
ReactDOM.render(<Container />, root);
</script>📌 State
State는 기본적으로 데이터가 저장되는 곳이다.
vanilla.js 코드에서 counter를 증가(counter = counter + 1)시키고 그것을 UI에 디스플레이(span.innerText) 하고 있는데 이것을 State로 만들 수 있다.
즉, State를 이용하여 값이 바뀌는 데이터들을 제어할 수 있다.
📌 조금 복잡한 방법으로 counter 구현해보기
1. counter 초깃값 세팅하기
. . . . .
let counter = 0; // 주목!
const Container = () => {
return (
<div>
<h3>Total clicks: {counter}</h3> <!--주목!-->
<button>Click me</button>
</div>
);
};
. . . . .- counter의 초깃값은 0으로 설정한다.
- JSX에서 JS 코드가 들어가는 부분은 { }(중괄호)로 묶는다. 따라서 바뀌는 counter의 수를 렌더링 해 주어야 하므로 {counter} 라고 적어주었다.
2. 버튼 클릭 시 호출될 함수 작성하기
function countUp() {
counter = counter + 1;
}- 버튼을 클릭할 때마다 countUP() 함수가 실행되어 counter가 1씩 증가한다.
3. 이벤트 리스너 등록하기
const Container = () => (
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={countUP}>Click me</button> <!--주목!-->
</div>
)- JSX에서 이벤트 리스너를 적어주는 방법은 해당 tag의 속성처럼 적어주면 된다고 하였다. 따라서 button 옆에 onClick을 적어주었다.
- 실행되는 함수는 JS 함수이기 때문에 JS 코드이므로 {countUP}과 같이 적어주었다.
4. UI에도 증가하는 count값 업데이트하기
위와 같은 형식으로만 진행하면 컴포넌트(Container)를 단 한번만 렌더링하고 있게 된다.
어플리케이션을 시작했을 때(페이지를 로드했을 때) counter는 0이다. 그런데 countUP과 Container는 함수이기 때문에 어플리케이션이 실행되었다고 곧바로 같이 실행되지 않는다. 따라서 마지막 ReactDOM.render 코드가 실행된다.(Container 컴포넌트가 React Element가 된다.)
이때 Container에 담긴 counter 값이 0이므로 0이 렌더링되게 된다. 하지만 UI를 업데이트 시켜주는 코드가 없기 때문에 Container를 한번 렌더링하고 끝이다. 이후에 버튼을 계속 클릭하면 onClick 이벤트 리스너로 인해 countUP 함수가 계속 실행되어 counter의 값이 변하기는 하지만 나머지는 페이지 로드 시 단 한번 실행되고 끝인 것이다.
우리가 원하는 것은 Container를 리렌더링해서 바뀐 counter 값을 보여주는 것이다.
즉, ReactDOM.render(<Container />, root) 이 코드를 다시 실행시키고 싶은 것이므로 아래와 같이 코드를 작성할 수 있다.
<script type="text/babel">
const root = document.getElementById("root");
let counter = 0;
function countUp() {
counter = counter + 1;
render(); // 주목!
}
function render() {
ReactDOM.render(<Container />, root); // 주목!
}
const Container = () => {
return (
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={countUp}>Click me</button>
</div>
);
};
render(); // 주목!
</script>- 리액트 컴포넌트를 브라우저의 DOM의 요소로 업데이트하는 코드를 담은 render 함수를 생성해 주었다. 즉, render 함수는 UI를 업데이트 해주는 역할을 하는 것이다.
- render 함수는 앱이 처음 실행될 때랑 버튼을 클릭할 때마다 실행되도록 코드를 작성하여 화면에 나타나는 counter 값이 업데이트 될 수 있도록 하였다. 이제, counter 값이 바뀔 때마다 렌더링이 가능하다.
- Chrome 개발자 도구를 열어 확인해 보면 값이 업데이트될 때 React.js에서는 UI에서 바뀌는 부분만 업데이트를 해준다. 모든 element를 다시 생성하여 보여주는 것이 아니다.
* 변경된 부분만 업데이트 되는 것이 좋은 이유 --> 일반 JS를 쓴 브라우저는 노드 정보가 바뀔 때마다 5단계에 걸쳐 노드트리를 처음부터 다시 생성한다. but React 에서는 가상 DOM을 사용하여 우리 시야에 보이는 부분만 수정해서 보여주고 모든 업뎃이 끝나면 일괄로 합쳐서 실제 DOM에 던져준다.프론트엔드에서는 렌더트리 단계를 얼마나 최적화하는가가 중요하다.
* react 18 버전부터는 createRoot를 사용해야 한다.
const root = ReactDOM.createRoot(document.getElementById("root"));