리액트의 구조

리액트에서는 함수로 태그를 커스터마이징 할 수 있다.

import React from 'react';

import './Ribbon.css';

const Ribbon = () => {

  return (

    <main>

      <div id='label' className='ribbon-drop-wrapper'>

        <p id='comment'> <a href='#' id='link'> 더 알아보기</a>하고 무료 배송, 스페셜리스트 지원 등의 혜택을 받으세요. </p>

       

      </div>

    </main>

   

  );

};

export default Ribbon;

이를 토대로 해당태그의 데이터를 json으로 저장하여 각각 다른 내용을 화면에 보여줄 수 있다.(코드 재사용성 UP!)

(예시)

 

https://velog.io/@hye_rin/React-%EC% BB% B4% ED% 8F% AC% EB%84% 8C% ED% 8A% B8-%EC% 9E% AC% EC%82% AC% EC% 9A% A9% ED%95%98% EA% B8% B0

[React] 컴포넌트 재사용하기

 

커스터 마이 지겨운 태그를 사용하여 화면 구성

import React from 'react';

import './App.css';

import './Ribbon.css';

import NavBar from './NavBar';

import Ribbon from './Ribbon';

import Section from './Section';

function App() {

  return (

    <main>

      <NavBar />

      <Ribbon />

      <Section />

    </main>

  );

}

export default App;

각 태그는. js파일에 정의됨

<주의!>

함수로 정의한 태그는 항상 하나의 태그로 묶여있어야 함

useState는 값의 변화를 태그에 곧바로 반영시켜 준다.

 

import React, { useState } from 'react';

const Counter = () => {

  // useState 사용

  const [count, setCount] = useState(0);

  // 이벤트 처리

  const handleIncrement = () => {

    setCount(count + 1);

  };

  const handleDecrement = () => {

    setCount(count - 1);

  };

  // 컴포넌트 및 JSX 렌더링

  return (

    <div>

      <h1>카운터 애플리케이션 (함수형 컴포넌트)</h1>

      <h2>현재 카운트: {count}</h2>

      <button onClick={handleIncrement}>+1</button>

      <button onClick={handleDecrement}>-1</button>

    </div>

  );

};

export default Counter;

예제에서 useState(0)는 초기 상태값으로 0을 갖는 상태를 생성. useState는 배열을 반환하는데, 첫 번째 원소는 현재 상태값이고, 두 번째 원소는 상태를 업데이트하는 함수이다. 위 예시에서 count는 상태값이고, setCount는 상태를 업데이트하는 함수이다.

handleIncrement와 handleDecrement의 이벤트 처리 함수에서 원래 수를 갱신하려면 setCount를 호출하며 새 상태값을 전달한다.