실습 중심

한입챌린지

완강챌린지

토이프로젝트

퀴즈

약 3주동안 "한 입 크기로 잘라먹는 리액트(React.js) : 기초부터 실전까지" 강의를 진도표, 미션과 함께 완강하는 챌린지입니다.

이정환 Winterlood

효빈 Hyobin

입문

초급

중급이상

자바스크립트

JavaScript

리액트

React

노드js

Node.js

react.js

한입 챌린지 7기 - React.js

<div><div class="grid-wrapper "><div class="left-action-menu-wrapper css-1jj2wwy action-menu-wrapper--view-mode" tabindex="0"><div class="one-column-grid"><div><div class="box__children-wrapper"><div class="action-menu-wrapper action-menu-wrapper--view-mode"><div class="editor-container text-view-mode" style="display:flex;flex-direction:column;height:auto;max-height:100%;min-height:auto;border-radius:8px"><div data-testid="editor-content-container" class="editor-content-container markdown-body" style="background-color:rgb(255, 255, 255);cursor:auto"><div role="textbox" translate="yes" class="tiptap ProseMirror" tabindex="-1"><h1 style="text-align:left">한입 챌린지 7기 - React.js</h1></div></div></div></div></div></div></div></div></div><div class="grid-wrapper "><div class="left-action-menu-wrapper css-1jj2wwy action-menu-wrapper--view-mode" tabindex="0"><div class="one-column-grid"><div class="action-menu-wrapper action-menu-wrapper--view-mode"><div class="info-box info-box--infgreen" aria-labelledby="info-box__editable-aria"><div class="info-box__icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM404.4 276.7L324.4 404.7C320.2 411.4 313 415.6 305.1 416C297.2 416.4 289.6 412.8 284.9 406.4L236.9 342.4C228.9 331.8 231.1 316.8 241.7 308.8C252.3 300.8 267.3 303 275.3 313.6L302.3 349.6L363.7 251.3C370.7 240.1 385.5 236.6 396.8 243.7C408.1 250.8 411.5 265.5 404.4 276.8z"></path></svg></div><div class="editor-container text-view-mode" style="display:flex;flex-direction:column;height:100%;max-height:100%;min-height:24px;border-radius:8px"><div data-testid="editor-content-container" class="editor-content-container markdown-body" style="background-color:rgb(255, 255, 255);cursor:auto"><div role="textbox" translate="yes" class="tiptap ProseMirror" tabindex="-1"><p>본 챌린지는 <strong>한 입 크기로 잘라먹는 리액트(React.js) : 기초부터 실전까지</strong> 강의를 수강하시는 분들을 위한 프로그램입니다. (자바스크립트, 타입스크립트, Next.js 신청은 별도로 제공됩니다.)</p></div></div></div></div></div></div></div></div><div class="grid-wrapper "><div class="left-action-menu-wrapper css-1jj2wwy action-menu-wrapper--view-mode" tabindex="0"><div class="two-column-grid"><div><div class="box__children-wrapper"><div class="action-menu-wrapper action-menu-wrapper--view-mode"><div class="editor-container text-view-mode" style="display:flex;flex-direction:column;height:auto;max-height:100%;min-height:auto;border-radius:8px"><div data-testid="editor-content-container" class="editor-content-container markdown-body" style="background-color:rgb(255, 255, 255);cursor:auto"><div role="textbox" translate="yes" class="tiptap ProseMirror" tabindex="0"><div class="react-renderer node-resizableMedia ProseMirror-selectednode" contenteditable="false" draggable="true"><div as="div" class="resizable-media-node-view  " aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-8txgnr2bi-dropdown" id="mantine-8txgnr2bi-target" data-node-view-wrapper="" style="white-space:normal"><a data-drag-handle="true" href="https:// https://inf.run/Z8Fi1" target="_blank" rel="noopener noreferrer nofollow"><img class="resizable-media-img" src="https://cdn.inflearn.com/public/files/courses/339810/builder/01kbc0bzzsb5f8grczwhntdxnv?w=960" title="image (1).png" alt="image (1)" width="329" height="213"></a><div class="resize-media-handle resize-media-handle--left" title="왼쪽 리사이즈 핸들바" aria-label="왼쪽 리사이즈 핸들바"></div><div class="resize-media-handle resize-media-handle--right" title="오른쪽 리사이즈 핸들바" aria-label="오른쪽 리사이즈 핸들바"></div></div></div></div></div></div></div></div></div><div><div class="box__children-wrapper"><div class="action-menu-wrapper action-menu-wrapper--view-mode"><div class="editor-container text-view-mode" style="display:flex;flex-direction:column;height:auto;max-height:100%;min-height:auto;border-radius:8px"><div data-testid="editor-content-container" class="editor-content-container markdown-body" style="background-color:rgb(255, 255, 255);cursor:auto"><div role="textbox" translate="yes" class="tiptap ProseMirror" tabindex="0"><p>[한입 챌린지 7기 - React.js]를 신청하는 챌린지 페이지입니다.</p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://inf.run/fkSig"><span style="color:rgb(0, 167, 96)"><strong>한 입 크기로 잘라먹는 리액트(React.js) : 기초부터 실전까지</strong></span></a> 강의를 구매하신 분들만 참가하실 수 있습니다.</p><p><strong>강의 링크 : </strong><a target="_blank" rel="noopener noreferrer nofollow" href="https://inf.run/fkSig">https://inf.run/fkSig</a></p><p><span style="color:rgb(26, 27, 30)">커뮤니티 링크 : </span><a target="_blank" rel="noopener noreferrer nofollow" href="https://link.onebitefe.com/r/4jy7ac"><u>https://link.onebitefe.com/r/4jy7ac</u></a></p></div></div></div></div></div></div></div></div></div><div class="grid-wrapper "><div class="left-action-menu-wrapper css-1jj2wwy action-menu-wrapper--view-mode" tabindex="0"><div class="one-column-grid"><div class="separator-element"><div class="separator-element__line"></div></div></div></div></div><div class="grid-wrapper "><div class="left-action-menu-wrapper css-1jj2wwy action-menu-wrapper--view-mode" tabindex="0"><div class="one-column-grid"><div><div class="box__children-wrapper"><div class="action-menu-wrapper action-menu-wrapper--view-mode"><div class="editor-container text-view-mode" style="display:flex;flex-direction:column;height:auto;max-height:100%;min-height:auto;border-radius:8px"><div data-testid="editor-content-container" class="editor-content-container markdown-body" style="background-color:rgb(255, 255, 255);cursor:auto"><div role="textbox" translate="yes" class="tiptap ProseMirror" tabindex="0"><h3 style="text-align:left">[한입 챌린지 7기] 다른 강의로 신청하기</h3></div></div></div></div></div></div></div></div></div><div class="grid-wrapper "><div class="left-action-menu-wrapper css-1jj2wwy action-menu-wrapper--view-mode" tabindex="0"><div class="three-column-grid"><div><div class="box__children-wrapper"><div class="action-menu-wrapper action-menu-wrapper--view-mode"><div class="editor-container text-view-mode" style="display:flex;flex-direction:column;height:auto;max-height:100%;min-height:auto;border-radius:8px"><div data-testid="editor-content-container" class="editor-content-container markdown-body" style="background-color:rgb(255, 255, 255);cursor:auto"><div role="textbox" translate="yes" class="tiptap ProseMirror" tabindex="0"><div class="react-renderer node-resizableMedia ProseMirror-selectednode" contenteditable="false" draggable="true"><div as="div" class="resizable-media-node-view  " aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-gd37iw4f8-dropdown" id="mantine-gd37iw4f8-target" data-node-view-wrapper="" style="white-space:normal"><img data-drag-handle="true" class="resizable-media-img" src="https://cdn.inflearn.com/public/files/courses/339810/builder/01kbc106xrn13t9t6xnddqyq26?w=960" title="image (2).png" alt="image (2)" width="213" height="138"><div class="resize-media-handle resize-media-handle--left" title="왼쪽 리사이즈 핸들바" aria-label="왼쪽 리사이즈 핸들바"></div><div class="resize-media-handle resize-media-handle--right" title="오른쪽 리사이즈 핸들바" aria-label="오른쪽 리사이즈 핸들바"></div></div></div><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://inf.run/1H4aE"><strong>[한입 챌린지-타입스크립트] 신청</strong></a></p></div></div></div></div></div></div><div><div class="box__children-wrapper"><div class="action-menu-wrapper action-menu-wrapper--view-mode"><div class="editor-container text-view-mode" style="display:flex;flex-direction:column;height:auto;max-height:100%;min-height:auto;border-radius:8px"><div data-testid="editor-content-container" class="editor-content-container markdown-body" style="background-color:rgb(255, 255, 255);cursor:auto"><div role="textbox" translate="yes" class="tiptap ProseMirror" tabindex="0"><div class="react-renderer node-resizableMedia ProseMirror-selectednode" contenteditable="false" draggable="true"><div as="div" class="resizable-media-node-view  " aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-8jegmonl4-dropdown" id="mantine-8jegmonl4-target" data-node-view-wrapper="" style="white-space:normal"><img data-drag-handle="true" class="resizable-media-img" src="https://cdn.inflearn.com/public/files/courses/339810/builder/01kbc10ramb49v7ts7hkvd56h0?w=960" title="image.png" alt="image" width="213" height="138"><div class="resize-media-handle resize-media-handle--left" title="왼쪽 리사이즈 핸들바" aria-label="왼쪽 리사이즈 핸들바"></div><div class="resize-media-handle resize-media-handle--right" title="오른쪽 리사이즈 핸들바" aria-label="오른쪽 리사이즈 핸들바"></div></div></div><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://inf.run/ZrzmY"><strong>[한입 챌린지-자바스크립트] 신청</strong></a></p></div></div></div></div></div></div><div><div class="box__children-wrapper"><div class="action-menu-wrapper action-menu-wrapper--view-mode"><div class="editor-container text-view-mode" style="display:flex;flex-direction:column;height:auto;max-height:100%;min-height:auto;border-radius:8px"><div data-testid="editor-content-container" class="editor-content-container markdown-body" style="background-color:rgb(255, 255, 255);cursor:auto"><div role="textbox" translate="yes" class="tiptap ProseMirror" tabindex="0"><div class="react-renderer node-resizableMedia ProseMirror-selectednode" contenteditable="false" draggable="true"><div as="div" class="resizable-media-node-view  " aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-dxid3t9ma-dropdown" id="mantine-dxid3t9ma-target" data-node-view-wrapper="" style="white-space:normal"><img data-drag-handle="true" class="resizable-media-img" src="https://cdn.inflearn.com/public/files/courses/339810/builder/01kbc10w1qme95gwe51kbb8tc5?w=960" title="image (3).png" alt="image (3)" width="213" height="138"><div class="resize-media-handle resize-media-handle--left" title="왼쪽 리사이즈 핸들바" aria-label="왼쪽 리사이즈 핸들바"></div><div class="resize-media-handle resize-media-handle--right" title="오른쪽 리사이즈 핸들바" aria-label="오른쪽 리사이즈 핸들바"></div></div></div><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://inf.run/zcac5"><strong>[한입 챌린지-Next.js] 신청</strong></a></p></div></div></div></div></div></div></div></div></div><div class="grid-wrapper "><div class="left-action-menu-wrapper css-1jj2wwy action-menu-wrapper--view-mode" tabindex="0"><div class="one-column-grid"><div class="separator-element"><div class="separator-element__line"></div></div></div></div></div><div class="grid-wrapper "><div class="left-action-menu-wrapper css-1jj2wwy action-menu-wrapper--view-mode" tabindex="0"><div class="one-column-grid"><div><div class="box__children-wrapper"><div class="action-menu-wrapper action-menu-wrapper--view-mode"><div class="editor-container text-view-mode" style="display:flex;flex-direction:column;height:auto;max-height:100%;min-height:auto;border-radius:8px"><div data-testid="editor-content-container" class="editor-content-container markdown-body" style="background-color:rgb(255, 255, 255);cursor:auto"><div role="textbox" translate="yes" class="tiptap ProseMirror" tabindex="0"><h3 style="text-align:left">[한입 챌린지 7기 OT] 무료 세미나 신청하기</h3></div></div></div></div></div></div></div></div></div><div class="grid-wrapper "><div class="left-action-menu-wrapper css-1jj2wwy action-menu-wrapper--view-mode" tabindex="0"><div class="two-column-grid"><div><div class="box__children-wrapper"><div class="action-menu-wrapper action-menu-wrapper--view-mode"><div class="editor-container text-view-mode" style="display:flex;flex-direction:column;height:auto;max-height:100%;min-height:auto;border-radius:8px"><div data-testid="editor-content-container" class="editor-content-container markdown-body" style="background-color:rgb(255, 255, 255);cursor:auto"><div role="textbox" translate="yes" class="tiptap ProseMirror" tabindex="0"><div class="react-renderer node-resizableMedia ProseMirror-selectednode" contenteditable="false" draggable="true"><div as="div" class="resizable-media-node-view  " aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-33mgmdchq-dropdown" id="mantine-33mgmdchq-target" data-node-view-wrapper="" style="white-space:normal"><img data-drag-handle="true" class="resizable-media-img" src="https://cdn.inflearn.com/public/files/courses/339810/builder/01kbca2h68jgtq1effnzn0g6d5?w=960" title="01kbc412zkr53qdp25jwax24re.png" alt="01kbc412zkr53qdp25jwax24re" width="329" height="214"><div class="resize-media-handle resize-media-handle--left" title="왼쪽 리사이즈 핸들바" aria-label="왼쪽 리사이즈 핸들바"></div><div class="resize-media-handle resize-media-handle--right" title="오른쪽 리사이즈 핸들바" aria-label="오른쪽 리사이즈 핸들바"></div></div></div></div></div></div></div></div></div><div><div class="box__children-wrapper"><div class="action-menu-wrapper action-menu-wrapper--view-mode"><div class="editor-container text-view-mode" style="display:flex;flex-direction:column;height:auto;max-height:100%;min-height:auto;border-radius:8px"><div data-testid="editor-content-container" class="editor-content-container markdown-body" style="background-color:rgb(255, 255, 255);cursor:auto"><div role="textbox" translate="yes" class="tiptap ProseMirror" tabindex="0"><p><strong>Live OT 신청하기</strong></p><ul><li><p>일시 : 25.12.06(토)</p></li><li><p>시간 : 오후 4시~오후 6시</p></li><li><p><strong>링크 : </strong><a target="_blank" rel="noopener noreferrer nofollow" href="https://inf.run/Atnp8">https://inf.run/Atnp8</a></p></li></ul></div></div></div></div></div></div></div></div></div><div class="grid-wrapper "><div class="left-action-menu-wrapper css-1jj2wwy action-menu-wrapper--view-mode" tabindex="0"><div class="one-column-grid"><div class="separator-element"><div class="separator-element__line"></div></div></div></div></div><div class="grid-wrapper "><div class="left-action-menu-wrapper css-1jj2wwy action-menu-wrapper--view-mode" tabindex="0"><div class="one-column-grid"><div class="action-menu-wrapper action-menu-wrapper--view-mode"><div class="image-text__container image-text"><input type="file" accept="image/png,image/gif,image/jpeg,image/jpg,image/webp,image/bmp,image/x-icon,image/vnd.microsoft.icon,image/tiff" style="display:none"><div class="dropzone__wrapper"><div class="image-text__placeholder mantine-1avyp1d"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="image" class="svg-inline--fa fa-image " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="font-size:32px;color:rgb(134, 142, 150);width:32px;height:32px"><path fill="currentColor" d="M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM323.8 202.5c-4.5-6.6-11.9-10.5-19.8-10.5s-15.4 3.9-19.8 10.5l-87 127.6L170.7 297c-4.6-5.7-11.5-9-18.7-9s-14.2 3.3-18.7 9l-64 80c-5.8 7.2-6.9 17.1-2.9 25.4s12.4 13.6 21.6 13.6h96 32H424c8.9 0 17.1-4.9 21.2-12.8s3.6-17.4-1.4-24.7l-120-176zM112 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z"></path></svg></div><figure class="dropzone-preview__figure"><div class="dropzone-preview__uploaded-anchor dropzone-preview__uploaded-anchor--no-link"><img class="dropzone-preview__uploaded-content  " src="https://cdn.inflearn.com/public/files/courses/339810/builder/01kbc4e09h5tpr3b4t2e44qczs?w=960" alt="자산 14@2x" loading="lazy" decoding="async"></div></figure></div><div class="action-menu-wrapper action-menu-wrapper--view-mode"></div></div></div></div></div></div></div>

챌린지를 시작하며

1주차 :: Day1~Day5

2주차 :: Day6~Day10

3주차 :: Day11~Day14

4주차 :: Day15~Day18

5주차 :: Day19~Day23

따라가다보면 자연스럽게 완강을 하게되는, 페이스메이커로 훌륭한 챌린지입니다.

항상 재밌게 수강하고 있습니다.
감사합니다.

Typescript에 이어 react까지 한입챌린지 완주하게 되어 기쁩니다. 꼼꼼하고 체계적인 강의뿐만 아니라 챌린지와 다양한 미션까지 준비해주신 덕분에 처음으로 온라인 개발 강의를 온전히 완강하게 되었네요. 강사님 진심으로 감사드립니다. 앞으로도 좋은 강의 많이 부탁드립니다!!

<p><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/suhyeonus/money-organization">GitHub Link </a>- 가장 최근 커밋에 관련된 내용이 있습니다.</p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://money-organization.vercel.app/">Vercel Deployment</a></p><p>지금까지 감사했습니다 <span data-name="slightly_smiling_face" data-type="emoji">🙂</span> </p><img src="https://cdn.inflearn.com/public/files/posts/ed74229c-ab05-46ca-8152-b799819b2227/894cbf96-aa24-4336-9eb2-f3b4174747e5.png" media-type="img" alt="image.png" title="image.png" width="530" height="372"><p>&nbsp;</p>

