starting point

다른 온라인 강의/생활코딩- React 2022년 개정판

2 ) 컴포넌트 생성 , props , 이벤트

backend dev 2024. 6. 18.

App.js

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1> <a href="/">WEB</a></h1>
      </header>

        <nav>
            <ol>
                <li><a href="/read/1">html</a></li>
                <li><a href="/read/2">css</a></li>
                <li><a href="/read/3">js</a></li>
            </ol>
        </nav>

        <article>
            <h2> WelCome </h2>
            Hello, Web
        </article>
    </div>
  );
}

export default App;

 

app.js는 싱글 페이지 애플리케이션의 주요 컴포넌트 중 하나입니다.

이 파일은 보통 리액트 애플리케이션의 진입점(entry point) 역할을 하며, 전체 애플리케이션의 구조를 정의하고 다른 컴포넌트들을 조율합니다.

 

여기에 몇 가지 주요 역할이 있습니다:

  1. 컴포넌트 조합 및 렌더링: App.js 파일은 다른 리액트 컴포넌트들을 조합하여 애플리케이션의 구조를 형성합니다. 보통 여기서 페이지 레이아웃, 네비게이션 구성요소, 전역 상태 관리를 위한 Context Provider 등을 포함합니다.
  2. 라우팅 설정: 주로 React Router와 함께 사용되어 페이지 간의 라우팅을 설정합니다. 예를 들어, /, /about, /contact 등의 경로에 따라 다른 컴포넌트를 렌더링하도록 구성할 수 있습니다.
  3. 전역 스타일 적용: 전역적으로 적용되는 스타일 시트(App.css 등)을 App.js에서 불러와 전역 스타일링을 설정할 수 있습니다.
  4. 상태 관리: Redux나 Context API를 사용하여 전역 상태 관리를 구현할 수 있습니다. 이 때 App.js에서 Provider를 사용하여 애플리케이션의 상태를 관리할 수 있습니다.

따라서 App.js는 일반적으로 싱글 페이지 애플리케이션에서 중요한 역할을 담당하는 파일이며, 애플리케이션의 주 컴포넌트로 간주될 수 있습니다.

 

 

 

현재 위의 app.js 코드에서 header, nav, article 부분을 실제코드로 적지않고

컴포넌트로 생성해서 깔끔하게 유지하고싶다면?

import './App.css';

// 사용자 정의 태그를 만들때는 대문자로 시작해야한다.
function Header() {
    return (
        <header className="App-header">
            <h1><a href="/">WEB</a></h1>
        </header>
    );
}

function Nav() {
    return(
        <nav>
            <ol>
                <li><a href="/read/1">html</a></li>
                <li><a href="/read/2">css</a></li>
                <li><a href="/read/3">js</a></li>
            </ol>
        </nav>
    );
}

function Article() {
    return ( 
        <article>
            <h2> WelCome </h2>
            Hello, Web
        </article>
    );
}

function App() {
    return (
        <div className="App">
        <Header></Header>
            <Nav></Nav>
            <Article></Article>
        </div>
    );
}

export default App;

 

함수를 이용하여 컴포넌트화 할 수 있습니다.

 

Header 컴포넌트는 다른곳에서 재사용될 가능성이 있으므로 자바스크립트 파일로 따로 만들어서

컴포넌트 분리를 해주면 좋습니다.

 

// Header.js

import React from 'react';

function Header() {
    return (
        <header className="App-header">
            <h1><a href="/">WEB</a></h1>
        </header>
    );
}

export default Header;

import React from 'react'; 부분은 

className이라는 JSX(Java Script Xml)문법을 사용하기 위함입니다.

 

className 속성은 JSX에서 사용되는 특별한 속성으로, HTML의 class 속성과 동일한 역할을 합니다. 그러나 JSX에서는 class 대신 className을 사용해야 합니다. 이는 JavaScript의 class 키워드와 충돌을 피하기 위함입니다.

 

// App.js

import React from 'react';
import './App.css';
import Header from './Header';

function Nav() {
    return (
        <nav>
            <ol>
                <li><a href="/read/1">html</a></li>
                <li><a href="/read/2">css</a></li>
                <li><a href="/read/3">js</a></li>
            </ol>
        </nav>
    );
}

function Article() {
    return (
        <article>
            <h2> WelCome </h2>
            Hello, Web
        </article>
    );
}

function App() {
    return (
        <div className="App">
            <Header />
            <Nav />
            <Article />
        </div>
    );
}

export default App;

 

Props

위에서 컴포넌트를 생성해서 사용자 정의태그를 만들었는데

리액트는 사용자 정의 태그에서 사용할 속성을 Prop이라고 부릅니다.

