React.js 의 State

티스토리 뷰

HTML, CSS, JavaScript/React JS

React.js 의 State

asso 2023. 10. 13. 14:23

[노마드 코더] ReactJS로 영화 웹 서비스 만들기 #3

* 변수를 JSX 에 전달하는 방법 = 변수를 선언하고, 중괄호에 담는다.

<!DOCTYPE html>
<html>
    <body>
      <div id="root"></div>
    </body>
    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
      const root = document.getElementById("root");
      let counter = 0;	// 변수 선언

      const Container = () => (
        <div>
          <h3>Total clicks: { counter }</h3>	// 변수 이름을 중괄호에 담기
          <button>Click me</button>
        </div>
      );
      
      ReactDOM.render( <Container />, root );
    </script>
</html>

* 컴포넌트 리렌더링 방식 2가지

첫번째 방식 >>

1. container를 한번 렌더링하기만 하고, 리렌더링이 되지않아 UI는 업데이트 되지 않는 코드

<!DOCTYPE html>
<html>
    <body>
      <div id="root"></div>
    </body>
    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
      const root = document.getElementById("root");

      let counter = 0;
      function countUp() {
        counter = counter +1;
      }

      const Container = () => (
        <div>
          <h3>Total clicks: { counter }</h3>
          <button onClick={ countUp }>Click me</button>
        </div>
      );
      
      ReactDOM.render( <Container />, root );	// 렌더링 1번
    </script>
</html>

2. countUp 라인이 호출되면 counter가 1 증가하고, 그 뒤에 Container 를 리렌더링 해주면 UI도 업데이트되는 코드

<!DOCTYPE html>
<html>
    <body>
      <div id="root"></div>
    </body>
    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
      const root = document.getElementById("root");

      let counter = 0;                         // 2. 첫번째 렌더링 때 counter 는 0 임
      function countUp() {
        counter = counter +1;                  // 3. counter 증가
        ReactDOM.render( <Container />, root ); // 4. 리렌더링하여 함수 다시 호출 시 증가된 counter가 보여짐
      }

      const Container = () => (
        <div>
          <h3>Total clicks: { counter }</h3>
          <button onClick={ countUp }>Click me</button> 
        </div>                                 // 3. 이벤트리스너가 더해진 버튼 클릭 시 
      );
      
      ReactDOM.render( <Container />, root ); // 1. 어플리케이션 시작 시 Container 렌더링함
    </script>
</html>

- 위 2번 코드와 동작이 동일한 render 함수를 만든 버전

<!DOCTYPE html>
<html>
    <body>
      <div id="root"></div>
    </body>
    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <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 = () => (
        <div>
          <h3>Total clicks: { counter }</h3>
          <button onClick={ countUp }>Click me</button> 
        </div>                                
      );
      
      render(); 
    </script>
</html>

결론 => 위 방법은 데이터를 바꿀 때마다 다시 렌더링하는 것을 잊으면 안되므로 최고의 방식은 아니다.

버튼을 클릭하여 증가하는 counter 값을 render 함수를 다시 호출하지 않고,

자동으로 리렌더링하려면 어떻게 해야 할까

두번째 방식에서 알아보자.

두번째 방식 >>

* React.js 어플 내에서 데이터를 보관하고, 자동으로 리렌더링을 일으킬 수 있는 최고의 방법

- 이벤트리스너를 다 없앤 아무것도 바뀌지 않는 컴포넌트

<!DOCTYPE html>
<html>
    <body>
      <div id="root"></div>
    </body>
    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
      const root = document.getElementById("root");

      function App() {
        return (
          <div>
            <h3>Total clicks: 0</h3>
            <button>Click me</button> 
          </div>                                
        );
      } 

      ReactDOM.render( <App />, root );
    </script>
</html>

- React 어플리케이션 사용 시 데이터 담을 때 변수 사용이 아닌 다른 방법으로,