Day23 미션 안내

Day23 미션

hasg

<img src="https://cdn.inflearn.com/public/files/posts/82d9f50f-0652-4610-976b-9f7c0e1541ee/052d69dd-aca5-4c57-8bda-44091c592e09.png" media-type="img" alt="image.png" title="image.png" width="525" height="341"><p>배포 완료입니다!</p>

day23

Day22 미션 안내

day22

Day21 미션 안내

day21

Day23

st2702

Day20 미션 안내

day20

Day22

<pre><code class="language-javascriptreact">import "./App.css";
import { Routes,Route,Link,useNavigate} from "react-router-dom";
import {useReducer, useRef, createContext} from "react";
import Home from "./pages/Home";
import NewTransaction from "./pages/NewTransaction";
import EditTransaction from "./pages/EditTransaction";
import Notfound from "./pages/Notfound";


const mockData = [
  {
    id: 0,
    name: "마라탕 &amp; 꿔바로우",
    amount: 59000,
    type: "expense",
    category: "🍚 식비",
    date: new Date().getTime() + 1,
  },
  {
    id: 1,
    name: "월세",
    amount: 500000,
    type: "expense",
    category: "🏠 생활",
    date: new Date().getTime() + 2,
  },
  {
    id: 2,
    name: "월급",
    amount: 3500000,
    type: "income",
    category: "🏢 급여",
    date: new Date().getTime() + 3,
  },
];

