생활코딩! React 리액트 프로그래밍

egoing - React - event

lshjju 2025. 6. 21. 23:00

헤더 탭하면 알림창 띄우는 이벤트 추가 합니다.

헤더 이벤트 추가 합니다.

export default function App() {
  const topics = [
    { id: 1, title: "html", body: "html is ..." },
    { id: 2, title: "css", body: "css is ..." },
    { id: 3, title: "javascript", body: "javascript is ..." },
  ];
  return (
    <div className="App">
      <Header
        title="WEB"
        onChangeMode={function () {
          alert("Header");
        }}
      ></Header>
      <Nav topics={topics}></Nav>
      <Article title="Welcome" body="Hello, Web"></Article>
    </div>
  );
}

 

Completion

      <Header title="WEB" onChangeMode={function(){
        alert('Header');
      }}></Header>

 

펑션앱 리턴 헤더태그

 

알림창 펑션 추가 합니다.

헤더에 이벤트 추가하고 헤더/앱 코드 정리 합니다.

function Header(props) {
  console.log("props", props.title);
  return (
    <header>
      <h1>
        <a
          href="/"
          onClick={(event) => {
            event.preventDefault();
            props.onChangeMode();
          }}
        >
          {props.title}
        </a>
      </h1>
    </header>
  );
}

 

Completion

      <h1><a href="/" onClick={function(event){
        event.preventDefault();
        props.onChangeMode();
      }}>{props.title}</a></h1>

 

펑션헤더 리턴 에이치원태그

 

의미없는 리로드를 막아야 합니다.

- 프리벤트디폴트로 막습니다.

 

알림창을 띄워야 합니다.

- 온체인지모드 콜합니다.

      <h1><a href="/" onClick={(event)=>{
        event.preventDefault();
        props.onChangeMode();
      }}>{props.title}</a></h1>

 

펑션헤더 리턴 에이치원태그

 

코드 체지방 줄입니다.

- 펑션을 애로우 펑션으로 변경합니다.

export default function App() {
  const topics = [
    { id: 1, title: "html", body: "html is ..." },
    { id: 2, title: "css", body: "css is ..." },
    { id: 3, title: "javascript", body: "javascript is ..." },
  ];
  return (
    <div className="App">
      <Header
        title="WEB"
        onChangeMode={() => {
          alert("Header");
        }}
      ></Header>
      <Nav topics={topics}></Nav>
      <Article title="Welcome" body="Hello, Web"></Article>
    </div>
  );
}

 

Completion

      <Header title="WEB" onChangeMode={()=>{
        alert('Header');
      }}></Header>

 

펑션앱 리턴 헤더태그

 

코드 체지방 줄입니다.

- 펑션을 애로우 펑션으로 변경합니다.

test

 

상단 웹 탭하고 알림창 체크 합니다.

네브 탭하면 알림창에 해당 아이디 데이터바인딩 합니다.

export default function App() {
  const topics = [
    { id: 1, title: "html", body: "html is ..." },
    { id: 2, title: "css", body: "css is ..." },
    { id: 3, title: "javascript", body: "javascript is ..." },
  ];
  return (
    <div className="App">
      <Header
        title="WEB"
        onChangeMode={() => {
          alert("Header");
        }}
      ></Header>
      <Nav
        topics={topics}
        onChangeMode={(id) => {
          alert(id);
        }}
      ></Nav>
      <Article title="Welcome" body="Hello, Web"></Article>
    </div>
  );
}

 

Completion

      <Nav topics={topics} onChangeMode={(id)=>{
        alert(id);
      }}></Nav>

 

펑션앱 리턴 네브태그

 

펑션네브에 토픽스데이터와 온체인지메서드 펑션 전달 합니다.

파라미터로 토픽스아이디를 사용해서 네브 탭하면 해당 항목 아이디를 알림창으로 표시 합니다.

function Nav(props) {
  const lis = [];
  for (let i = 0; i < props.topics.length; i++) {
    let t = props.topics[i];
    lis.push(
      <li key={t.id}>
        <a
          id={t.id}
          href={"/read/" + t.id}
          onClick={(event) => {
            event.preventDefault();
            props.onChangeMode(event.target.id);
          }}
        >
          {t.title}
        </a>
      </li>
    );
  }
  return (
    <nav>
      <ol>{lis}</ol>
    </nav>
  );
}

 

Completion

  const lis = []
  for(let i=0; i<props.topics.length; i++) {
    let t = props.topics[i];
    lis.push(<li key={t.id}>
      <a id={t.id} href={'/read/'+t.id} onClick={event=>{
        event.preventDefault();
        props.onChangeMode(event.target.id);
      }}>{t.title}</a>
    </li>);
  }

 

펑션네브 리턴 위

 

빈 어레이를 만들어 리스트 저장 준비 합니다.

토픽스 어레이를 털어서 리스트 아이템을 생성합니다.

의미없는 리로드 막습니다.

아이디로 펑션콜 합니다.

그러면 펑션앱에서 이 아이디를 파라미터로 받아 이벤트를 실행할 것입니다.

test

 

네브 탭하면 해당 아이디가 뜨는지 체크 합니다.

Completion

import "./styles.css";

function Header(props) {
  console.log("props", props.title);
  return (
    <header>
      <h1>
        <a
          href="/"
          onClick={(event) => {
            event.preventDefault();
            props.onChangeMode();
          }}
        >
          {props.title}
        </a>
      </h1>
    </header>
  );
}

function Nav(props) {
  const lis = [];
  for (let i = 0; i < props.topics.length; i++) {
    let t = props.topics[i];
    lis.push(
      <li key={t.id}>
        <a
          id={t.id}
          href={"/read/" + t.id}
          onClick={(event) => {
            event.preventDefault();
            props.onChangeMode(event.target.id);
          }}
        >
          {t.title}
        </a>
      </li>
    );
  }
  return (
    <nav>
      <ol>{lis}</ol>
    </nav>
  );
}

function Article(props) {
  return (
    <article>
      <h2>{props.title}</h2>
      {props.body}
    </article>
  );
}

export default function App() {
  const topics = [
    { id: 1, title: "html", body: "html is ..." },
    { id: 2, title: "css", body: "css is ..." },
    { id: 3, title: "javascript", body: "javascript is ..." },
  ];
  return (
    <div className="App">
      <Header
        title="WEB"
        onChangeMode={() => {
          alert("Header");
        }}
      ></Header>
      <Nav
        topics={topics}
        onChangeMode={(id) => {
          alert(id);
        }}
      ></Nav>
      <Article title="Welcome" body="Hello, Web"></Article>
    </div>
  );
}

Comment ver

// 애플리케이션의 스타일을 정의하는 CSS 파일을 불러옵니다.
import "./styles.css";

// 애플리케이션의 헤더 부분을 렌더링하는 Header 컴포넌트입니다.
// props로 title을 받아 제목으로 표시하며, 클릭 시 onChangeMode 함수를 호출합니다.
function Header(props) {
  // props로 전달된 title 값을 콘솔에 출력하여 디버깅에 활용합니다.
  console.log("props", props.title);
  return (
    <header>
      <h1>
        <a
          href="/" // 기본적으로 루트 경로로 이동하도록 설정되어 있습니다.
          onClick={(event) => {
            event.preventDefault(); // 기본 링크 이동 동작을 방지합니다.
            props.onChangeMode(); // props로 전달된 onChangeMode 함수를 호출합니다.
          }}
        >
          {props.title} {/* props로 받은 title을 표시합니다. */}
        </a>
      </h1>
    </header>
  );
}

// 내비게이션 메뉴를 렌더링하는 Nav 컴포넌트입니다.
// topics 배열을 받아 각 항목을 리스트로 표시하며, 클릭 시 onChangeMode 함수를 호출합니다.
function Nav(props) {
  const lis = []; // 리스트 아이템들을 저장할 배열입니다.
  // props로 전달된 topics 배열을 순회하며 리스트 아이템을 생성합니다.
  for (let i = 0; i < props.topics.length; i++) {
    let t = props.topics[i]; // 현재 순회 중인 topic 객체입니다.
    lis.push(
      // React 리스트 렌더링 시에는 각 아이템에 고유한 key prop을 할당해야 합니다.
      <li key={t.id}>
        <a
          id={t.id} // 항목의 고유 ID를 HTML 요소의 id 속성으로 할당합니다.
          href={"/read/" + t.id} // 클릭 시 이동할 경로를 정의합니다.
          onClick={(event) => {
            event.preventDefault(); // 기본 링크 이동 동작을 방지합니다.
            // 클릭된 항목의 id를 인자로 하여 onChangeMode 함수를 호출합니다.
            props.onChangeMode(event.target.id);
          }}
        >
          {t.title} {/* topic의 title을 표시합니다. */}
        </a>
      </li>
    );
  }
  return (
    <nav>
      <ol>{lis}</ol> {/* 생성된 리스트 아이템들을 정렬된 목록으로 렌더링합니다. */}
    </nav>
  );
}

// 콘텐츠 본문을 렌더링하는 Article 컴포넌트입니다.
// props로 title과 body를 받아 제목과 내용으로 표시합니다.
function Article(props) {
  return (
    <article>
      <h2>{props.title}</h2> {/* props로 받은 title을 제목으로 표시합니다. */}
      {props.body} {/* props로 받은 body를 내용으로 표시합니다. */}
    </article>
  );
}

// 애플리케이션의 메인 컴포넌트입니다.
// Header, Nav, Article 컴포넌트들을 조합하여 전체 UI를 구성합니다.
export default function App() {
  // 애플리케이션에서 다룰 주제 목록 데이터입니다.
  const topics = [
    { id: 1, title: "html", body: "html is ..." },
    { id: 2, title: "css", body: "css is ..." },
    { id: 3, title: "javascript", body: "javascript is ..." },
  ];
  return (
    <div className="App">
      {/* Header 컴포넌트에 title과 onChangeMode 함수를 전달합니다. */}
      <Header
        title="WEB"
        onChangeMode={() => {
          alert("Header"); // Header 클릭 시 "Header" 메시지를 표시합니다.
        }}
      ></Header>
      {/* Nav 컴포넌트에 topics 데이터와 onChangeMode 함수를 전달합니다. */}
      <Nav
        topics={topics}
        onChangeMode={(id) => {
          alert(id); // Nav 항목 클릭 시 해당 항목의 id를 메시지로 표시합니다.
        }}
      ></Nav>
      {/* Article 컴포넌트에 title과 body 내용을 전달합니다. */}
      <Article title="Welcome" body="Hello, Web"></Article>
    </div>
  );
}

'생활코딩! React 리액트 프로그래밍' 카테고리의 다른 글

egoing - React - create  (0) 2025.06.23
egoing - React - state  (0) 2025.06.23
egoing - React - props - array  (0) 2025.06.21
egoing - React - props  (0) 2025.06.21
egoing - React - component  (0) 2025.06.20

'생활코딩! React 리액트 프로그래밍'의 다른글

  • 현재글egoing - React - event

관련글

티스토리툴바