[코뮤니티 모각코] 웹 리액트 과정 - 1주차

2021-12-20 MON~2021-12-24 FRI의 기록 💻

📌 1일차 리액트란?

✅ 오늘의 문제 | 내가 구현 해 보고 싶은 웹 페이지

폰을 보는 시간 보다 컴퓨터 앞에 앉아있는 시간이 많다보니
폰에 있는 To-Do List 어플을 사용하기 보다는,
그냥 윈도우 '스티커 메모(Sticky Notes)' 에다가 대강 할 일들을 기록하고 체크하는 편이다.
간단하면서도 할일과 기한을 입력할 경우 해당 내용이 자동으로 업뎃되는 캘린더도 함께 확인할 수 있는
나만의 To-Do List 페이지를 만들어보고 싶다 :)

+) 리액트로 swit이라는 협업 사이트를 클론코딩 해보는 프로젝트를 진행했었는데,
허겁지겁 리액트를 독학해가며 진행했어서 리액트의 장점을 제대로 활용하지 못했던 것 같다.
가능하면 이번 기회에 해당 프로젝트의 코드도 리팩토링 해보고 싶다.

📌 2일차 프로젝트 생성과 Hello, React!

✅ 오늘의 문제 | 1일차에 제출한 웹 사이트의 이름과 간단한 설명 출력

• 사이트 이름 컴포넌트(Title) 간단한 설명 컴포넌트(Explanation) 따로 생성
• Explanation 컴포넌트 내부에는 개행 태그 br/ 활용

🔽 src/App.js

import React from 'react;
import Title from './Assignment02/Title';
import Explanation from './Assignment02/Explanation';

function App() {
  return (
    <div>
      <Title />
      <Explanation />
    </div>
  );
}

export default App;

🔽 src/Assignment02/Title.js

function Title() {
    return <h1>My To Do List</h1>;
}

export default Title;

🔽 src/Assignment02/Explanation.js

function Explanation() {
    return (
        <div>
            My To Do List는 컴퓨터 앞에서 시간을 대부분 보내는 여러분들을 위한 할일 관리 페이지 입니다
            <br/>
            여러분이 입력한 할일과 기한이 자동으로 동기화되는 캘린더를 참고하여 간편하게 할일을 관리하세요!
        </div>
    );
}

export default Explanation;

🔽 출력화면

📌 3일차 컴포넌트 스타일링

✅ 오늘의 문제 | Module CSS를 사용 해 보기

• src/App.js 소스코드는 2일차와 동일
• Title 컴포넌트에 Module CSS 적용

swit 클론코딩 진행할 때 기능이 유사한 클래스마다 이름이 중복되지 않게 네이밍하느라 힘들었는데.. Module CSS에 대해서 알았더라면 얼마나 좋았을까라는 생각이 든다 😭

🔽 src/Assignment02/Title.js

import styles from '../Assignment03/Title.module.css';

function Title() {
    return <div className={styles.title}>My To Do List</div>;
}

export default Title;

🔽 src/Assignment03/Title.module.css

.title {
    margin: 20px 10px;
    color: gray;
    font-size: larger;
    font-weight: bolder;
}

🔽 캡쳐화면

📌 4일차 Hook과 State

✅ 오늘의 문제 | 4일차의 예제에 기능 추가하기

• 일관성을 위해 onClick 함수명을 plusNumber로 변경
• minusNumber, multiplyNumber 함수 및 해당 함수들이 연동되는 버튼들 추가
• 간단하게 Module CSS 복습

🔽 src/App.js

import React, { useState } from 'react';
import styles from './Assignment04/day4.module.css';

function App() {
  const [number, setNumber] = useState(0);

  function plusNumber() {
    setNumber(number+1);
  }

  function minusNumber() {
    setNumber(number-1);
  }

  function multiplyNumber() {
    setNumber(number*2);
  }

  return (
    <div>
      <div className={styles.mainDiv}>
        <div className={styles.title}>값: {number}</div>
        <button onClick={plusNumber}>+1</button>
        <button onClick={minusNumber}>-1</button>
        <button onClick={multiplyNumber}>*2</button>
      </div>
    </div>
  );
}

export default App;

🔽 src/Assignment04/day4.module.css

.mainDiv {
    width: 100px;
    height: 100px;
    margin: 20px 40px;
}

.title {
    font-size: xx-large;
    font-weight: bolder;
}

📌 5일차 Props

✅ 오늘의 문제 | 구구단 출력하기

• Gugudan 컴포넌트에서 map 활용하여 number에 곱하는 숫자가 변하는 부분(1~9) 구성
• 화면 센터에 구구단 표가 출력될 수 있도록 Layout.module.css 살짝 수정

🔽 src/App.js

import React, { useState } from 'react';
import Button from './Button';
import Layout from './Layout';
import Gugudan from './Assignment05/Gugudan';

function App() {
  const [number, setNumber] = useState(0);

  function plusNumber() {
    setNumber(number+1);
  }

  function minusNumber() {
    setNumber(number-1);
  }

  function multiplyNumber() {
    setNumber(number*2);
  }

  return (
    <Layout>
      <Gugudan number={number} />
      <Button onClick={plusNumber} text="+1" />
      <Button onClick={minusNumber} text="-1" />
      <Button onClick={multiplyNumber} text="*2" />
    </Layout>
  );
}

export default App;

🔽 src/Layout.module.css

.container {
    width: 200px;
    margin: 20px auto;
    padding: 10px;
    border: 1px solid black;
    border-radius: 10px;
}

🔽 src/Assignment05/Gugudan.js

function Gugudan( {number} ) {
    const numList = [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ];

    return (
        <div>
            {numList.map((num) => (
                <div>{number} * {num} = {number*num}</div>
            ))}
        </div>
    );
}

export default Gugudan;