function reducer(state,action){
  switch(action.type){
    case 'INIT': return action.data;
    case 'CREATE': return[...state, action.data]
    case 'UPDATE': return state((transaction)=&gt;
      String(transaction.id) === String(action.data.id)? action.data :transaction
  );
  case 'DELETE':
    return state.filter((transaction)=&gt;String(transaction.id) != String(action.id)
  );
  default:
    return state;
  }
}

const TransactionStateContext  = createContext();
const TransactionDispatchContext  = createContext();

function App() {

  const [transactions, setTransactions] = useReducer(reducer, [mockData]);
  const idRef =useRef(4);

  const onCreateTransaction = (name, amount, type, category, date) =&gt; {
      setTransactions({
      type:"CREATE",
      data:{
        id: idRef.current++,
        name,
        amount,
        type,
        category,
        date
      },
    });
  };

  const onUpdateTransaction = (id, name, amount, type, category, date) =&gt; {
      setTransactions({
      type:"UPDATE",
      data:{
        name,
        amount,
        type,
        category,
        date
      },
    });
  };

  const onDeleteTransaction = (id) =&gt; {
     setTransactions({
      type:"DELETE",
      data:{
      id,
      },
    });
  };

  return (
    &lt;&gt;
    &lt;TransactionStateContext.Provider value={transactions}&gt;
      &lt;TransactionDispatchContext.Provider
        value={{
          onCreateTransaction,
          onUpdateTransaction,
          onDeleteTransaction,
        }}
      &gt;
        &lt;Routes&gt;
          &lt;Route path="/" element={&lt;Home /&gt;} /&gt;
          &lt;Route path="/new-transaction" element={&lt;NewTransaction /&gt;} /&gt;
          &lt;Route path="/edit-transaction/:id" element={&lt;EditTransaction /&gt;} /&gt;
        &lt;/Routes&gt;
      &lt;/TransactionDispatchContext.Provider&gt;
    &lt;/TransactionStateContext.Provider&gt;  
    &lt;/&gt;
  );
}