함수 내에서 return문 전에 상수 생성하고 console 값을 받으면

<!DOCTYPE html>
<html>
    <body>
      <div id="root"></div>
    </body>
    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
      const root = document.getElementById("root");

      function App() {
        const data = React.useState(); // 함수 내에서 return문 전에 상수 생성함
        console.log( data );

        return (
          <div>
            <h3>Total clicks: 0</h3>
            <button>Click me</button> 
          </div>                                
        );
      } 

      ReactDOM.render( <App />, root );
    </script>
</html>

위와 같은 array 가 제공된다.

여기서 undefined 는 data 이고, ƒ 는 data 를 바꿀 때 사용하는 함수를 뜻한다.

React.useState() 함수는 괄호 안에 값을 넣어 초기값 설정도 가능하며,

const data = React.useState(0);
console.log( data );

위 코드 실행 시 console 에 [0, ƒ] 로 보여진다.

즉, 0과 ƒ 두 요소가 만나 countUp 함수를 대신해주고 있다.

<h3>Total clicks: { data[0] }</h3>

위처럼 배열의 값을 받아와도 되지만

아래 코드처럼 배열에서 요소들을 꺼내 이름을 부여해주는 것이 더 편리하다.

<!DOCTYPE html>
<html>
    <body>
      <div id="root"></div>
    </body>
    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
      const root = document.getElementById("root");
 
      function App() {
        const [ counter, modifier ] = React.useState(3);
        
        return (
          <div>
            <h3>Total clicks: { counter }</h3>
            <button>Click me</button> 
          </div>                                
        );
      } 

      ReactDOM.render( <App />, root );
    </script>
</html>

그러면 modifier 을 어떻게 이용하면 counter 의 값을 바꿀 수 있을까

<!DOCTYPE html>
<html>
    <body>
      <div id="root"></div>
    </body>
    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
      const root = document.getElementById("root");
 
      function App() {
        const [ counter, modifier ] = React.useState(0);
        
        const onClick = () => {
          modifier(987897879978979);
        };

        return (
          <div>
            <h3>Total clicks: { counter }</h3>
            <button onClick={ onClick }>Click me</button> 
          </div>                                
        );
      } 

      ReactDOM.render( <App />, root );
    </script>
</html>

modifier 함수에 값을 넣어주면 버튼 클릭 시 리렌더링 함수없이 counter 값이 변경되어 보여진다.

이를 활용하여 counter 증가 값을 업데이트하여 보여주는 코드는 아래와 같다.

<!DOCTYPE html>
<html>
    <body>
      <div id="root"></div>
    </body>
    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
      const root = document.getElementById("root");
 
      function App() {
        const [ counter, setCounter ] = React.useState(0);
        
        const onClick = () => {
          setCounter( counter + 1 );
        };

        return (
          <div>
            <h3>Total clicks: { counter }</h3>
            <button onClick={ onClick }>Click me</button> 
          </div>                                
        );
      } 

      ReactDOM.render( <App />, root );
    </script>
</html>

즉, React.useState() 함수는 counter 같은 데이터를 숫자형 데이터로 건네주고,

그 데이터 값을 바꿀 함수를 함께 줌으로서 데이터가 바뀔 경우에

리렌더링을 직접 하지 않아도 그 함수가 데이터를 바꾸고 컴포넌트도 동시에 리렌더링되어 업데이트가 완료되는 것이다.

또한, React는 업데이트 사이사이 마다 정확히 어떤것이 업데이트 되었는지를 파악하여

HTML 에서 그 부분만 업데이트 해준다는 장점이 있다.

'HTML, CSS, JavaScript > React JS' 카테고리의 다른 글

Vanilla JS 와 React JS 의 차이 (0)	2023.09.21
VScode에서 React 프로젝트 생성하기 (0)	2023.09.18

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/07 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

글 보관함

SSO의 개발공부 블로그

티스토리 뷰