YYYEJI

[React] useState() 함수 본문

Web Application Server (WAS)

[React] useState() 함수

YEJI ⍢ 2023. 1. 6. 16:33
728x90

useState() 란?

컴포넌트(component)에서 바뀌는 변수의 값을 관리하는 함수입니다.

 

 

useState()를 사용할 때는 아래와 같은 형태로 사용합니다.

const [data, modifier] = React.useState(initial_value);

 

 

예제를 살펴보겠습니다.

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

data를 React.useState()의 변수로 만들어준 후 콘솔(console)에 출력해보면 

 

 

이렇게 콘솔(console)에 출력됩니다.

 

[undefined, f]

undefined는 초기 값(initial value)이고, f는 값을 수정하기 위한 함수입니다.

 

 

React.useState() 함수에 초기값을 넣어주면 

넣어준 초기값이 출력됩니다.

 

 

보이는 것과 같이 React.useState() 함수는 배열(array)를 return 합니다.

그러면 값을 어떻게 받아올까요?

const value = data[0];
const func = data[1];

이런 식으로 받아올 수도 있지만 다른 방식도 있습니다.

 

 

아래 방식이 React에서 자주 쓰이는 방식입니다.

const [data, modifier] = React.useState(0);

 

data를 어떻게 받아오는지 알았으니 이제는 data를 수정하는 방법에 대해서도 살펴봅시다.

 

 

앞에서도 언급했듯이, React.useState()의 두 번째가 데이터를 수정할 수 있는 함수입니다.

그렇기에 함수를 정의해서 사용해주면 됩니다.

const onClick = () => {
    // modifier(data+1);    
    modifier((current) => current+1); 
}

onClick 함수는 modifier의 function을 정의해주고 있습니다.

onClick 함수가 불릴 때마다 modifier는 data의 값을 하나씩 증가시켜 줍니다.

 

자세한 설명은 아래 코드를 참고해주세요!

 

전체 코드를 살펴봅시다.

<html> 
    <body>
        <div id="root"></div>
    </body>
    <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/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, modifier] = React.useState(0);   
            const onClick = () => {
                // modifier(data+1);   
                modifier((current) => current+1); 
            }
            return (
                <div>
                    <h3>Total clicks: {data}</h3>
                    <button onClick={onClick}> Click me! </button>
                </div>   
            ); 
        }     
        ReactDOM.render(<App/>, root);      
    </script>                                  
</html>

마지막 <script> 부분을 살펴보겠습니다.

 

const root = document.getElementById("root")

<body> tag에서 id="root"인 tag를 가르킵니다.

 

function App() {

App이라는 함수를 정의합니다.

 

const [data, modifier] = React.useState(0);

React.useState() 함수에서 반환하는 값을 data, modifier가 받습니다.

 

const onClick = () => { // modifier(data+1)  modifier((current) => current+1)};

onClick이라는 함수가 불릴 때마다 modifider는 data의 값을 하나씩 증가시킵니다.

modifier(data+1)과 modifier((current) => current+1)는 같은 코드입니다.

 

다른점은 무엇일까요 ?

 

첫 번째 코드는 다른 코드에서 예상치 못한 data의 업데이트가 일어났을 때 혼동이 일어날 수도 있습니다.

두 번째 코드는 현재 state의 데이터를 가지고 업데이트를 시키기 때문에 예상치 못한 data의 업데이트가 일어나더라도 혼동을 방지해 줄 수 있기 때문에 더 안전한 코드라고 할 수 있습니다.

 

 

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

버튼이 눌릴 때마다 {data}의 값이 하나씩 증가됩니다.

 

여기서 react를 사용하는 이유가 나옵니다.

우리는 웹 페이지가 켜졌을 때 render을 한 번만 해줍니다.

 

그런데 클릭이 될 때마다 data의 값이 어떻게 바뀌는 걸까요?

React.js가 자동으로 잘 처리해주고 있습니다.

 

바뀌는 부분만 업데이트해서 웹 브라우저의 UI를 변형시켜주게 되는거죠.

(바뀐 부분을 파악해서 HTML의 코드를 변형시켜 줌)

 

 

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

render는 웹 브라우저가 켜진 처음에만 작동하는 코드입니다.

 

 

◡̈

'Web Application Server (WAS)' 카테고리의 다른 글

[React] JSX expressions must have one parent element 에러  (0) 2023.01.10
[React] event.target.value 란?  (0) 2023.01.06
[React] 화살표 함수(Arrow Function) 만들기  (0) 2023.01.06
[React] 리액트(React)에서 동영상 업로드하기  (0) 2023.01.06
[React] JSX(JavaScript XML)에서 웹 브라우저가 이해할 수 있는 코드로 변환하기  (0) 2023.01.06
'Web Application Server (WAS)' Related Articles more