export default App;</code></pre><img src="https://cdn.inflearn.com/public/files/posts/6b486764-43c7-4adb-a597-4c9168c4c230/dc90fb83-c8c9-43d1-92bf-d9ac03d74c63.png" media-type="img" alt="image.png" title="image.png" width="525" height="407"><p>&nbsp;</p>

Day19 미션 안내

day19

Day21

Day20

<pre><code class="language-javascriptreact">import "./App.css";
import ContactEditor from "./components/ContactEditor";
import ContactList from "./components/ContactList";
import { useReducer, useRef, useCallback, createContext, useMemo } from "react";

function reducer(state, action) {
  switch (action.type) {
    case "CREATE":
      return [action.data, ...state];
    case "DELETE":
      return state.filter((it) =&gt; it.id !== action.targetId);
    default:
      return state;
  }
}

export const ContactStateContext = createContext();
export const ContactDispatchContext = createContext();

function App() {
  const [Contacts, dispatch] = useReducer(reducer, []);
  const idRef = useRef(0);

  const onCreate =useCallback( (name, contact) =&gt; {
    dispatch({
      type: "CREATE",
      data: {
        id: idRef.current++,
        name,
        contact,
      },
    });
  },[]);

  const onDelete = useCallback ((targetId) =&gt; {
    dispatch({
      type: "DELETE",
      targetId,
    });
  },[]);

  const memoizedDispatches = useMemo(
    () =&gt; ({ onCreate, onDelete }),
    []
  );

  return (
    &lt;div className="App"&gt;
      &lt;h2&gt;Contact List&lt;/h2&gt;
      &lt;ContactStateContext.Provider value={Contacts}&gt;
        &lt;ContactDispatchContext.Provider value={memoizedDispatches}&gt;
        &lt;section&gt;
          &lt;ContactEditor /&gt;
        &lt;/section&gt;
        &lt;section&gt;
          &lt;ContactList /&gt;
        &lt;/section&gt;
        &lt;/ContactDispatchContext.Provider&gt;
      &lt;/ContactStateContext.Provider&gt;
    &lt;/div&gt;
  );
}

export default App;</code></pre><pre><code class="language-javascriptreact">import "./ContactList.css";
import ContactItem from "./ContactItem";
import {useContext} from "react"
import { ContactStateContext } from "../App";

export default function ContactList() {
 
  const Contacts = useContext(ContactStateContext);

  return (
    &lt;div className="ContactList"&gt;
      &lt;div className="title"&gt;Contact List&lt;/div&gt;
      {Contacts.map((contact) =&gt; (
        &lt;ContactItem
          key={contact.id}
          {...contact}
        /&gt;
      ))}
    &lt;/div&gt;
  );
}</code></pre><pre><code class="language-javascriptreact">import "./ContactItem.css";
import {memo, useContext } from "react"
import { ContactDispatchContext } from "../App";

 function ContactItem({
  id,
  name,
  contact }) {
  const { onDelete } = useContext(ContactDispatchContext);

  return (
    &lt;div className="ContactItem"&gt;
      &lt;div className="name"&gt;{name}&lt;/div&gt;
      &lt;div className="contact"&gt;{contact}&lt;/div&gt;
      &lt;button onClick={() =&gt; onDelete(id)}&gt;🗑️ Remove&lt;/button&gt;
    &lt;/div&gt;
  );
}

export default memo(ContactItem);</code></pre><pre><code class="language-javascriptreact">import "./ContactEditor.css";
import { useState, useContext } from "react";
import { ContactDispatchContext } from "../App";

export default function ContactEditor() {
  const { onCreate } = useContext(ContactDispatchContext);

  const [state, setState] = useState({
    name: "",
    contact: "",
  });

  const onChangeState = (e) =&gt; {
    setState({
      ...state,
      [e.target.name]: e.target.value,
    });
  };

  const onSubmit = () =&gt; {
    if (state.name === "" || state.contact === "") {
      alert("이름과 연락처를 입력해주세요");
      return;
    }

    onCreate(state.name, state.contact);

    setState({
      name: "",
      contact: "",
    });
  };

  return (
    &lt;div className="ContactEditor"&gt;
      &lt;div className="title"&gt;Add Contact&lt;/div&gt;
      &lt;div className="input_wrapper"&gt;
        &lt;input
          className="name"
          name="name"
          value={state.name}
          onChange={onChangeState}
          placeholder="이름 ..."
        /&gt;
        &lt;input
          name="contact"
          value={state.contact}
          onChange={onChangeState}
          className="contact"
          placeholder="연락처(이메일) ..."
        /&gt;
      &lt;/div&gt;
      &lt;button onClick={onSubmit}&gt;Add&lt;/button&gt;
    &lt;/div&gt;
  );
}
</code></pre>

Day17 미션 안내

day17

<pre><code class="language-javascriptreact">import "./ContactItem.css";
import {memo} from "react"

 function ContactItem({
  id,
  name,
  contact,
  onDelete }) {

  return (
    &lt;div className="ContactItem"&gt;
      &lt;div className="name"&gt;{name}&lt;/div&gt;
      &lt;div className="contact"&gt;{contact}&lt;/div&gt;
      &lt;button onClick={() =&gt; onDelete(id)}&gt;🗑️ Remove&lt;/button&gt;
    &lt;/div&gt;
  );
}

export default memo(ContactItem);</code></pre><pre><code class="language-javascriptreact">import "./App.css";
import ContactEditor from "./components/ContactEditor";
import ContactList from "./components/ContactList";
import { useReducer, useRef,useCallback } from "react";

function reducer(state, action) {
  switch (action.type) {
    case "CREATE":
      return [action.data, ...state];
    case "DELETE":
      return state.filter((it) =&gt; it.id !== action.targetId);
    default:
      return state;
  }
}

function App() {
  const [Contacts, dispatch] = useReducer(reducer, []);
  const idRef = useRef(0);

  const onCreate =useCallback( (name, contact) =&gt; {
    dispatch({
      type: "CREATE",
      data: {
        id: idRef.current++,
        name,
        contact,
      },
    });
  },[]);

  const onDelete = useCallback ((targetId) =&gt; {
    dispatch({
      type: "DELETE",
      targetId,
    });
  },[]);

  return (
    &lt;div className="App"&gt;
      &lt;h2&gt;Contact List&lt;/h2&gt;
      &lt;section&gt;
        &lt;ContactEditor onCreate={onCreate} /&gt;
      &lt;/section&gt;
      &lt;section&gt;
        &lt;ContactList Contacts={Contacts} onDelete={onDelete} /&gt;
      &lt;/section&gt;
    &lt;/div&gt;
  );
}

export default App;
</code></pre>

Day16 미션 안내

day16

