[react] 자동으로 리렌더링 일으키기 (React.useState)

15136 단어 ReactReact

저번에 했던 방식과 달리
자동으로 리렌더링이 일어나게 하는 방법을 공부해보겠다

🟢 state

: 데이터가 저장되는 곳

🖤 js

: js에서는 변수에 저장하는 방식을 많이 쓴다

<script>
    let counter = 0;
    const button = document.getElementById("btn");
    const span = document.querySelector("span");
    function handleClick() {
      counter = counter + 1;
      span.innerText = `Total clicks: ${counter}`;
    }
    button.addEventListener("click", handleClick);
  </script>

위의 코드에서 state는 counter(변수)이다

🖤 react

:react에서는 React.useState()를 사용한다

React.useState(초기값)

const data = React.useState(0);

는 이전 방식의

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

이 부분과 같은 기능을 한다



❗️React.useState()의 특징

배열 방식으로 저장되는데,
배열의 첫번째 값은 초기값
두번째 값은 그 값을 바꾸는 함수

그래서 초기값을 적용할 때 '배열의 n번째 값' 이런 식으로 지정해줘야한다.
ex. {data[0]}



불편하다!!!



그래서 js의 문법을 이용해볼 것이다

const color = ["pink", "black"]
const [favColor, sosoColor] = color;

그러면 favColor은 "pink"고, sosoColor은 "black"이 된다


이 문법을 활용한다면

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

이렇게 간단하게 표현할 수 있다

🟣 modifier을 이용하여 counter의 값 바꾸는 방법

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>
        );
    }

초기값을 0으로 설정하고
onClick()이 발생하면 setCounter가 실행된다 (리렌더링)
그러면 counter의 값이 1 증가한다

modifier 함수를 가지고 state를 변경할 때
컴포넌트가 재생성(리렌더링)된다

📌 react의 가장 큰 특징

데이터가 바뀔 때마다
컴포넌트를 리렌더링하고 UI를 업데이트한다

🟣 state 세팅하는 방법

  1. 직접 값을 설정하기
    (현재 state와 관련없는 값을 새로운 state로 하고 싶은 경우)

    setState(state +1)

  1. 함수 전달하기
    (현재 state에 변화를 주어 새로운 state로 하고 싶은 경우)

    setState(state => state +1)
    : 함수의 첫번째 인자는 현재 state

📌 코드에 적용

const onClick = () => {
	//setCounter(counter + 1);
    setCounter((current) => current + 1);
};

setCounter((current) => current + 1);

전체 코드

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>
    <script type="text/babel">
      const root = document.getElementById("root");
      function App() {
        const [counter, setCounter] = React.useState(0);
        const onClick = () => {
          setCounter((current) => current + 1);
        };
        return (
          <div>
            <h3>Total clicks: {counter}</h3>
            <button onClick={onClick}>Click me</button>
          </div>
        );
      }
      ReactDOM.render(<App />, root);
    </script>
  </body>
</html>
React State / Props
[Javascript] switch 조건문

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage