코딩하는 김딸기

JSX-카운트함수 본문

카테고리 없음

JSX-카운트함수

김딸기* 2024. 11. 28. 02:58

 

<body>
    <button id="btn">click me</button>
  </body>

  <script>
    const button = document.getElementById("btn"); //id가 "btn"인 button 요소 생성
    function handleClick() {
      //함수생성
      console.log("you clicked me");
    }
    button.addEventListener("click", handleClick); // button 요소에 클릭 이벤트 리스너를 추가->사용자가 버튼을 클릭할 때마다 handleClick 함수가 호출
  </script>

 

addEventListener 메서드를 사용하여 button 요소에 클릭 이벤트 리스너를 추가

->사용자가 버튼을 클릭할 때마다handleClick 함수 호출

 

  <body>
    <span>total clicks:0</span>
    <button id="btn">click me</button>
  </body>

  <script>
    let counter = 0;
    const button = document.getElementById("btn"); //id가 "btn"인 button 요소 생성
    const span = document.querySelector("span"); //태그가 span요소인 span요소 생성
    function handleClick() {
      //함수생성
      console.log("you clicked me");
      counter = counter + 1; //클릭시마다 추가
      span.innerText = `total clicks:${counter}`; //html에서 span태그를 가진 text를 counter로 출력하기
    }
    button.addEventListener("click", handleClick); // button 요소에 클릭 이벤트 리스너를 추가->사용자가 버튼을 클릭할 때마다 handleClick 함수가 호출
  </script>
</html>

1. html생성 2.js에서 가져오기 3. event감지 4. 데이터 업데이트하기 5. html업데이트

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

  <script>
    const root = document.getElementById("root"); //id가 "root"인 HTML 요소를 선택->root 변수에 저장
    // React 컴포넌트가 렌더링될 위치

    const span = React.createElement(
      //span 요소를 생성
      "span", //생성할 HTML 태그
      { id: "sexy-span", style: { color: "red" } }, //span의 속성
      "hello im a span" //span 요소의 텍스트 콘텐츠
    );
    ReactDOM.render(span, root);//span 요소를 root에 렌더링
  </script>

 

  1. const root = document.getElementById('root');
    id가 "root"인 HTML 요소를 선택하고, 해당 요소를 root 변수에 저장합니다. 이 요소는 React 컴포넌트가 렌더링될 위치를 의미합니다.
  2. const span = React.createElement(...)
    • React.createElement를 사용하여 span 요소를 생성합니다.
    • 첫 번째 매개변수 "span"은 생성할 HTML 태그를 의미합니다.
    • 두 번째 매개변수 { id: "sexy-span", style: { color: 'red' } }는 span의 속성을 설정합니다. 여기서 id는 "sexy-span"으로, style은 color: 'red'로 설정되어 있어 텍스트가 빨간색으로 표시됩니다.
    • 세 번째 매개변수 'hello im a span'은 span 요소의 텍스트 콘텐츠입니다.
  3. ReactDOM.render(span, root);
    ReactDOM.render를 사용하여 span 요소를 root에 렌더링합니다. 결과적으로, id가 "root"인 요소 안에 빨간색 텍스트로 "hello im a span"이 표시된 span 요소가 생성됩니다.

요약

이 코드는 React를 사용해 빨간색 span 요소("hello im a span")를 root 요소에 표시합니다.

 

 

 

요소 생성 과정

  1. 루트 요소 선택
    • document.getElementById('root');를 사용하여 id가 "root"인 HTML 요소를 선택하고, 이를 root 변수에 저장합니다.
  2. React 요소 생성
    • React.createElement 함수를 호출하여 span 요소를 생성합니다.
      • 첫 번째 인자: "span"을 전달하여 span 태그를 생성할 것임을 지정합니다.
      • 두 번째 인자: { id: "sexy-span", style: { color: 'red' } }를 전달하여 id를 "sexy-span"으로, style을 { color: 'red' }로 설정합니다.
      • 세 번째 인자: 'hello im a span'을 전달하여 span의 텍스트 내용을 설정합니다.
    • 이 과정을 통해 span 요소가 id와 style, 텍스트가 포함된 React 요소로 생성됩니다.
  3. 요소 렌더링
    • ReactDOM.render(span, root);를 호출하여 span 요소를 root 요소 안에 렌더링합니다. root 요소에 "hello im a span"이라는 빨간색 텍스트가 표시된 span 요소가 추가됩니다.