<img src="https://cdn.inflearn.com/public/files/posts/906d2183-e4de-4017-9477-5069b97d0e55/5fbc5ce7-2c1f-432d-a5e5-39be5f6ae59f.png" media-type="img" alt="image.png" title="image.png" width="527" height="308"><p>&nbsp;</p><pre><code class="language-javascriptreact">import "./App.css";
import ContactEditor from "./components/ContactEditor";
import ContactList from "./components/ContactList";
import { useReducer, useRef } from "react";

function reducer(state, action) {
  switch (action.type) {
    case "CREATE":
      return [action.data, ...state];
    case "DELETE":
      return state.filter((it) =&gt; it.id !== action.targetId);
    default:
      return state;
  }
}

function App() {
  const [Contacts, dispatch] = useReducer(reducer, []);
  const idRef = useRef(0);

  const onCreate = (name, contact) =&gt; {
    dispatch({
      type: "CREATE",
      data: {
        id: idRef.current++,
        name,
        contact,
      },
    });
  };

  const onDelete = (targetId) =&gt; {
    dispatch({
      type: "DELETE",
      targetId,
    });
  };

  return (
    &lt;div className="App"&gt;
      &lt;h2&gt;Contact List&lt;/h2&gt;
      &lt;section&gt;
        &lt;ContactEditor onCreate={onCreate} /&gt;
      &lt;/section&gt;
      &lt;section&gt;
        &lt;ContactList Contacts={Contacts} onDelete={onDelete} /&gt;
      &lt;/section&gt;
    &lt;/div&gt;
  );
}

export default App;</code></pre><pre><code class="language-javascriptreact">import "./ContactEditor.css";
import { useState } from "react";

export default function ContactEditor({ onCreate }) {
  const [state, setState] = useState({
    name: "",
    contact: "",
  });

  const onChangeState = (e) =&gt; {
    setState({
      ...state,
      [e.target.name]: e.target.value,
    });
  };

  const onSubmit = () =&gt; {
    if (state.name === "" || state.contact === "") {
      alert("이름과 연락처를 입력해주세요");
      return;
    }

    onCreate(state.name, state.contact);

    setState({
      name: "",
      contact: "",
    });
  };

  return (
    &lt;div className="ContactEditor"&gt;
      &lt;div className="title"&gt;Add Contact&lt;/div&gt;
      &lt;div className="input_wrapper"&gt;
        &lt;input
          className="name"
          name="name"          
          value={state.name}
          onChange={onChangeState}
          placeholder="이름 ..."
        /&gt;
        &lt;input
          name="contact"      
          value={state.contact}
          onChange={onChangeState}
          className="contact"
          placeholder="연락처(이메일) ..."
        /&gt;
      &lt;/div&gt;
      &lt;button onClick={onSubmit}&gt;Add&lt;/button&gt;
    &lt;/div&gt;
  );
}</code></pre><pre><code class="language-javascriptreact">import "./ContactItem.css";

export default function ContactItem({
  id,
  name,
  contact,
  onDelete }) {

  return (
    &lt;div className="ContactItem"&gt;
      &lt;div className="name"&gt;{name}&lt;/div&gt;
      &lt;div className="contact"&gt;{contact}&lt;/div&gt;
      &lt;button onClick={() =&gt; onDelete(id)}&gt;🗑️ Remove&lt;/button&gt;
    &lt;/div&gt;
  );
}</code></pre><pre><code class="language-javascriptreact">import "./ContactList.css";
import ContactItem from "./ContactItem";

export default function ContactList({Contacts, onDelete}) {
  return (
    &lt;div className="ContactList"&gt;
      &lt;div className="title"&gt;Contact List&lt;/div&gt;
      {Contacts.map((contact) =&gt; (
        &lt;ContactItem
          key={contact.id}
          {...contact}
          onDelete={onDelete}
        /&gt;
      ))}
    &lt;/div&gt;
  );
}
</code></pre>

Day15 미션 안내

day 15

<p>사진의 경우 첨부파일에 있습니다!</p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/suhyeonus/money-organization">GitHub Link</a> - 2026.01.15 커밋(<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/suhyeonus/money-organization/commit/0c6173aa4883604671b8a81cebed59fe08844c82">Link</a>)에 금일 미션과 관련된 내용이 있습니다.</p>

Day22 미션

Day19

Day14 미션 안내

day14

Day18 미션 안내

Day18

Day17

<pre><code class="language-javascriptreact">import { useState } from "react";
import "./App.css";

function CurrencyInput({ currency, value, onChange }) {
  return (
    &lt;div&gt;
      &lt;label&gt;{currency}:&lt;/label&gt;
      &lt;input
        type="number"
        value={value}
        onChange={(e) =&gt; onChange(currency, e.target.value)}
      /&gt;
    &lt;/div&gt;
  );
}

