광산김가네

[모각코]React Js 시작하기(3)_state에 대해서 본문

TIL(Today I Learn)

[모각코]React Js 시작하기(3)_state에 대해서

어둠의 그림자 2022. 7. 29. 22:11

앞서 2회차동안은 주로 React의 동작방식에 대해서 이해하고

기초되는 JSX에 대해서 배워보았다.

이번 모각코회차에서는 React를 이용해서 그려진 화면의 구성요소인 1)컴포넌트에 대해서 알아보고

2)컴포넌트에서 입력값중 하나인 state에 대해서도 알아보려고한다!

 

0. 컴포넌트란?

: 컴포넌트는 앱을 이루는 최소한의 단위이다.

또한 컴포넌트는 데이터(props)를 입력받아서 view(state) 상태에 따라서 DOM node를 생성해주는 함수이다.

여기서 props, state에 대해서 간략하게 알아보자면, 

props :  컴포넌트간에 주고받는 데이터

state : (컴포넌트 내부에서)다루는 데이터

라고 할수있다.

 

컴포넌트는 크게 함수형 컴포넌트, 클래스형 컴포넌트로도 나눌수있다.

 

1. state

정확히 말하면 이번 강의에서는 state를 리액트스럽게 바꾸는 방법을 배우긴했다.

 

저번 맨처음시간에 클릭할때마다 숫자가 올라가는 웹을 다시금 react로 코드로 만들어 보았다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
<script src = "https://unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0/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>
    }
</script>
</html>

하지만 위의 방식은 값을 바꿀때마다 render 함수를 호출해줘야되고 조금 복잡하다

즉 리렌더링 방식에서 React는 이것보다 더 쉽게 사용될수있다.

 

우선 우리가 원하는건 클릭을할때마다 counter만 올려준다.

즉 Container 컴포넌트 전체가 업데이트 될필요가 없고,

counter 부분만 리렌더링되면 된다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script src = "https://unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0/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(){
        let [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>

위의 코드와 달라진점은 useState()함수를 썼다는점이다.

useState()만을 선언하고 console.log로 출력해보면

두가지 값을 가진 배열임을 알수있다.

첫번째 인자는 초기값, 두번째 인자는 modifier,즉 상태를 변경해줄 함수이다.

이를 이용해서 각각을 counter, setCounter로 선언해주고 우리가 리렌더링 해줄 범위를 조정해준것이다.

 

 

 

저작자표시 비영리 변경금지 (새창열림)

'TIL(Today I Learn)' 카테고리의 다른 글

[모각코]ReactJS 시작하기(5)_props  (0) 2022.08.05
[모각코]ReactJS 시작하기(4)_state 함수,props까지  (0) 2022.08.01
[모각코]React Js 시작하기(2)  (0) 2022.07.25
[Python]파이썬으로 엑셀 데이터 다루기_openpyxl 라이브러리  (0) 2022.07.13
[Flutter]No Directionally Widget found  (0) 2022.05.09
'TIL(Today I Learn)' Related Articles more