[코딩악마]

코딩악마 React 강의 수강 기록

1

export default function Hello () {     
    return 
    <h1> Hello22</h1>;
}

이렇게 하면 컴포넌트를 사용할 수 없는데

export default function Hello () {     
    return <h1> Hello22</h1>;
}

이렇게 하면 된다..
도대체 이유가 뭘까?
바로~
JavaScript의 자동 세미콜론 삽입 규칙!
JavaScript에서는 줄 바꿈 후에 자동으로 세미콜론을 삽입하는데
return 다음에 줄 바꿈을 하게되면 JavaScript엔진은 return 뒤에 아무것도 반환 하지 않은 것으로 해석한다
그래서.. 내가 component를 써도 아무것도 화면에 출력되지 않았던 것이다

하하하하
그래서 함수형 component에서 JSX를 반환할 때는 return 다음에 바로 코드를 작성해야한다!

---

2

근데, 여기서 잠깐!
JSX는 하나의 태그만 사용가능하다, 그렇다면 태그를 두개 이상쓰고 싶을 때는?
div 태그로 감싸준다

export default function Hello () {     
    return (     
        <div>
            <h1> Hello22</h1>
            <World></World>
        </div>
    );
}

---

3

//방법1. 함수를 만들어놓고 함수명만 갖다가 사용
<button onClick={함수명}> Show name </button>

//방법2. 함수를 선언
<buttion onClick={
	()=>{
    	console.log("TOM");
        }
}>Show name</button>

---

4

동작은 같은데 다른 형태로 적을 수 있음

방법1.

import {useState } from "react" ;

export default function State () {
    const [name, setName] = useState('Mike');

    function changeName() {
    	// 여기를 바꾸면, 
        const newName = name === "Mike" ? "Jane" : "Mike";
        console.log(name);
        setName(newName)
    }

    return (
        <div>
            <h1>state</h1>
            <h2>컴포넌트의 속성값</h2>
            <h2 id="name">{name}</h2>
            <button onClick={changeName}>Change</button>
        </div>

    );
}

방법2.

import {useState } from "react" ;

export default function State () {
    const [name, setName] = useState('Mike');

    function changeName() {
    	//여기를 바꾸면 
        setName(name === "Mike" ? "Jane" : "Mike")
    }

    return (
        <div>
            <h1>state</h1>
            <h2>컴포넌트의 속성값</h2>
            <h2 id="name">{name}</h2>
            <button onClick={changeName}>Change</button>
        </div>

    );
}

방법3.

import {useState } from "react" ;

export default function State () {
    const [name, setName] = useState('Mike');

    function changeName() {       
    }

    return (
        <div>
            <h1>state</h1>
            <h2>컴포넌트의 속성값</h2>
            <h2 id="name">{name}</h2>
            <button onClick={() => {
            	setName(name === "Mike" ? "Jane" : "Mike")
            }}>Change</button>
        </div>

    );
}

---

5 콘솔창에 왜 props가 두번 출력?

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import State from './component/State';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <State age={10}/>
    <State age={20}/>
    <State age={30}/>
  </React.StrictMode>
);

//State.js
import {useState } from "react" ;
export default function State (props) {
	//props로 받은 10, 20, 30을 출력해야되는데,
    // 10,10,20,20,30,30 이 출력됨
    console.log(props);
    const [name, setName] = useState('Mike');

    function changeName() {
        const newName = name === "Mike" ? "Jane" : "Mike";
        console.log(name);
        setName(newName)
    }

    return (
        <div>
            <h1>state</h1>
            <h2 id="name">{name}({props.age}세)</h2>
            <button onClick={changeName}>Change</button>
        </div>

    );
}

왜? console창에 props값이 두번씩 출력될까? 궁금해서 찾아보다가
<React.StrictMode> 이것이 원인인 것을 알았다.
<React.StrictMode>는 개발모드에서 일부 메소드를 두 번 호출해서 잠재적인문제를 감지하고 경고를 표시한다고 한다.

이를 해결하려면
방법1. <- 간단한 방법으로 삭제를 선택했다.
<React.StrictMode> 삭제

• 단순히 삭제하면 안된다.
  태그로 대체했다.

방법2.
useEffect 훅 사용해서 컴포넌트가 실제로 마운트되었을 때만 로그 출력하도록 한다.

import {useState, useEffect } from "react" ;

export default function State (props) {
    useEffect(() => {
        console.log(props);
    }, [props]);
    const [name, setName] = useState('Mike');

    function changeName() {
        const newName = name === "Mike" ? "Jane" : "Mike";
        console.log(name);
  		setName(newName)
    }

    return (
        <div>
            <h1>state</h1>
            <h2 id="name">{name}({props.age}세)</h2>
            <button onClick={changeName}>Change</button>
        </div>

    );
}

6 json 서버띄우기

json server는 짧은 시간에 REST API를 구축해주는 라이브러리.
프로토타입을 만들거나, 공부를 위해서 사용하는 용도로 적당함.

#json 서버 설치
$ npm i -g json-server

#data.json을 만들고 서버 실행시키기
json-server --watch ./src/db/data.json --port 3001

7 Router

function App() {
return (
  <div className='App'>
    <BrowserRouter>
      <Header />
      <Routes>
        <Route path="/" element={<DayList />} />
        <Route path="/day/:day" element={<Day />} />
        <Route path="/create_word" element={<CreateWord />} />
        <Route path="/create_day" element={<CreateDay />} />
        <Route path="*" element={<EmptyPage />} />
      </Routes>
    </BrowserRouter>
  </div>
);
}

chatGPT 답변
: 라우팅을 위해 최상위 레벨의 컴포넌트로 사용됩니다.

• BrowserRouter: HTML5의 History API를 사용하여 브라우저의 주소 표시줄과 UI 상태를 동기화합니다. 이 컴포넌트는 애플리케이션의 라우팅 기능을 활성화하는 역할을 합니다.
• 왜 사용하는가?: BrowserRouter를 사용함으로써 리액트 애플리케이션이 SPA 특성을 유지하면서도 URL 기반 라우팅을 가능하게 합니다. 브라우저의 뒤로 가기, 앞으로 가기 버튼도 제대로 동작하게 됩니다.
• 없어도 가능하지 않나?: BrowserRouter 없이는 React Router의 라우팅 기능을 사용할 수 없습니다. 대신에 HashRouter 같은 다른 라우터를 사용할 수 있지만, 이는 URL에 해시(#)를 포함하여 라우팅을 관리합니다.: 모든 페이지에 공통으로 나타나는 헤더 컴포넌트입니다. : 각 URL 경로에 대해 렌더링할 컴포넌트를 지정합니다. }: 루트 경로에서 DayList 컴포넌트를 렌더링합니다. }: 동적 경로에서 Day 컴포넌트를 렌더링합니다. }: /create_word 경로에서 CreateWord 컴포넌트를 렌더링합니다. }: /create_day 경로에서 CreateDay 컴포넌트를 렌더링합니다. }: 위의 경로 외의 모든 경로에서 EmptyPage 컴포넌트를 렌더링합니다. vue에서는 그냥 Router 만 사용했던 것 같아서 꼭 사용해야되는지 궁금했음.