const EXCHANGE_RATE = 1300;
function App() {
  const [state, setState] = useState({
    krw: 0,
    usd: 0,
  });

  const onChange = (currency, value) =&gt; {
    console.log({ currency, value });
    if (currency === "krw") {
      setState({
        krw: value,
        usd: value / EXCHANGE_RATE,
      });
    } else {
      setState({
        krw: value * EXCHANGE_RATE,
        usd: value,
      });
    }
  };

  return (
    &lt;&gt;
      &lt;h2&gt;환율 변환기 (KRW-USD)&lt;/h2&gt;
      &lt;CurrencyInput
        currency={"krw"}
        value={state.krw}
        onChange={onChange}
      /&gt;
      &lt;CurrencyInput
        currency={"usd"}
        value={state.usd}
        onChange={onChange}
      /&gt;
    &lt;/&gt;
  );
}

export default App;</code></pre>

Day13 미션 안내

day 13

<pre><code class="language-javascriptreact">import { useState, useRef } from 'react';

/**
 *
 menu : 메뉴를 저장하기 위한 State
address : 배달 주소를 저장하기 위한 State
request : 배달 요청사항을 저장하기 위한 State
 */

const OrderEditor = () =&gt; {
    const [input, setInput] = useState({
        menu: "",
        address: "",
        request: "",
    });

     const inputRef = useRef(null);

    const onChangeMenu = (e) =&gt; {
        setInput({
            ...input,
            [e.target.name]: e.target.value,
        });
    }

    const onSubmit = () =&gt; {
    if (input.address === "") {
      inputRef.current.focus();
      return;
    }

    alert(
      `주문이 완료되었습니다! 메뉴: ${input.menu}, 주소: ${input.address}, 요청사항: ${input.request}`
    );
  };

  return (
    &lt;div
      style={{ display: "flex", flexDirection: "column", gap: 10 }}
    &gt;
      &lt;h2&gt;배달의민족 주문&lt;/h2&gt;
      &lt;div&gt;
        &lt;div style={{ marginBottom: 5, fontSize: 14 }}&gt;
          메뉴 선택
        &lt;/div&gt;
        &lt;select
        name="menu"
        value={input.menu} onChange={onChangeMenu} style={{ width: 300, padding: 5 }}&gt;
          &lt;option value={"족발"}&gt;족발&lt;/option&gt;
          &lt;option value={"떡볶이"}&gt;떡볶이&lt;/option&gt;
          &lt;option value={"아이스크림"}&gt;아이스크림&lt;/option&gt;
          &lt;option value={"샐러드"}&gt;샐러드&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;div style={{ marginBottom: 5, fontSize: 14 }}&gt;
          배달 주소
        &lt;/div&gt;
        &lt;input
          name="address"
          value={input.address}
          onChange={onChangeMenu}
          ref={inputRef}
          style={{ width: 300, padding: 5 }}
          placeholder="주소) 서울특별시 xx동 .."
        /&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;div style={{ marginBottom: 5, fontSize: 14 }}&gt;
          배달 요청사항
        &lt;/div&gt;
        &lt;textarea
          name="request"
          value={input.request}
          onChange={onChangeMenu}
          style={{ width: 300, padding: 5 }}
          placeholder="배달 요청사항을 써 주세요..."
        /&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;button
          onClick={onSubmit}
          style={{ width: 300, padding: 5 }}
        &gt;
          주문 완료
        &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
};

export default OrderEditor;
</code></pre><img src="https://cdn.inflearn.com/public/files/posts/e2f9e3aa-60c8-44cf-b7c4-9218536badb7/67cbce92-438d-4b3b-b775-e150663fa791.png" media-type="img" alt="image.png" title="image.png" width="396" height="335"><pre><code class="language-javascriptreact">
</code></pre>

Day12 미션 안내

day 12

<img src="https://cdn.inflearn.com/public/files/posts/07f7636c-10e0-419a-ba10-c4cae74ab102/49040c05-d24c-4b60-8133-3d2453ef763c.webp" media-type="img" alt="스크린샷 2026-01-14 오후 11.27.15.png.webp" title="스크린샷 2026-01-14 오후 11.27.15.png.webp" width="542" height="308"><img src="https://cdn.inflearn.com/public/files/posts/1c8ea98c-b08b-44fe-8443-01593a123c36/51db112c-0fe4-46ab-82db-406d68d21372.webp" media-type="img" alt="스크린샷 2026-01-14 오후 11.13.55.png.webp" title="스크린샷 2026-01-14 오후 11.13.55.png.webp" width="335" height="388"><p>&nbsp;<a target="_blank" rel="noopener noreferrer nofollow" href="https://onebite-account-book-nine.vercel.app/">https://onebite-account-book-nine.vercel.app/</a></p>

[DAY23] 미션제출

라랄

Day 16

D15미션 제출

Day14

ViewContent.1770547592.339810.64c51f76-bb4d-439d-a7ef-6e52f2491619