[ 사용자정의태그 ? 컴포넌트?

->

리액트에서의 컴포넌트는 기본적으로 사용자 정의 태그로 간주될 수 있습니다. JSX를 사용하여 정의된 컴포넌트는 브라우저에서 직접적으로 이해할 수 있는 HTML의 표준 태그와는 구분됩니다. 하지만 사용자 정의 태그와 마찬가지로, 리액트 컴포넌트는 개발자가 직접 정의하고 제어할 수 있는 커스텀 요소로 볼 수 있습니다.

따라서, "리액트에서 컴포넌트를 만들면 사용자 정의 태그인가?"라는 질문에 대한 답은 일반적으로 "예"입니다. 컴포넌트는 사용자가 정의하고 브라우저가 이해할 수 있도록 만든 커스텀 요소로 취급됩니다.]

 

Prop을 이용하여 컴포넌트의 내부 내용을 바꿀수도있다.

 

 

function App() {
    return (
        <div className="App">
        <Header tile = "REACT"></Header>
            <Nav></Nav>
            <Article></Article>
        </div>
    );
}

Header 컴포넌트에서 title 속성에 값을 REACT로 주고

 

import React from "react";

function Header(props) { // 파티미터 명은 임의로 하면 되지만 props을 많이 쓴다고 한다.
    console.log('props : ',props, props.title);
    return (
        <header className="App-header">
            <h1><a href="/">WEB</a></h1>
        </header>
    );
}

export default Header;

Header 컴포넌트에서 props를 확인해보면

다음과 같은구조로 확인됩니다.

 

 

<h1><a href="/">{props.tile}</a></h1>

다음과 같이 props을 중괄호와 .을 이용한 속성접근으로 컴포넌트로 전달된 속성값을 이용할 수 있습니다.

 

 

 

 

props를 받아서 동적으로 태그생성

import './App.css';
import Header from './Header';
// 사용자 정의 태그를 만들때는 대문자로 시작해야한다.


function Nav(props) {

// JSX 문법을 이용하면 배열에 태그를 저장할수도있다.
// 리스트의 각각의 태그는 key라는 프롭(속성)을 가져야하고 그 값을 유니크해야한다.
    const lis = props.topics.map((p) => (
        <li key={p.id}>
            <a href={'/read/'+p.id}> {p.title}</a>
        </li>
    ))

    return (
        <nav>
            <ol>
                {lis}
            </ol>
        </nav>
    );
}

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

function App() {
    const topics = [
        {id:1, title:'html',body:'html is ...'},
        {id:2, title:'css',body:'cs is ...'},
        {id:3, title:'javascript',body:'javascript is ...'}

    ]
    return (
        <div className="App">
        <Header title = "REACT"></Header>
            <Nav topics={topics}></Nav>
            <Article title="WELCOM" body="HELLO , WEB"></Article>
        </div>
    );
}

export default App;

 

 

이벤트

 

이벤트를 가지는 컴포넌트

import './App.css';
import Header from './Header';
// 사용자 정의 태그를 만들때는 대문자로 시작해야한다.


function Nav(props) {

// JSX 문법을 이용하면 배열에 태그를 저장할수도있다.
// 리스트의 각각의 태그는 key라는 프롭(속성)을 가져야하고 그 값을 유니크해야한다.
    const lis = props.topics.map((p) => (
        <li key={p.id}>
            <a id={p.id} href={'/read/'+p.id} onClick={(event) =>{
                event.preventDefault();
                props.onChangeMode(event.target.id); //event.target은 이벤트가 발생한 태그를 의미
            }}> {p.title}</a>
        </li>
    ))

    return (
        <nav>
            <ol>
                {lis}
            </ol>
        </nav>
    );
}

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

function App() {
    const topics = [
        {id:1, title:'html',body:'html is ...'},
        {id:2, title:'css',body:'cs is ...'},
        {id:3, title:'javascript',body:'javascript is ...'}

    ]
    return (
        <div className="App">
        <Header title = "REACT" onChangeMode = {() =>{
            alert('Header');
        }}></Header>
            <Nav topics={topics} onChangeMode = {(id) =>
            alert(id)
            }></Nav>
            <Article title="WELCOM" body="HELLO , WEB"></Article>
        </div>
    );
}

export default App;

import React from "react";

function Header(props) { // 파티미터 명은 임의로 하면 되지만 props을 많이 쓴다고 한다.
    console.log('props : ',props, props.title);
    return (
        <header className="App-header">
            <h1><a href="/" onClick={(event) =>{
                // 리액트는 이벤트 콜백함수가 실행될때 전달인자로 event객체를 넣어준다.event객체는 이벤트를 제어할수있는 상황에 대한 정보 등이 들어있다.
                event.preventDefault(); // 해당 태그의 기본동작을 못하게한다. a태그의 경우 클릭해도 href로 이동하지않는다.
                props.onChangeMode(); // props로 넘어온 함수도 실행 가능하다.
            }}>{props.title}</a></h1>
        </header>
    );
}

 

 

'다른 온라인 강의 > 생활코딩- React 2022년 개정판' 카테고리의 다른 글

끝) update, delete  (0) 2024.06.18
3) state, create  (0) 2024.06.18
1 ) 리액트 프로젝트 구조  (0) 2024.06.18

댓글

티스토리툴바