컴포넌트, Props, event, state, CRUD

woom·2023년 6월 9일

React

목록 보기

2/9

🎀 리액트는 사용자 정의 태그를 만드는 기술이다!!! 🎀

리액트는 가상의 돔 트리를 사용해서, 이전 상태와 이후 상태를 비교하여, 바뀐 부분을 찾아내서 자동으로 바꾼다.(Virtual DOM)
출처 : 생활코딩 - WEB - React

🌼 react 기본개념

src폴더 > index.js(react project가 시작하는 코드) > .render() : main함수 > App(애플리케이션 컴포넌트의 시작) > Id('root') : root라는 아이디의 DOM
public(static한 파일을 serve)폴더 > index.html > div id="root"
import App.js > export default App > App이라는 이름의 컴포넌트로 return

📕 컴포넌트란?

리액트로 만들어진 앱을 이루는 최소한의 단위
- 연관된 걸 그룹핑하여 사용 -> 하나의 사용자 정의 태그로 만들고, 그 이름만 기억하면 됨
- 컴포넌트 이름은 항상 대문자로 시작, Return 값으로 html 코드 작성
- UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩

Component vs DOM Tree의 차이
- DOM Tree: 브라우저가 내장되어 있는 표현할 수 있는 목록에서만 가져올 수 있음
- Component: 내장되어있는 태그들을 조합해서 스타일, 동적, 표현을 한번에 만들어 재활용하는 형식

📙 Props

속성값(props)을 이용해서 출력 가능 - 표현식사용 {}
정보가 여러개일 경우 배열로 생성 (반복문 작성 시 키값 필요!!)
- 리액트는 배열의 원소들을 하나씩 꺼내서 배치시켜줌

📒 이벤트 기능 구현

event.preventDefault(); : a태그의 기본 동작을 방지
event.target : event를 유발시킨 태그를 의미(a태그)


import './App.css';

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>
}
function Header(props) {
    console.log('props', props, props.title);
    return <header>
        <h1>
            <a
                href='/'
                onClick={(event) => {
                    event.preventDefault();
                    props.onChangeMode();
                }}>{props.title}</a>
        </h1>
    </header>
}
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>
            <Header
                title="WEB"
                onChangeMode={() => {
                    alert('Header');
                }}></Header>
            <Nav
                topics={topics}
                onChangeMode={(id) => {
                    alert(id);
                }}></Nav>
            <Article title="Welcome" body="Hello, WEB"></Article>
        </div>
    );
}

export default App;

📗 state

prop을 통해서 입력된 데이터를 우리가 만든 컴퍼넌트 함수가 처리해서 return 값을 만들어서 출력
state는 prop과 함께 컴포넌트 함수를 다시 실행해서 새로운 return값을 만듦
- prop은 컴퍼넌트를 사용하는 외부자를 위한 데이터 state는 컴퍼넌트를 만드는 내부자를 위한 데이터

지역변수를 상태로 만드는 방법
- usestate : 배열을 return , 배열의 0번째 원소는 상태의 값을 읽을때 사용, 1번째 데이터는 값을 변경할 때 사용하는 함수
- 상태가 변경되면 앱 다시 실행하여 변경된 상태값으로 다시 렌더링 됨

import {useState} from 'react';

const _mode = useState("WELCOME"); //초기값
    const mode = _mode[0];
    const setMode = _mode[1];

축약해서 아래와 같이 사용!!

const[mode, setMode] = useState('WELCOME')

태그의 속성으로 들어가면 숫자는 문자로 변경됨 → 숫자로 변경
- props.onChangeMode(Number(event.target.id));

🐣 예제

import './App.css';
import {useState} from 'react';

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(Number(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>
}
function Header(props) {
    return <header>
                <h1>
                    <a
                        href='/'
                        onClick={(event) => {
                            event.preventDefault();
                            props.onChangeMode();
                        }}>{props.title}</a>
                </h1>
            </header>
}
function App() {
    const[mode, setMode] = useState('WELCOME');
    const[id, setId] = useState(null);
    const topics = [
        {
            id: 1,
            title: 'html',
            body: 'html is ...'
        }, {
            id: 2,
            title: 'css',
            body: 'css is ...'
        }, {
            id: 3,
            title: 'javascript',
            body: 'javascript is ...'
        }
    ]
    let content = null;
    if(mode === "WELCOME") {
      content = <Article title="Welcome" body="Hello, WEB"></Article>
    } else if (mode === "READ") {
        let title, body =null;
        for(let i=0; i<topics.length; i++){
            if(topics[i].id === id){
                title=topics[i].title;
                body=topics[i].body;
            }
        }
      content = <Article title={title} body={body}></Article>
    }


    return (
        <div>
            <Header
                title="WEB"
                onChangeMode={() => {
                    setMode('WELCOME');
                }}></Header>
            <Nav
                topics={topics}
                onChangeMode={(_id) => {
                    setMode('READ');
                    setId(_id);
                }}></Nav>
            {content}
        </div>
    );
}

export default App;