My Develop Log

[노마드코더]React로 영화 웹 서비스 코딩 - 노트정리(1) 본문

React 공부/노마드코더 노트정리

[노마드코더]React로 영화 웹 서비스 코딩 - 노트정리(1)

Developer_Sammy 2022. 12. 7. 12:10

useState를 사용해 컴포넌트에서 바뀌는 값 관리하기

useStated의 결과는 array이고, 첫번째 요소는 Data, 두번째 요소는 데이터를 수정하기 위한 함수이다.

//index.html
// 버튼 클릭시 counter의 수가 1씩 증가하게하는 코드
<!DOCTYPE html>
<html lang="en">

  <head>
    <!-- react, react-dom import하기 -->
    <!-- react-dom은 리액트 element들을 가져다가 html로 바꿔야하기 때문에 사용 -->
    <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>
    <!-- jsx를 사용하기 위해서는 babel을 사용해야한다. -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>

  <body>
    <div id="root"></div>
  </body>

  <script type="text/babel">
    const root = document.getElementById("root");

    let counter = 0;

    // 바뀐 부분만 바꿔줌 이건 리엑트에서 가장 핵심이자 중요****
    //modifier(setCounter)는 자동으로 렌더링해줌. useState(0) -> 0가 default값
    function App() {
      // state 값이 바뀌면, 새로운 값을 가지고 컴포넌트가 리렌더링 됨.
      let [counter, setCounter] = React.useState(0);
      const onClick = () => {
        //setCounter(counter + 1);
       
        //state기반으로 하려면 함수사용.*****
        setCounter((current) => current+1)
        
    };
      return (
        <div>
          <h3>Total clicks: {counter}</h3>
          <button onClick={onClick}>Click me</button>
        </div>
      );
    }

    //render은 사용자에게 보여주는것
    ReactDOM.render(<App />, root);
  </script>
</html>

 

Reference

React로 영화 웹 서비스 코딩 강의 - 노마드코더

'React 공부 > 노마드코더 노트정리' 카테고리의 다른 글

[노마드코더]React로 영화 웹 서비스 코딩 - 노트정리(6)  (0) 2022.12.16
[노마드코더]React로 영화 웹 서비스 코딩 - 노트정리(5)  (0) 2022.12.08
[노마드코더]React로 영화 웹 서비스 코딩 - 노트정리(4)  (0) 2022.12.08
[노마드코더]React로 영화 웹 서비스 코딩 - 노트정리(3)  (0) 2022.12.07
[노마드코더]React로 영화 웹 서비스 코딩 - 노트정리(2)  (0) 2022.12.07
'React 공부/노마드코더 노트정리' Related Articles more